Question

我很好奇是否可以使用flexbox进行此布局。我似乎无法解决div 3＆amp; 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没有网格概念。

但是，使用一些技巧，您可以实现此布局（以及more complicated ones）：

使用行布局

┌─┬─┬─┬─┐
│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; 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>

但是，为了拥有嵌套的flexbox，修改HTML会更容易。

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

Answer 2

不适用于flexbox，但可以使用CSS Grid。它还没有附带所有主流浏览器，但有一个polyfill：

https://jsfiddle.net/hvdq63ah/

＆＃13;

.features {
    display: grid;
    grid-template-areas:
      "feature1 feature2 feature2"
      "feature1 feature3 feature4";
    grid-template-columns: auto minmax(min-content, 1fr) minmax(min-content, 1fr);
    grid-template-rows: auto minmax(min-content, 1fr);      
      
		background-color: #fff;
}

.feature-1    { grid-area: feature1 }
.feature-2    { grid-area: feature2 }
.feature-3    { grid-area: feature3 }
.feature-4    { grid-area: feature4 }

.feature {
  border: 1px solid black;
  padding: 20px;
}

＆＃13;

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

＆＃13;

Answer 3

使用三个柔性容器，使用flexbox实现布局非常容易和容易。

主要的Flex容器#rFlex将所有内容包装成一行。
垂直右侧包含在#cFlex中，导致#flex2, #flex3和#flex4在列中流动。
然后，弹性项#flex3和#flex4设置为#sFlex水平流动。
#cflex为inline-flex，因此可以稳固地保留在#flex1旁边

＆＃13;

html {
  box-sizing: border-box;
  font: 400 16px/1.45'Source Code Pro';
}
*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
}
body {
  background: #121;
  color: #FEF;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  width: 100vw;
  height: 100vh;
}
/* Flex Containers */

#rFlex {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: center;
  justify-content: center;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
  height: auto;
}
#cflex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  -webkit-align-items: center;
  align-items: center;
  height: 80vh;
  width: 45vw;
}
#sFlex {
  display: -webkit-inline-flex;
  display: inline-flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: center;
  justify-content: center;
}
/* Flex Items */

.flex {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}
#flex1 {
  width: 45vw;
  height: 80vh;
  background: red;
}
#flex2 {
  width: 45vw;
  height: 40vh;
  background: blue;
}
#flex3,
#flex4 {
  width: 22.5vw;
  height: 40vh;
}
#flex3 {
  background: yellow;
}
#flex4 {
  background: green;
}

＆＃13;

<main id="rFlex">
  <section id="flex1" class="flex">

  </section>
  <article id="cFlex">
    <section id="flex2" class="flex">

    </section>
    <aside id="sFlex">
      <section id="flex3" class="flex">

      </section>
      <section id="flex4" class="flex">

      </section>
    </aside>
  </article>
</main>

＆＃13;

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

3 个答案: