flex-direction - 项目的排列方向

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

在 flex 容器上,可以使用一个 flex-direction 属性来控制它里面的项目的排列方式 .. 这个属性设置的是容器的 main axis ,也就是主轴的方向 .. 有两个主要的方向,一个是 row ,水平方向 .. 还有一个是 column,垂直的方向 ..

在这个 container 里面,再用一个 flex-direction .. 它的值先设置成 row .. row 就是行 .. 也就是水平方向 .. row 是 flex-direction 的默认的值 .. flex 项目会水平从左向右排列 .. 我们可以让它们倒过来排列 .. 方向仍然是 row .. 不过在它后面加上一个 reverse .. 表示倒置 ..

现在项目会在容器主轴的右边,向它的左边排列 ..

下面再试一下 column 这个方向 .. 把这个 reverse-row 换成 column .. 现在项目会垂直堆叠在一起,从上往下排列 .. 同样这个方向也可以倒过来 .. column-reverse ..

flex-direction - 项目的排列方向《 CSS:Flexbox 布局 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点