使用 CSS flexbox 获得此布局？ [复制]

【问题标题】：Get this layout with CSS flexbox? [duplicate]使用 CSS flexbox 获得此布局？ [复制]
【发布时间】：2020-12-28 04:42:01
【问题描述】：

灰色是容器，子元素是红色。

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

编辑：我可能会添加不同宽度的相同元素，第一个是移动尺寸显示，另一个是中等到全尺寸。

【问题讨论】：

用 Grid 可以吗？
不，抱歉，因为兼容性问题我不能使用 CSS 网格

标签： html css layout flexbox

【解决方案1】：

给你：

body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.container {
  padding: 60px;
  width: 100%;
  height: 300px;
  background: grey;
  display: flex;
  flex-flow: column wrap;
  gap: 20px;
  min-height: 100vh;
}

.child {
  background: red;
  flex-grow: 1;
}

.child:nth-child(2) {
  height: 100%;
  order: -1;
}

@media only screen and (max-width: 600px) {
  .container {
    flex-flow: column;
  }

  .child:nth-child(2) {
    height: auto;
    order: initial;
  }
}

<div class="container">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

【讨论】：

我希望你也包括媒体查询。
丹你真的是男人。