css - Flexbox CSS - 如何以更简单的方式实现网格布局？

Question

目前只能使用嵌套的 display: flex 容器来做到这一点。 有没有一种方法可以用一个 flex 容器实现这种布局，并且当屏幕调整大小时，将元素堆叠在一列中而不是“仅仅”缩小它们？

.container {
  width: 100%;
  display: flex;
  flex-flow: column wrap;
}

.row {
  display: flex;
  flex-wrap: wrap;
  flex: 1 100%;
  max-height: 100px;
}

.row>* {
  border: dashed 1px red;
  margin: 10px;
}

.bc,
.act {
  flex: 1 auto;
}

.summary {
  flex: 3 auto;
}

.short {
  flex: 1 0;
}

.widget {
  border: dashed 1px red;
  margin: 10px;
  max-height: 100px;
  flex: 3 100%;
}

<div class="container">
  <div class="row">
    <div class="bc">50%</div>
    <div class="act">50%</div>
  </div>
  <div class="row">
    <div class="summary">75%</div>
    <div class="short">25%</div>
  </div>
  <div class="widget">100%</div>
  <div class="widget">100%</div>
</div>

Answer 1

通过使用 flex wrap 并将方向更改为行和合适的宽度，您可以使用一个容器。要使它们在较小的屏幕尺寸上成为一列，只需添加一个使 div 全部为 100% 宽度的媒体查询

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.container>div {
  border: 1px dashed red;
  margin:10px;
}
.quarter {
  width:calc(25% - 20px);
}
.half {
  width:calc(50% - 20px);
}
.three-quarters {
  width:calc(75% - 20px);
}
.full {
  width:calc(100% - 20px)
}

<div class="container">
  <div class="half">50%</div>
  <div class="half">50%</div>
  <div class="three-quarters">75%</div>
  <div class="quarter">25%</div>
  <div class="full">100%</div>
  <div class="full">100%</div>
</div>