特性: 给父亲添加了 display: flex;
所有的子盒子(弹性盒子)都会在一行显示,不会自动换行。
弹性盒子换行显示 : flex-wrap:
语法:
flex-wrap: wrap;
设置侧轴对齐
注意
-
此处设置侧轴多行的垂直对齐方式。
align-content
(少) -
和前面学过的
align-items
(侧轴单行垂直对齐) (多) -
align 垂直 比如 align-items 垂直对齐 align-content 多行垂直对齐
-
content 主轴 justify-content align-content 侧轴多行对齐
align-content:center;
属性 | 作用 |
flex-start | 默认值,起点开始依次排列 |
fles-end | 终点开始依次排列 |
center | 沿主轴居中排列 |
space-arount | 弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子两侧 |
space-between | 弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子之间 |
flex 总结梳理
flex 他是一种布局方式。主要目的是通过父盒子控制子盒子如何排列,一定是亲爸爸和亲儿子
主轴排列方式
默认水平,但是可以转换
1、如果给父盒子添加 display: flex
2、justify-content: center;
3、justify-content: space-between; 左右两侧无缝隙
4、justify-content: space-around; 两倍关系
5、justify-content: space-evenly; 缝隙均等