CSS flex布局

• 任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

• 行内元素也可以使用flex布局

.box{
  display: inline-flex;
}

• webkit内核的浏览器必须加上前缀-webkit

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

• ++设置flex布局之后，子元素的clear，float，vertical-align属性将失效++
• 

容器的六个属性

1.flex-direction

决定主轴的方向，即项目的排列方向

.box{
    flex-direction:row
}

值：

• row：从左到右，起点在左端
• row-reverse：从右到左，起点在右端
• column：从上到下，起点在上沿
• column-reverse：从下到上，起点在下沿

2.flex-wrap

默认情况下，项目都排在一条直线上（又称“轴线”）。flex-wrap定义如果一条轴线排不下，如何换行

.box{
    flex-wrap:nowrap|wrap|wrap-reverse
}

值：

• nowrap：不换行（默认，即使子元素的宽度或者高度大于父元素的宽度或者高度，也在一行显示）

• wrap：换行，第一行在上方

• wrap-reverse：换行，第一行在下方

3.flex-flow

flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap

.box{
    flex-flow:<flex-direction><flex-wrap>
}

4.justify-content

定义项目在主轴上的对齐方式

.box{
    justify-content:flex-start;
}

值：

• flex-start：（默认）左对齐
• flex-end：右对齐
• center：居中
• space-between：两端对齐，项目之间将各相等
• space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边框的间隔大一倍。

5.align-items

定义项目在交叉轴上的对齐方式

.box{
    align-items:flex-start;
}

值：

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴中点对齐
• baseline：项目的第一行文字基线对齐
• stretch：（默认值），若项目没有设置高度或设置为auto，将占满整个容器的高度

6.align-content

定义了多根轴线的对齐方式。若项目只有一根轴线，则不起作用

.box{
    align-content:flex-start
}

值:

• flex-start:起始端对齐

• flex-end：末尾段对齐

• space-between：等间距均匀分布，与交叉轴两端对齐，轴线之间的间隔平均分布。

• center：居中对齐
• space-around：等边距均匀分布，每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

• stretch：拉伸对齐

项目属性

1.order属性

定义排列顺序，数值越小越靠前，默认为0

.item{
    order:<integer>;
}

2.flex-grow

定义项目放大比例，默认为0，即如果存在剩余空间，也不放大

.item{
    flex-grow:<number>;
}

3.flex-shrink

定义缩小比例。默认为1，如果空间不足，项目将缩小。

4.flex-basis

设置基准大小

表示在不伸缩的情况下子元素的原始尺寸。

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

.item{
    flex-basis:<lengh>|auto
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

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。

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

如：