没有 JS 或媒体查询的智能 1 列或 1 行元素？

Question

有没有可能，没有 JS 或媒体查询（我知道），一组项目要么只有 1列或只有 1 行，"responsively"？因此，如果一行中所有子项的数量不足 space，它会将它们切换为 1 列。

我的想法是这是不可能的，但我想把它展示给更广泛的受众:)我尝试摆弄 css 列、flexbox 和旧的忠实显示：inline-block 和 float .我没看 css 网格布局是否可以做到这一点。

所以这个

item1  item2  item3

或这个

item1
item2
item3

但从来没有这个

item1 item2
item3

Answer 1

你可以 fiddle 一整天都在使用 flexbox，但这是不可能的。或许您可以仅针对 3 个元素找出解决方案，但绝对没有针对任意数量元素的通用解决方案。

主要原因是我们没有 CSS 选择器来确定项目是否适合其 parent/viewport 或者父项是否可以在一行中包含其所有子项。浏览器不知道 何时 更改样式，并且没有样式 属性 可以自行生成两种布局（至少据我所知）。您必须使用 JS 或媒体查询来检查这些条件并相应地更改应用的样式。