flex属性

一、定义

采用flex布局的元素，称为flex容器，里面的子元素为item。

二、语法

（1）块级元素： display：flex

（2）行内元素： display:inline-flex

    设为flex布局以后，flex item的float、clear、vertical-align属性将失效

三、flex容器的属性

容器属性	说明
flex-direction	决定主轴的方向（项目的排列方向）
flex-wrap	定义是否换行
flex-flow	direction和wrap的复合属性，默认值为row和nowrap
Justify-content	定义项目在主轴上的对齐方式
Align-items	定义项目在交叉轴的对齐方式
Align-content	定义多根轴线的对齐方式，若项目只有一根轴线，该属性无效

1、flex-direction

Flex-direction:row	项目水平排列,顺序为从左到右
Flex-direction:row-reverse	项目水平排列,顺序为从右到左
Flex-direction:column	项目垂直排列,顺序为从上到下
Flex-direction:column-reverse	项目垂直排列,顺序为从下到上

2、flex-wrap

nowrap（默认值）	不换行。如果盒子宽度容纳不下，将等比例缩小盒子大小
wrap	换行，顺序不改变，第一行仍在上方
wrap-reverse	换行，顺序改变,第一行和第二行调转

3、flex-flow

是direction和wrap的简写，为复合属性。默认值分别为row 和 nowrap

只写一个值，代表另一个值默认。

4、justify-content（主轴对齐方式）

属性值	说明
flex-strat(默认值)	左对齐
flex-end	右对齐
center	居中
space-between	项目两端对齐，各项目之间间隔相等
space-around	各项目之间间隔相等，且是一左一右盒子与边框距离的两倍，盒子与边框的距离也相等
space-evenly	表示item之间左右的间距以及项目和边框之间的距离都相等

5、align-items（交叉轴对齐方式）

属性值	说明
flex-strat(默认值)	顶部对齐
flex-end	底部对齐
center	居中
base-line	以项目的第一行文字基线对齐
Stretch (默认值)	若项目未设置高度或高度未auto，将占满整个容器的高度