柔性盒子:Flex

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

在使用 CSS 的 Flexbox,也就是柔性盒子布局,可以先设置一下柔性盒子容器。比如这个白色的大盒子里面装了三个小盒子。要使用 flexbox 布局这三个小盒子,可以先在这个白色大盒子上面,添加 tailwind 提供的 flex 这个类。

这个类就是把元素的 display 属性设置成了 flex。你会发现,现在它里面的这三个小盒子的布局会发生一些变化。

默认的 flex 方向是 row,在这个 flex 容器上面可以再添加一个 flex-row ,这个类就是把 flex-direction 设置成了 row。

使用 flexbox 要知道两个轴,一个是 main axis,也就是主轴,还有一个是 cross axis,交叉轴。这个主轴与交叉轴会根据这个 flex-direction 的值变化。如果把 flex-direction 设置成 row,那主轴就是水平方向的,交叉轴是垂直方向。如果 flex-direction 是 column,主轴就变成了垂直方向的,交叉轴就是水平方向的。

要把 flex 方向设置成 column,可以添加一个 flex-col, 这个类就是把 flex-direction 设置成了 column。

柔性盒子:Flex《 Tailwind 样式框架:柔性盒子 》

统计

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

社会化网络

关于

微信订阅号

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