使用弹性框进行多列和多行布局

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>

在纵向视图中时：

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

在横向视图中时：

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

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

Answer 1

flex（

在2013年）太年轻了，不可靠，我仍然会将float与nth-child（或class）和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

---

注意

更新此 answser 后（4 年后），我仍然不建议flex这种特定布局，其中某些框跨越行或列