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

通过使用弹性包装并将方向更改为行和合适的宽度，您可以使用一个容器。要使它们在屏幕尺寸较小的列中显示，只需添加一个媒体查询，使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>

Answer 2

您可以像这样使用行方向和媒体查询：

.container {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}

.container>* {
  border: dashed 1px red;
  margin: 10px;
  box-sizing: border-box;
}

.bc,
.act {
  flex-basis: calc(50% - 20px);
}

.summary {
  flex: 3 auto;
}

.short {
  flex: 1 auto;
}

.widget {
  max-height: 100px;
  flex-basis: 100%;
}

@media all and (max-width:600px) {
  .container>* {
    flex-basis: 100%;
  }
}

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

Answer 3

作为Flexbox的替代方法，请考虑使用CSS-Grid

添加媒体查询以使所有类span 4都具有合适的宽度...

.container {
  display: grid;
  grid-column-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
}

.container div {
  border: dashed 1px red;
  margin: 10px;
}

.half {
  grid-column: span 2
}

.quarter-3 {
  grid-column: span 3
}

.full {
  grid-column: span 4
}

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

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

3 个答案: