使用了
display: flex
的元素,其子元素,无论块级元素还是行内元素,均变为行内块元素
1. flex-direction
修改元素的排列方向
1.1 row
横向排列,从左侧开始排列
1.2 row-reverse
横向排列,从右侧开始排列
1.3 column
纵向排列,从顶部开始排列
1.4 column-reverse
纵向排列,从底部开始排列
2. flex-wrap
当一行元素不能容下时,是否换行
2.1 nowrap
超出不换行,压缩子元素的大小
2.2 wrap
超出的元素换行
3 justify-content
在主轴方向水平对齐
3.1 flex-start
左对齐
3.2 flex-end
右对齐
3.3 center
居中
3.4 space-around
均分空间
3.5 space-between
两端对齐
4. align-items
副轴方向对齐
4.1 stretch
默认状态,因此若未指定大小的元素,初始时副轴方向会拉伸
4.2 flex-start
上对齐,不会在副轴方向拉伸
4.3 flex-end
下对齐
4.4 center
居中
5. align-content
类似于justify-content,只针对于多行元素在副轴上有效