弹性布局 flex

59 阅读1分钟

弹性布局

设置弹性布局

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:文本下准线对齐