Flexbox 布局模式 1/3答案

【问题标题】：Flexbox layout pattern 1/3Flexbox 布局模式 1/3
【发布时间】：2017-02-27 02:22:48
【问题描述】：

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

不幸的是每次都卡住了，结果一点也不满意：/ 这些 div 的高度是固定的，1 是 2 + 3 + gap 的总和。

[]

提前谢谢你

【问题讨论】：

stackoverflow.com/a/39645224/3597276

标签： html css layout less flexbox

【解决方案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 垂直堆叠两个较小的模块。

【讨论】：

感谢您的回复，但正如我所说：我无法更改渲染逻辑（即添加一些包装行）。那是棘手的部分。
@MaciejKwas，你不能改变渲染逻辑吗？即使使用 jQuery？
@KillerDesigner 这个问题三年前就已经解决了。谢谢。

【解决方案2】：

@Michael_B 提供的link 中指出的 flex-box 无法实现您想要做的事情

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

.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;
 }

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

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

【讨论】：