布局
表格布局–浮动布局–定位布局–多列布局
dispiay:table-call; 表格单元格
弹性布局
flex 弹性伸缩盒布局
可以实现自动伸缩
主轴和侧轴
dispiay:flex;
<!-- 默认:主轴X轴 起始线在左边 -->
flex-direction:row-reverse;
<!-- row 主轴X轴 colum 主轴Y轴 -->
<!-- reverse 根据主轴改变相反起始线 -->
flex-wrap:wrap;
<!-- nowrap 默认不换行 wrap 换行 -->
flex-flow:row-reverse norap;
<!-- 上面两种的综合 -->
justify-content: space-between;
<!-- 设置子元素在主轴排列 -->
<!-- space-around 两端对齐-->
<!-- space-between 平均左右外边距 -->
<!-- space-evenly 平均剩余空间 -->
align-items:center;
<!-- 设置子元素在侧轴排列 cener 侧轴居中-->
align-self:flex-end;
<!-- 单独设设置子元素 -->