如何使用 CSS flexbox 定位元素？

Question

我有这个代码：

.top-row,
.bottom-row {
  background: red;
  padding: 10px;
  display: flex;
}

.box1,
.box2,
.box3,
.box4 {
  background: green;
  padding: 10px;
  flex: 1;
}

.header {
  background: tan;
  padding: 10px;
}

.column1 {
  background: pink;
  padding: 10px;
}

.column2 {
  background: yellow;
  padding: 10px;
}

<div class="top-row">
  <div class="box1">
    <div class="header">
      <!-- this field should be left -->
      <form>
        <input type="text">
      </form>
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- this button should be right -->
      <button class="edit">edit</button>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box2">
    <div class="header">
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- these buttons should be centered -->
      <button class="edit">btn1</button>
      <button class="edit">btn2</button>
      <button class="edit">btn3</button>
      <!-- this field should be right -->
      <form>
        <input type="text">
      </form>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>
<div class="bottom-row">
  <div class="box3">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box4">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>

我制作了这个代码笔： https://codepen.io/demiurgen/pen/zzygRb

我需要帮助才能将 left 和 right 列设置为左列和右列。 他们应该占用他们盒子内空间的50%。每个框都应该是一个两列布局，顶部有一个标题。

另外，如何在弹性框中定位表单字段和按钮等元素？ 我是否需要为我想要定位的每个元素创建另一个 flexbox 子元素？

Answer 1

我认为您需要使用列容器才能使 flex 正常工作。

像这样：https://codepen.io/anon/pen/OgdLLO

.col-container {
  display: flex;
}

Answer 2

您可以使用嵌套的弹性容器来实现所需的布局。您可以使用flex: 0 0 50% 使元素50% 宽度，并且不允许元素增长和缩小。请注意，flex 是设置flex-grow、flow-shrink 和flex-basis 的简写。

这也可以通过设置flex: 1 0 0 来实现。这是强制元素增长但不基于内容增长（默认值为：flex: 0 1 auto，其中auto 表示基于内容采用width）。

演示：

* {
  box-sizing: border-box; /* new */
}

.top-row,
.bottom-row {
  background: red;
  padding: 10px;
  display: flex;
}

.box1,
.box2,
.box3,
.box4 {
  background: green;
  padding: 10px;
  flex: 1;
  
  display: flex; /* new */
  flex-wrap: wrap; /* new */
}

.header {
  background: tan;
  padding: 10px;
  flex: 0 0 100%; /* new */
}

.column1 {
  background: pink;
  padding: 10px;
  flex: 0 0 50%; /* new */
}

.column2 {
  background: yellow;
  padding: 10px;
  flex: 0 0 50%; /* new */
}

 /* new */
.header {
  display: flex;
  flex-wrap: wrap;
}

 /* new */
.header form {
  width: 100%;
}

 /* new */
.header form input[type="text"] {
  width: 100%;
}

 /* new */
.header .add {
  margin-right: auto;
}

<div class="top-row">
  <div class="box1">
    <div class="header">
      <!-- this field should be left -->
      <form>
        <input type="text">
      </form>
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- this button should be right -->
      <button class="edit">edit</button>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box2">
    <div class="header">
      <!-- this button should be left -->
      <button class="add">+</button>
      <!-- these buttons should be centered -->
      <button class="edit">btn1</button>
      <button class="edit">btn2</button>
      <button class="edit">btn3</button>
      <!-- this field should be right -->
      <form>
        <input type="text">
      </form>
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>
<div class="bottom-row">
  <div class="box3">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
  <div class="box4">
    <div class="header">
      header
    </div>
    <div class="column1">
      left column
    </div>
    <div class="column2">
      right column
    </div>
  </div>
</div>