布局可能？ Flexbox与具有多个列和行的浮动布局 [英] Layout possible? Flexbox vs Float layout with multiple columns and rows

问题描述

我很好奇这个布局是否可能与flexbox。我似乎不能工作出来divs 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

解决方案

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

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

pre class =lang-none prettyprint-override> ┌─┬─┬─┬─┐
│1│2│3│4│
└─┴─┴─ ┴─┘


允许换行符 flex-wrap：wrap

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

< pre class =lang-none prettyprint-override> ┌─┬─┐
│1│2│
├─┼─┤
│3│4│
└─┴─┘


使用 1

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

设置 margin-left：50％到3

< pre class =lang-none prettyprint-override> ┌────────┐┐
│1│2│
└───────┼┼───┬┬───┤┤
│3│4│
└───┴┴────

设置 height：200px 将 height：400px 设置为1。

 ┌────────┬────────┐
│1│2│
│├──────── ┘$ b​​ $ b││
└───────┼┼───┬───┐
│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 或设置溢出 $ c> visible

$ b

这是代码：

  .features {display：flex; flex-flow：row wrap;}。feature {background：#ccc; border：8px solid #fff; height：200px; box-sizing：border-box;最小宽度：0; flex：1;}。feature-1 {/ *让它更高，而不增加flex行的高度* / height：400px; margin-bottom：-200px;}。features：after {/ * Force line break * / content：''; width：100％;}。feature-2〜.feature {/ *在换行符后放置3和4 * / 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>  

b
$ b

但是，修改HTML以便嵌套flexbox更容易。

  #wrapper {height：400px;}。flex {display：flex;}。column {flex-direction：column;}。 div {min-width：0; flex：1;}。item {background：#ccc; border：8px solid #fff;}  

 < div id =wrapperclass =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>  

I'm curious if this layout is possible with flexbox. I can't seem to work out divs 3 & 4 to fall under #2. This is pretty easy with floats, just curious if I'm missing some properties that may help with flexbox.

Layout

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

Markup

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

Demo

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

解决方案

Flexbox does not like flex items that expand through multiple columns or rows, because in fact flexbox has no grid notion.

However, using some tricks, you can achieve this layout (and more complicated ones too):

• Use a row layout

  ┌─┬─┬─┬─┐
  │1│2│3│4│
  └─┴─┴─┴─┘
  

• Allow line breaks with flex-wrap: wrap.

• Use a pseudo element to force a line break after 2

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

• Use flex: 1 on all flex items.

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

• Set margin-left: 50% to 3

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

• Set height: 200px, to 2, 3 and 4. Set height: 400px to 1.

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

• Set margin-bottom: -200px to 1:

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

• Since you have borders, use box-sizing: border-box on all boxes to make height include the borders. Otherwise 1 would need height: 416px; margin-bottom: -216px.

• Note flexbox introduces auto as the new initial value of min-width. That could allow the content to force some boxes to grow. That would break the layout, so disable it with min-width: 0 or setting overflow to anything but visible.

Here is the code:

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

However, it would be easier to modify the HTML in order to have nested flexboxes.

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

这篇关于布局可能？ Flexbox与具有多个列和行的浮动布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！