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中定位表单字段和按钮whit等元素？我是否需要为我想要定位的每个元素创建另一个flexbox子项？

Answer 1

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

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

演示：

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

.col-container {
  display: flex;
}

如何使用CSS flexbox定位元素？

2 个答案: