使用 flexbox 的全角和多列答案

【问题标题】：Fullwidth and multiple columns using flexbox使用 flexbox 的全角和多列
【发布时间】：2016-12-06 01:11:34
【问题描述】：

我正在尝试在同一容器上创建一个具有全角和多列的 flexbox 行。

我尝试过flex-break: after;，但不确定我缺少什么。我试图避免有多个类，如 .fullwidth 和 .multiple-columns。

这就是我想要达到的目标：

------------------------
|                      |
|                      |
|       item A         |
|                      |
|                      |
------------------------
|          |           |
|          |           |
|     B    |      C    |
|          |           |
|          |           |
------------------------
|                      |
|                      |
|       item D         |
|                      |
|                      |
------------------------

.collage {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.fullwidth {
  flex-break: after;
}
.collage-item {
  width: 100%;
  height: 25vw;
  background: url("https://www.audi.co.uk/content/dam/audi/production/Models/NewModelsgallery/A5range/A5_Coupe/MY17/1920x1080_A5-Coupe-2016-side.jpg") no-repeat;
  background-size: cover;
}
.btn {
  position: absolute;
  border: 2px solid white;
  padding: 10px 18px;
  text-align: center;
  right: 8px;
  bottom: 8px;
  color: white;
  text-decoration: none;
}

<div class="collage">
  <!-- fullwidth -->
  <div class="collage-item fullwidth"></div>

  <!-- two columns -->
  <div class="collage-item"></div>
  <div class="collage-item"></div>

  <!-- fullwidth -->
  <div class="collage-item fullwidth"></div>
  <div class="btn">Button</div>
</div>

https://jsfiddle.net/brunodd/ja6820vu/1/

【问题讨论】：

标签： css flexbox

【解决方案1】：

您需要在弹性容器上设置flex-wrap: wrap，然后在全角项目上设置flex: 0 0 100%，在半角项目上设置flex: 0 0 50%。另外你应该添加box-sizing: border-box。

* {
  box-sizing: border-box;
}
.collage {
  display: flex;
  flex-wrap: wrap;
}
.collage-item {
  border: 1px solid black;
  flex: 0 0 50%;
  padding: 10px;
}
.fullwidth {
  flex: 0 0 100%;
}

<div class="collage">
  <!-- fullwidth -->
  <div class="collage-item fullwidth">a</div>

  <!-- two columns -->
  <div class="collage-item">b</div>
  <div class="collage-item">c</div>

  <!-- fullwidth -->
  <div class="collage-item fullwidth">d</div>
</div>

【讨论】：

好东西！我完全忘记了border-box 属性。