display:flex左右一边一个

你可以使用CSS的flex布局来实现左右两边各放置一个元素。下面是一个简单的示例代码：

<div class="container">
  <div class="left">左边</div>
  <div class="right">右边</div>
</div>

.container {
  display: flex;
}

.left {
  flex: 1;
}

.right {
  flex: 1;
}

在上面的代码中，我们使用了一个包含两个子元素的父容器（class为"container"）。通过设置父容器的"display"属性为"flex"，我们将子元素放置在一行上，并自动均分整个宽度。

子元素的class为"left"和"right"，并且都设置了"flex: 1"，这意味着它们将均分父容器的宽度。因此，左右两边的元素将分别出现在左侧和右侧。

你可以根据需要调整子元素的样式和内容。希望这个示例能帮到你！

相关问题

display:flex左右居中对齐

display:flex是CSS中的一个属性，用于创建弹性布局。左右居中对齐可以通过以下步骤实现：

1. 创建一个父容器，并将其样式设置为display:flex，这样子元素就可以按照弹性布局排列。
2. 将父容器的justify-content属性设置为center，这样子元素在水平方向上就会居中对齐。
3. 将父容器的align-items属性设置为center，这样子元素在垂直方向上也会居中对齐。

下面是一个示例代码：

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="container">
    <!-- 子元素 -->
</div>

这样，子元素就会在父容器中水平和垂直方向上居中对齐了。

display: flex;平分一个区域

要平分一个区域，可以使用 CSS 的 `flex` 属性。具体的步骤如下：

1. 创建一个父容器，并设置 `display: flex;`。这将使父容器的子元素自动排列在一行或一列上。
2. 设置父容器的子元素的 `flex-grow` 属性为相同的值（通常为1），表示它们应该平均分配父容器的可用空间。
3. 设置父容器的子元素的 `flex-basis` 属性为0，以确保它们平分父容器的空间。

以下是一个示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

.container {
  display: flex;
}

.item {
  flex-grow: 1;
  flex-basis: 0;
}

在上面的示例中，父容器具有 `display: flex;` 属性，子元素的 `flex-grow` 设置为1，`flex-basis` 设置为0。这将使子元素平均分配父容器的可用空间。你可以根据需要调整父容器和子元素的样式。