Flexbox布局模式1/3

Question

我正在寻找一些帮助准备flexbox中的布局模式，问题是我将在容器内打印一组div并且我无法更改渲染逻辑（即添加一些包装行），但是，我我想得到这样的东西：

不幸的是每次都被卡住了，结果都不尽如人意：/ 这些div的高度是固定的，1是2 + 3 +间隙的总和。

https://jsfiddle.net/zechkgf4/

[]

提前谢谢

Answer 1

相反，使用flexbox可以 这个布局，只需稍微修改一下你的标记。这是一个有效的例子：http://codepen.io/timothylong/pen/XRrBBW

HTML：

<main>
    <section class="large item">
        1 (Large)
    </section>
    <div class="small">
        <section class="item">
            2 (Small)
        </section>
        <section class="item">
            3 (Small)
        </section>
    </div>
</main>

SCSS：

main {
    display: flex;
    flex-flow: row;
    .item {
        display: flex;
        flex: 1;
    }
    .large {
        flex: 0 0 60%;
    }
    .small {
        display: flex;
        flex-direction: column;
    }
}

.small包装器允许我们使用flex-direction: column垂直堆叠两个较小的模块。

Answer 2

你想做的事情并不适用于@Michael_B提供的link所指出的弹性框

您可以使用浮点数生成非常接近您想要的内容：

＆＃13;

＆＃13;

.boxed {
  width:100%;
  background:#fff;
  overflow:hidden;
}
.boxed div {
  height:50px;
  margin:4px;
  background:#f5f5f5;
  width:calc(40% - 16px);
  float: left;
}

.boxed div:nth-child(6n + 1), .boxed div:nth-child(6n + 4) {
  background:salmon;
  height:108px;
  width:60%;
}

 .boxed div:nth-child(6n + 4), div:nth-child(6n + 5),  div:nth-child(6n + 6) {
   float: right;
 }

＆＃13;

<div class="boxed">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，右边对齐的大块更改为6n + 4而不是6n + 6