css - 使用 flexbox 的多列和多行布局

Question

我正在尝试使用 flexbox 实现响应式布局，但不确定这是否可行。

我的标记是这样的:

<div class="index">
  <div class="story story-hero">1</div>
  <div class="story story-standard">2</div>
  <div class="story story-standard">3</div>
  <div class="story story-standard">4</div>
  <div class="story story-standard-portrait story-brief-landscape">5</div>
  <div class="story story-standard-portrait story-brief-landscape">6</div>  
</div>

在纵向 View 中:

    -------------------------
    |               |       |
    |               |   2   |
    |               |       |
    |       1       |-------|
    |               |       |
    |               |   3   |
    |               |       |
    |---------------|-------|
    |       |       |       |
    |   4   |   5   |   6   |
    |       |       |       |
    -------------------------

在横向 View 中:

    ---------------------------------
    |               |       |       |
    |               |   2   |   3   |
    |               |       |       |
    |       1       |-------|-------|
    |               |       |   5   |
    |               |   4   |-------|
    |               |       |   6   |
    ---------------------------------

我的标记示例位于此处:http://jsfiddle.net/Np2uk/

Answer 1

flex (2013 年) 太年轻而不可靠，我仍然会使用 float 和第 nth-child(或类)和 mediaquerie。这是一个带有空框的简单示例:

html,
body {
  height: 100%;
  margin: 0
}

body {
  counter-reset: mydivs;
}

div {
  counter-increment: mydivs;
  border: dotted;
  box-sizing: border-box;
  float: left;
}

div:nth-child(1) {
  height: 66.6%;
  width: 66.6%;
}

div+div {
  height: 33.33%;
  width: 33.3%
}

div:before {
  content: counter(mydivs);
}

hr {
  counter-reset: mydivs;
  clear: both;
  margin: 1em;
}

hr+div {
  height: 100%;
  width: 50%;
}

hr+div~div {
  height: 50%;
  width: 25%;
}

hr+div~div+div+div+div {
  height: 25%;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<hr/>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

http://codepen.io/gc-nomade/pen/uizCw

---

编辑 , 2017/18

Flex 仍然需要固定高度、子结构和包装，但我们现在有了 display:grid CSS 布局非常强大且方便:

html, body, .index {
  height: 100%;
  margin: 0;
}

.index {
  display: grid;
}

.story {
  border: dotted;
  box-sizing: border-box;
  background: tomato;
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}
.story:nth-child(2), .story:nth-child(9) {
  background: orange;
}
.story:nth-child(3), .story:nth-child(10) {
  background: green;
}
.story:nth-child(4), .story:nth-child(11) {
  background: black;
  color: white;
}
.story:nth-child(5), .story:nth-child(12) {
  background: purple;
}
.story:nth-child(6), .story:nth-child(13) {
  background: blue;
}

@media screen and (orientation: landscape) {
  .index {
    grid-template-columns: repeat(8, 1fr);
  }

  .story-hero {
    grid-column: 1 /span 4;
    grid-row: 1 /span 4;
  }

  .story:nth-child(4) ~ .story {
    grid-row: auto /span 1;
  }
}
@media screen and (orientation: portrait) {
  .index {
    grid-template-columns: repeat(6, 1fr);
  }

  .story-hero {
    grid-column: 1 /span 4;
    grid-row: 1 / span 4;
  }

  .story:nth-child(3) ~ .story {
    grid-column: auto /span 2;
  }
}
}
}
@media screen and (orientation: portrait) {
  .index {
    grid-template-columns: repeat(6, 1fr);
  }

  .story-hero {
    grid-column: 1 /span 4;
    grid-row: 1 / span 4;
  }

  .story:nth-child(3) ~ .story {
    grid-column: auto /span 2;
  }
}

<div class="index">
  <div class="story story-hero">1</div>
  <div class="story story-standard">2</div>
  <div class="story story-standard">3</div>
  <div class="story story-standard">4</div>
  <div class="story story-standard-portrait story-brief-landscape">5</div>
  <div class="story story-standard-portrait story-brief-landscape">6</div>  
</div>

https://codepen.io/gc-nomade/pen/pdqZbR

---

注意

在更新此答案后(4 年后)，我仍然不推荐 flex 用于某些框跨越的特定布局行或列