因此,要使用行布局将元素包装在 Flex div 中,我所要做的就是:
div {
display: flex;
flex-direction: row; /* I want to change this to column */
flex-wrap: wrap; /* wrap doesn't seem to work on column, only row */
}
<div>
<p>these</p>
<p>will</p>
<p>wrap</p>
</div>
这适用于我的行,但我想让它也适用于我的列。
我尝试改变flex-direction
to column
,但它似乎不起作用。有谁知道如何获得此功能?
默认情况下,块级元素占据其包含块的整个宽度。这实际上解决了width: 100%
,它在水平方向上的内容流中设置了中断。
因此,弹性项目可以默认换行在行方向容器中。
然而,HTML 或 CSS 中没有任何内容设置块级元素的默认高度。高度是内容驱动的(height: auto
).
这意味着元素将垂直流动而不会出现任何破裂的情况。
(我猜想,在进化过程中的某个地方,可能是基于可用性研究,人们决定 Web 应用程序可以垂直扩展,但不能水平扩展。)
这就是为什么 Flexbox 不会自动按列方向换行项目。它需要作者定义的高度作为断点。
然而,很多时候,布局的高度是动态的,因此无法设置特定的高度。这使得 Flexbox 无法用于按列方向包装项目。 CSS 是一个很好的选择网格布局 https://www.w3.org/TR/css3-grid-layout/,不需要容器的高度设置:
div {
display: grid;
grid-gap: 10px;
}
p:nth-child(3n + 1) {
grid-row: 1;
background-color: aqua;
}
p:nth-child(3n + 2) {
grid-row: 2;
background-color: orange;
}
p:nth-child(3n + 3) {
grid-row: 3;
background-color: lightgreen;
}
p {
margin: 0;
padding: 10px;
}
<div>
<p>ONE</p>
<p>TWO</p>
<p>THREE</p>
<p>FOUR</p>
<p>FIVE</p>
<p>SIX</p>
<p>SEVEN</p>
<p>EIGHT</p>
<p>NINE</p>
</div>
CSS 网格的浏览器支持
- Chrome - 自 2017 年 3 月 8 日起全面支持(版本 57)
- Firefox - 自 2017 年 3 月 6 日起全面支持(版本 52)
- Safari - 自 2017 年 3 月 26 日起全面支持(版本 10.1)
- Edge - 自 2017 年 10 月 16 日起全面支持(版本 16)
- IE11 - 不支持当前规范;支持过时版本
这是完整的图片:http://caniuse.com/#search=grid http://caniuse.com/#search=grid
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)