html - 是否可以使用仅 CSS 的容器包装器？

Question

我的目标是创建一个内容包装器，其中每个元素的高度/宽度都相等。仅此一项就足够简单并在下面进行了演示，但我希望元素(DIV)在收缩到 min-width 以下时换行，这样它在移动显示器上看起来不会被压缩。

我想 jQuery 可以处理这个，但为了简单和大小，我想看看是否有一个纯 css 的解决方案。

#wrapper {
    display: table;
    table-layout: fixed;
    
    width:90%;
    height:100px;
    background-color:Gray;
}
#wrapper div {
    display: table-cell;
    height:100px;
    min-width:200px;
}

#one {
    background-color:green
}
#two {
    background-color:blue
}
#three {
    background-color:red
}

<div id="wrapper">
    <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
    <div id="two">two two two two two two</div>
    <div id="three">three</div>
</div>

关于实现的一些细节:

这是一个图标网格类型的着陆页，显示的元素数量和页面尺寸都是动态的。由于元素包装而导致的垂直滚动很好，但我不希望有任何水平滚动。

Answer 1

你可以用 Flexbox 和 flex-wrap: wrap 来做到这一点，这里是 Fiddle

#wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  height: 100px;
  background-color: Gray;
}
#wrapper div {
  flex: 1;
  height: 100px;
  min-width: 200px;
}
#one {
  background-color: green
}
#two {
  background-color: blue
}
#three {
  background-color: red
}

<div id="wrapper">
  <div id="one">one one one one one one one one one one one one one one one one one one one one one</div>
  <div id="two">two two two two two two</div>
  <div id="three">three</div>
</div>