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

小编典典

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

css

我很好奇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>

阅读 281

2020-05-16

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

2020-05-16