布局可以吗?具有多列和多行的 Flexbox 与 Float 布局 [英] Layout possible? Flexbox vs Float layout with multiple columns and rows

问题描述

我很好奇这种布局是否适用于 flexbox.我似乎无法解决 div 3 &4 属于 #2.这对于浮动很容易，只是好奇我是否遗漏了一些可能对 flexbox 有帮助的属性.

布局

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

标记

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

演示

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

解决方案

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: -200px 设为 1:

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

• 因为你有边框，所以在所有的盒子上使用 box-sizing: border-box 来让 height 包含边框.否则 1 将需要 height: 416px;底边距:-216px.

• 注意 flexbox 引入了 auto 作为 min-width 的新初始值.这可能允许内容迫使一些盒子增长.这会破坏布局，因此使用 min-width: 0 禁用它或将 overflow 设置为除 visible 之外的任何内容.

  莉>

代码如下:

.features {显示:弹性；flex-flow:行包装；}.特征 {背景:#ccc;边框:8px 实心 #fff;高度:200px；box-sizing: 边框框；最小宽度:0；弹性:1；}.feature-1 {/* 在不增加伸缩线高度的情况下使其更高 */高度:400px；底边距:-200px；}.features:after {/* 强制换行 */内容: '';宽度:100%；}.feature-2 ~ .feature {/* 将 3 和 4 放在换行符之后 */订单:1；}.feature-3 {左边距:50%；}

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

然而，修改 HTML 以获得嵌套的 flexbox 会更容易.

#wrapper {高度:400px；}.柔性 {显示:弹性；}.柱子 {弹性方向:列；}.flex >div {最小宽度:0；弹性:1；}.物品 {背景:#ccc;边框:8px 实心 #fff;}

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

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 与 Float 布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！