Flex布局

初步了解：

Flex的全称为“Flexible Box”，意为“弹性布局”用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

行内元素也可以使用flex如图：

样式如图下：

当设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

基本概念：

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

属性：

flex-direction :设置主轴的方向

row（默认值）：设置主轴为水平方向，起点在左端。
row-reverse：设置主轴为水平方向，起点在右端。
column：设置主轴为垂直方向，起点在上沿。
column-reverse：设置主轴为垂直方向，起点在下沿

justify-content :设置主轴上的子元素排列方式

flex-start(默认值):与main start对齐

flex-end：与main end对齐

center：居中

space-between：flex items 之间的距离相等，与main start、main end两端对齐

space-evenly: flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离

space-around :flex items 之间的距离相等,flex items与main start 、main end 之间的距离等于flex items之间的距离的一半

flex-wrap :设置子元素是否换行

         nowrap(默认)：单行

         wrap：多行

align-content :设置侧轴上的子元素的排列方式(多行)

stretch(默认值)：与align-items的stretch类似，当items有高度的时候，无效果

flex-start:与cross start 对齐

flex-end :与cross end 对齐

center：居中对齐

space-between:flex items 之间的距离相等，与cross start、cross end两端对齐

space-evently: flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离

space-around :flex items 之间的距离相等,flex items与cross start 、cross end 之间的距离等于flex items之间的距离的一半

align-items :  设置侧轴上的子元素排列方式(单行)

normal：在弹性布局中，效果和stretch一样

stretch：前提是items不设置高度，当flex items 在cross axis 方向的size为auto时，会自动拉伸至填充flex container

flex-satrt:与cross start 对齐

flex-end:与cross end 对齐

center:居中对齐

baseline:与基准线对齐

flex-flow :复合属性.相当于同时设置了flex-direction 和flex wrap

lex-direction :设置主轴的方向

justify-content :设置主轴上的子元素排列方式

flex-wrap :设置子元素是否换行

align-content :设置侧轴上的子元素的排列方式(多行)

align-items :设置侧轴上的子元素排列方式(单行)

flex-flow :复合属性,相当于同时设置了flex -direction和flex wrap