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

Question

是否可以 没有JS或媒体查询 （我知道），有一组项目只能在1列或只有1行，＆＃ 34;响应＆＃34 ;?因此，如果一行中没有足够的空间供所有孩子使用，则会将它们切换为1列。

我的想法是这是不可能的，但是想把它放到更广泛的观众中:)我已经尝试摆弄css列，flexbox和旧的忠实用户显示：inline-block和float。我没有看看css网格布局是否可以实现这一目标。

所以这个

item1  item2  item3

或者

item1
item2
item3

但从来没有这个

item1 item2
item3

Answer 1

你可以整天使用flexbox，但这是不可能的。可能你只能为3个元素找出一些东西，但绝对没有任何数量元素的通用解决方案。

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