弹性布局
设置弹性布局
display:flex
设置弹性布局主轴的方向 :
flex-direction : row | row-reverse | column | column-reverse
row 横着放 起点左边
row-reverse 横着放 起点右边
column 竖着放 起点在上边
column-reverse 竖着放 起点在下边
设置主轴对齐方式
justify-content: flex-start | flex-end | center| space-around | space-between | space-evenly
flex-start :默认轴起点对齐
flex-end : 轴终点对齐
center : 居中
space-around: 每个元素间隔相等
space-between: 两端对齐 中间隔相等
space-evenly: 两边中间都相等
交叉轴对齐
align-items :flex-start flex-end center baseline
flex-start:起点对齐 flex-end:终点对齐 center:居中 baseline:文本下准线对齐