flex弹性布局

1. flex布局原理

为父盒子设置flex布局后，来控制子盒子的位置和排列方式，且子元素的float（浮动）、clear（清除浮动） 和 vertical-align（元素对齐方式） 属性都将失效。此时容器中的直系子元素就会变为flex 元素。所有CSS属性都会有一个初始值，所以 flex 容器中的所有 flex 元素都会有下列行为：

元素排列为一行 (flex-direction属性的初始值是row)。

元素从主轴的起始线开始。

元素不会在主维度方向拉伸，但是可以缩小。

元素被拉伸来填充交叉轴大小。

flex-basis属性为auto。

flex-wrap属性为nowrap。

vertical-align属性运用（只对行内和行内块元素有效）：

baseline：基线对齐

top：顶端对齐

middle：中部对齐

bottom：底线对齐

2.父项常见属性（display：flex）

主轴：

主轴方向：flex-direction

row(默认）从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

主轴上子元素排列方式：justify-content

flex-start 从头开始排列

flex-end 从尾开始排列

center 居中对齐

space-around 平分剩余空间

space-between 先两边贴边，再平分剩余空间

子元素是否换行：flex-wrap

nowrap （默认）不换行

wrap 换行

wrap-reverse：换行，第一行在下方。

侧轴：

设置侧轴上的排列方式（多行）：align-content

flex-start 从头开始排列

flex-end 从尾开始排列

center 居中对齐

stretch 平分父元素高度

space-around 平分剩余空间

space-between 先两边贴边，再平分剩余空间

侧轴单行排列：align-items

flex-start 从上到下

flex-end 从下到上

center 垂直居中

stretch 拉伸（默认）

复合属性主轴方向+换行：flex-flow

eg:flex-flow:row wrap;

3.flex布局子项常见属性

平分份数：flex：1；

控制子项自己在侧轴上的排列方式：align-self

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。（单独设置）

定义项目的排列顺序 ：order

数值越小，排列越靠前，默认为0。