felx弹性布局

弹性布局

给父级元素添加 display:flex; 定义该元素为弹性布局（弹性盒子）

弹性盒子中的子元素自动换行（多行）flex-wrap 取值：wrap 或 wrap-reverse

设置布局排列方式（主轴方向） flex-direction

注意：默认主轴是X轴，侧轴是Y轴；当设置Y轴为主轴时，X轴则是侧轴。

主轴对齐方式 justify-content

单行时，侧轴对齐方式 align-items

多行时，侧轴对齐方式 align-content

某个单独子元素，侧轴对齐方式 align-self

flex (给子元素设置）

控制盒子的排列顺序，order:0（默认值），数字小的盒子排序在前 flex-wrap:warp和flex-direction:row两种属性的简写方式：flex-flow:row warp（flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性） 弹性盒子中，子元素仍然可以设置内外边距，以达到子元素定位的要求