用户登录

这个白色背景的盒子,是一个 flex 容器,因为在它上面用了 flex 这个类,flex-row 这个类会把 flex 方向设置成 row。这样水平方向是主轴,垂直方向的是交叉轴。

这个 flex 容器里直接包装的东西是 flex 项目,我们可以设置这些项目的对齐方式。比如想让它们在交叉轴统一居中,可以在 flex 容器上添加 items-center。现在这几个项目会垂直居中在它的包装容器里。这个 items-center 就是把元素的 align-items 这个属性设置成了 center。

要把项目放在交叉轴的终点,可以用一个 items-end。这个类会把 align-items 设置成 flex-end。这样项目就会在交叉轴的底部对齐。

flex 项目自己也可以设置交叉轴的对齐方式,比如在这个 1 号盒子上面,添加一个 self-start,这个类会把 align-self 这个属性的值设置成 flex-start,意思就是在交叉轴的起点对齐。

在 2 号盒子上面,用 self-center,它会把 align-self 设置成 center,这样这个项目会在交叉轴中心点这个位置上。

现在 flex 方向是 row,我们可以把 flex 方向设置成 column,把这个 flex-row 换成 flex-col,这个类会把 flex-direction 设置成 column。

改变成了 flex 方向以后, flex 项目的在交叉轴的对齐也会发生变化。因为 flex 方向如果是 column, 主轴是垂直方向,交叉轴就会是水平方向。

这样 1 号盒子会在左边,2 号盒子在中间,3 号盒子造右边显示,也就是交叉轴的终点这个位置。

对齐项目(交叉轴)《 Tailwind 样式框架:柔性盒子 》

统计

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

社会化网络

关于

微信订阅号

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