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

在纵向视图中：

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

在横向视图中时：

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

我的加价示例位于：http://jsfiddle.net/Np2uk/

Answer 1

flex （2013年）太年轻而不可靠，我仍然会使用与n-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;
}
/*  possible alternative behavior 
 .index {
  height:auto;
  min-height: 100%;/* you can eventually let it grow , else .story might need to show a scroll*/
}
*/
.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;
  }
}

<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年后）后，我仍然不建议{？1}} 用于此特定布局，其中某些框跨越行或列