flex布局2

任意一个容器都可以设置为flex-box

.box {
        display:flex;
}

行级元素也可以设置为flex-box;

.box {
      display :inline-flex;
 }

注意当给盒子设置成flex后，它的vertical-align,float,clear都将失效

flex-flow属性

这是flex-direction 属性 和flex-wrap 属性的缩写形式，默认值为 row nowrap;

align-items属性

1.  stretch : (默认值) 轴线占满整个交叉轴
2.  flex-start:  与交叉轴的起点对齐
3.  flex-end:  与交叉轴的终点对齐
4.  center:  与交叉轴的中点对齐
5.  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
6.  space-around:  每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-items

项目属性

1.order属性

它定义了项目的排列顺序(默认值为0)；如果想把一个项目放置最前，只需要把该项目order属性设置为负数

.item {
        order: number;
  }

2.flex-grow属性

属性定义项目的放大比例（默认值为0）；即使存在剩余空间，也不会放大。

.item {
        flex-grow: number;
    }

3.flex-shrink属性

属性定义了项目的缩小比例（默认值为1）；即空间不足，项目会被缩小。

.item {
      flex-shrink: number;
    }

4.flex-basis

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

5.flex

flex属性是flex-grow flex-shrink flex-basis 的缩写 默认值为 0 1 auto;

6.align-content

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

.item{
        align-content: flex-start | flex-end | center | baseline | auto | stretch;
}

align-content