如何创建灵活的自适应 table 式布局？

Question

不知道这个问题是否简单，但我一直坚持下去：是否有可能创建一个灵活的自适应 table 类布局，它根据 window 宽度?

插图：（green border 表示initial size of a block（块内容的大小），black border表示calculated/rendered一个块的大小)

目标是创建一个布局，其中：

块像 table 一样对齐 - 它们之间有相同的 space，
一行的高度是该行高度最大的块的高度，
列数根据 window 宽度而变化，例如，如果宽度小于 300 像素，将有 1 列，2 列 - 500 像素，3 列 - 750 像素和 4 列 - >1000 像素

其实我已经用JS实现了，而且我的PC执行我写的脚本也不是很困难，所以我觉得脚本优化的很好，但无论如何我希望可以用纯CSS.

我可以展示我的解决方案（CSS+JS），但我认为它没有价值。

Answer 1

Flexbox 和媒体查询可以做到这一点：

* {
  box-sizing: border-box;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 80%;
  margin: auto;
  border: 1px solid red;
  padding: 1em;
}
.box {
  border: 1px solid grey;
  margin-bottom: 1em;
  flex: 1 0 100%;
  background: #c0ffee;
  padding: 0 1em;
}
@media screen and (min-width: 500px) {
  .box {
    flex: 0 0 48%;
    background: #bada55;
  }
}
@media screen and (min-width: 750px) {
  .box {
    flex: 0 0 30%;
    background: rebeccapurple;
  }
}
@media screen and (min-width: 1000px) {
  .box {
    flex: 0 0 24%;
    background: #b19d09;
  }
}

<div class="wrapper">
  <div class="box">
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, cum. Voluptate natus quaerat eaque incidunt, accusamus veniam facere, alias provident odio est rerum commodi?</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, dolore.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit.</p>
  </div>
  <div class="box">
    <p>lorem</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis odit possimus porro. Nihil, modi.</p>
  </div>
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, accusamus cupiditate esse quisquam, nisi hic dolores assumenda adipisci, illum ab itaque nemo placeat! Dolorum aliquam iure veritatis reprehenderit libero.</p>
  </div>
</div>

Codepen Demo

A Complete Guide to Flexbox@CSS-Tricks.com

如何创建灵活的自适应 table 式布局？

How to create a flexible adaptive table-like layout?

javascript

html

css

flexbox

css-tables