可能的布局？Flexbox vs Float布局,包含多个列和行

Question

我很好奇这个布局是否可以使用flexbox.我似乎无法解决div 3和4属于#2.浮点数非常简单,只是好奇我是否遗漏了一些可能对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>

演示

http://codepen.io/mikevoermans/pen/xbWvJJ?editors=110

Answer 1

Flexbox不喜欢通过多个列或行扩展的flex项,因为实际上flexbox没有网格概念.

但是,使用一些技巧,您可以实现此布局(以及更复杂的布局):

• 使用行布局

  ?????????
  ?1?2?3?4?
  ?????????
  

• 允许换行符flex-wrap: wrap.

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

  ?????
  ?1?2?
  ?????
  ?3?4?
  ?????
  

• 用于flex: 1所有弹性项目.

  ?????????????????????
  ?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: -200px1:

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