flex是一种布局方式,它的主要目的是通过父盒子控制子盒子的排列方式。
主轴排列方式
默认的水平,但是可以转换。
-
如果给父盒子添加 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-wrap: wrap;
设置主轴方向
flex-direction: column;
让我们的主轴设置为垂直。 默认的是 row 水平的。