布局可行吗？具有多个列和行的Flexbox vs Float布局

Question

我很好奇flexbox是否可以使用这种布局。我似乎无法得出第3和第4格归入第二。这对于浮点数来说非常容易，只是好奇是否缺少一些可能对flexbox有帮助的属性。

布局

+-------+-------+-------+
| div 1 |     div 2     |
+       +-------+-------+
|       | div 3 | div 4 |
+-------+-------+-------+

标记

<div class="features">
  <div class="feature feature-1">1</div>
  <div class="feature feature-2">2</div>
  <div class="feature feature-3">3</div>
  <div class="feature feature-4">4</div>
</div>

Answer 1

Flexbox不喜欢在多列或多行中扩展的flex项目，因为实际上flexbox没有网格概念。

但是，使用一些技巧，您可以实现此布局（以及更复杂的布局）：

• 使用行布局

  ┌─┬─┬─┬─┐
  

  │1│2│3│4│
  └─┴─┴─┴─┘
  

• 使用允许换行flex-wrap: wrap。

• 使用伪元素在2之后强制换行

  ┌─┬─┐
  

  │1│2│
  ├─┼─┤
  │3│4│
  └─┴─┘
  
  

• 使用flex: 1上的所有Flex项目。

  ┌─────────┬─────────┐
  

  │1 │2 │
  ├─────────┼─────────┤
  │3 │4 │
  └─────────┴─────────┘

• 设为margin-left: 50%3

  ┌─────────┬─────────┐
  

  │1 │2 │
  └─────────┼────┬────┤
  │3 │4 │
  └────┴────┘

• 设置height: 200px为2、3和4。设置height: 400px为1。

  ┌─────────┬─────────┐
  

  │1 │2 │
  │ ├─────────┘
  │ │
  └─────────┼────┬────┐
  │3 │4 │
  └────┴────┘

• 设置margin-bottom: -200px为1：

  ┌─────────┬─────────┐
  

  │1 │2 │
  │ ├────┬────┤
  │ │3 │4 │
  └─────────┴────┴────┘

• 由于您有边框，因此请box-sizing: border-box在所有框上使用以height包含边框。否则需要1 height: 416px; margin-bottom: -216px。

• 注意flexbox auto作为的新初始值引入min-width。这样可以使内容迫使某些盒子增长。这会破坏布局，因此请使用min-width: 0或将设置overflow为，将其禁用visible。

这是代码：

.features {

  display: flex;

  flex-flow: row wrap;

}

.feature {

  background: #ccc;

  border: 8px solid #fff;

  height: 200px;

  box-sizing: border-box;

  min-width: 0;

  flex: 1;

}

.feature-1 {

  /* Make it taller without increasing the height of the flex line */

  height: 400px;

  margin-bottom: -200px;

}

.features:after {

  /* Force line break */

  content: '';

  width: 100%;

}

.feature-2 ~ .feature {

  /* Place 3 and 4 after the line break */

  order: 1;

}

.feature-3 {

  margin-left: 50%;

}


<div class="features">

  <div class="feature feature-1">1</div>

  <div class="feature feature-2">2</div>

  <div class="feature feature-3">3</div>

  <div class="feature feature-4">4</div>

</div>

但是，修改HTML以具有嵌套的flexbox会更容易。

#wrapper {

  height: 400px;

}

.flex {

  display: flex;

}

.column {

  flex-direction: column;

}

.flex > div {

  min-width: 0;

  flex: 1;

}

.item {

  background: #ccc;

  border: 8px solid #fff;

}


<div id="wrapper" class="flex row">

  <div class="item">1</div>

  <div class="flex column">

    <div class="item">2</div>

    <div class="flex row">

      <div class="item">3</div>

      <div class="item">4</div>

    </div>

  </div>

</div>