flex布局

- CSS3（Flexible Box 或 Flexbox）弹性盒子,是一种当页面需要适应不同屏幕大小以及设备    类型时，确保元素拥有恰当的行为的布局方式。  
- 引入弹性盒子布局模式的目的是提供一种更加有效的方式对一个容器中的子元素进行排           列，  对齐，和分配空白空间。 

容器 

## flex布局

1.如何使用flex布局？
 - display:flex
 - display:inline-flex;行内元素使用flex布局
 ** 子元素中的float,clear,vertical-align将失效。 **

1.1.采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
1.2.容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
1.3.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

2.容器的属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

- flex-direction //定义主轴的方向（项目排列的方向）
    row（默认值）：//主轴为水平方向，起点在左端。
    row-reverse：//主轴为水平方向，起点在右端。
    column：//主轴为垂直方向，起点在上沿。
    column-reverse：//主轴为垂直方向，起点在下沿。
- flex-wrap //默认情况下项目都排在轴线上，flex-wrap定义当一条轴线排不下时如何换行
    nowrap（默认）：//不换行
    wrap：//换行，第一行在上方
    wrap-reverse：//换行，第一行在下方
- flex-flow //flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content //定义项目在主轴上的对齐方式
    flex-start（默认值）：//左对齐
    flex-end：//右对齐
    center： //居中
    space-between：//两端对齐，项目之间的间隔都相等。
    space-around：//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
- align-items //定义项目在交叉轴上的对齐方式
    flex-start：//交叉轴的起点对齐。
    flex-end：//交叉轴的终点对齐。
    center：//交叉轴的中点对齐。
    baseline: //项目的第一行文字的基线对齐。
    stretch（默认值）：//如果项目未设置高度或设为auto，将占满整个容器的高度。  
- align-content //定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    flex-start：//与交叉轴的起点对齐。
    flex-end：//与交叉轴的终点对齐。
    center：//与交叉轴的中点对齐。
    space-between：//与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：//轴线占满整个交叉轴。

3.项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self

项目 

容器的属性
flex-direction  //定义主轴的方向（项目排列的方向）
flex-wrap    //默认情况下项目都排在轴线上，flex-wrap定义当一条轴线排不下时如何换行
flex-flow    //flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content  //定义项目在主轴上的对齐方式
align-items      //定义项目在交叉轴上的对齐方式
align-content    //定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

- flex-direction //定义主轴的方向（项目排列的方向）
    row（默认值）：//主轴为水平方向，起点在左端。
    row-reverse：//主轴为水平方向，起点在右端。
    column：//主轴为垂直方向，起点在上沿。
    column-reverse：//主轴为垂直方向，起点在下沿。
    
    
- flex-wrap //默认情况下项目都排在轴线上，flex-wrap定义当一条轴线排不下时如何换行
    nowrap（默认）：//不换行
    wrap：//换行，第一行在上方
    wrap-reverse：//换行，第一行在下方
    
    
- flex-flow //flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content //定义项目在主轴上的对齐方式
    flex-start（默认值）：//左对齐
    flex-end：//右对齐
    center： //居中
    space-between：//两端对齐，项目之间的间隔都相等。
    space-around：//每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。


- align-items //定义项目在交叉轴上的对齐方式
    flex-start：//交叉轴的起点对齐。
    flex-end：//交叉轴的终点对齐。
    center：//交叉轴的中点对齐。
    baseline: //项目的第一行文字的基线对齐。
    stretch（默认值）：//如果项目未设置高度或设为auto，将占满整个容器的高度。  
    
    
- align-content //定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
    flex-start：//与交叉轴的起点对齐。
    flex-end：//与交叉轴的终点对齐。
    center：//与交叉轴的中点对齐。
    space-between：//与交叉轴两端对齐，轴线之间的间隔平均分布。
    space-around：//每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
    stretch（默认值）：//轴线占满整个交叉轴。

项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self

- order //排序 定义项目的排列顺序，数值越小，排列越靠前，默认值为0 可以是负值
- flex-grow //扩大 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大  不可以为负值
- flex-shrink //缩小 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 负值无效  0为不缩小  大于1的值为缩小的倍数
- flex-basis //定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
- flex //flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

- align-self //允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    flex-start：//交叉轴的起点对齐。
    flex-end：//交叉轴的终点对齐。
    center：//交叉轴的中点对齐。
    baseline: //项目的第一行文字的基线对齐。
    stretch（默认值）：//如果项目未设置高度或设为auto，将占满整个容器的高度。