Flex容器

1. display

.container{        display:flex | inline-flex;    } flex:使用块级元素； inline-flex:行内元素复制代码

需要注意的是：当时设置flex布局之后，子元素的float，clear，vertical-align的属性将会失去效果 有六种属性可以设置在容器上

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

1. 默认值row ,主轴为水平方向，起点在左端
2. row-reverse,主轴为水平方向，起点在左端
3. column:主轴为垂直方向，起点在上沿
4. column-reverse:主轴为垂直方向，起点在下沿

flex-warp:决定容器内项目是否换行

1. 默认值nowrap：nowrap 不换行，即当主轴尺寸固定时，当空间不足时，项目尺寸会随之调整而并不会挤到下一行。
2. warp:：项目主轴总尺寸超出容器时换行，第一行在上方
3. wrap-reverse:换行，在第一行下方

flex-flow:flex-direction 和 flex-wrap的简写形式

flex-flow:
    
      || 
     
      复制代码
     
    

justify-content

1. 默认值flex-start左对齐
2. flex-end右对齐
3. center
4. justify-content:space-between:两端对齐，项目之间的间隔相等，即剩余空间等分成间隔

align-itens:定义了项目在交叉轴上的对齐方式

.container{    align-item:flex-start | flex-end | center | baseline | stretch;}复制代码

###Flex项目属性 有六种属性可运用在item项目上

1. order
2. flex-basis
3. flex-grow
4. flex-shrink
5. flex
6. align-self
7. order:定义项目在容器中的顺序，数值越小，排列越靠前，默认值为0 ###align-self: 允许单个项目有与其他项目不一样的对齐方式