本文深入探讨了CSS Flex布局中的主轴方向修改，通过`flex-direction`属性实现从行到列的转换。此外，还介绍了主轴上的对齐方式，如`justify-content`的几种模式：居中、两端对齐和均匀分布。侧轴对齐方式，如`align-items`和`align-content`也在多行布局中进行了讲解。掌握这些技巧能有效提高布局效率，避免使用浮动布局。
继续昨天的博客,今天讲一下浮动的所有用法
设置主轴方向
主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction
| 属性值 | 作用 |
|---|---|
row | 行, 水平(默认值) |
column | *列, 垂直 |
| row-reverse | 行, 从右向左 |
| column-reverse | 列, 从下向上 |
语法：
flex-direction：column;
修改完毕，主轴是Y轴， 侧轴是X轴。
主轴和侧轴可以完美替换,用法也不一样,当两个盒子在一起的时候,需要他们上下排列并且水平垂直居中,这个时候就需要更换主轴了
主轴排列方式
默认的水平，但是可以转换。
-
如果给父盒子添加 display: flex
-
justify-content: center;
-
justify-content: space-between; 左右两侧无缝隙
-
justify-content: space-around; 两倍关系
-
justify-content: space-evenly; 缝隙均等
侧轴对齐方式-单行对齐
-
默认的对齐方式 flex-start
-
align-items: center; (重点)
侧轴对齐方式-多行
-
align-content: space-between;
-
align-content: space-around;
-
align-content: space-evenly;
-
align-content: center;
学会了flex布局后,可以省很多时间,不去使用浮动,今天就这么多了哦,我下篇会把我今天写的案例发出来给大家看看
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
