css - 如何 Flexbox 3 个 child ，一左二右

Question

有什么方法可以让我在三个 child 的 flexbox 中完成以下示例吗？

我目前使用以下代码:

# Slim
.container
  .children
  .children
  .children

# SASS
.container
   display: flex
   flex-wrap: wrap
   align-items: center

  .children
    flex-basis: 50%

有什么办法可以得到想要的结果吗？

Answer 1

如果你想使用那个 HTML 结构，你可以在父元素上设置固定高度并使用 flex-direction: column 和 flex-wrap: wrap。因此，如果您将第一个元素设置为 100% 的高度，则其他两个元素在右侧中断。

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.children {
  width: calc(50% - 10px);
  margin: 5px;
  background: #D8D8D8;
  flex: 1;
}
.children:first-child {
  flex: 0 0 calc(100% - 10px);
  border: 2px solid #44C0FF;
}

<div class="container">
  <div class="children"></div>
  <div class="children"></div>
  <div class="children"></div>
</div>