一.交叉轴上的对齐方式:align-items
1.交叉轴的起点对齐
ul{
display:flex;
justify-content:space-between;//主轴方向两端对齐
align-items:flex-start;//交叉轴起点对齐
}
2.交叉轴的终点对齐
可做柱状图
3.交叉轴的居中对齐
二.项目换行
- flex-wrap:wrap;
如果子元素总宽度大于父级元素宽度，那么就一行能放多少就放多少，放不下的就被挤到下一行。 - flex-wrap:wrap-reverse;第一行在最下面
第一行在最下面
三.多根轴线的对齐方式align-content
- 指定多行在交叉轴上的对齐方式
- align-content:flex-start与交叉轴的起点对齐
- align-content:space-between
- align-content:space-around
网友评论