flex弹性盒模型

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

弹性盒模型主要就分为 “伸缩容器”和“伸缩项目” 。伸缩容器我们可以简单的理解为弹性盒模型父元素，伸缩项目就是弹性盒模型的子元素。

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

    
1
2
3
4

伸缩容器(flex container)

div{
    display : flex | inline-flex;
    flex-direction : row | row-reverse | column | column-reverse;
    flex-wrap : nowrap | wrap | wrap-reverse; 
    /* flex-flow : flex-direction, flex-wrap;*/
    justify-content : flex-start | flex-end | center | space-between | space-around;
    align-items : flex-start | flex-end | center | baseline | stretch;
    align-content : flex-start | flex-end | center | space-between | space-around | stretch;
}

1. flex-direction

决定主轴方向（项目的排列方向）：

row : 水平方向 从左往右
row-reverse : 水平方向 从右往左
column : 竖直方向 从上往下
column-reverse : 竖直方向 从下往上

2. flex-wrap

是否换行

nowrap : 不换行
wrap : 换行 交叉轴方向从上往下 如果主轴是竖直方向,那么就是从左往右
wrap-reverse : 交叉轴方向从下往上 如果主轴是竖直方向,那么就是从右往左

3. flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式。

4. justify-content

项目在主轴上的对齐方式

flex-start : 主轴起点对齐
flex-end : 主轴终点对齐
center : 主轴中点对齐
space-between : 两端对齐，项目之间的间隔都相等
space-around : 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items

项目在交叉轴上如何对齐

stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度
flex-start : 交叉轴的起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
baseline : 项目的第一行文字的基线对齐

6. align-items

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

stretch : 项目实际高度会撑满整个交叉轴的长度
flex-start : 交叉轴起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
space-between : 与交叉轴两端对齐，轴线之间的间隔平均分布
space-around : 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

伸缩项目(flex item)

p{
    order : 0;
    flex-grow : 0;
    flex-shrink : 1;
    flex-basis :  auto;
    /* flex : flex: none ; */
    align-self : auto | flex-start | flex-end | center | baseline | stretch;
}

1. order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2. flex-grow

如何分配父元素多余部分,数值越大的分的越多，默认为0（不分配）

3. flex-shrink

父元素宽度不够的时候,项目是否收缩，数值越大的收缩的越多，默认为1。

4. flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5. flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6. align-self

单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

auto : 继承父元素的align-items属性
stretch : 项目实际高度会撑满整个交叉轴的长度
flex-start : 交叉轴起点对齐
flex-end : 交叉轴终点对齐
center : 交叉轴中点对齐
baseline : 项目的第一行文字的基线对齐

参考：阮一峰的网络日志