彻底搞懂flex布局

这里关于什么是flex布局，flex布局优点就不多说了，此篇文章主要写一下flex布局的属性语法，还有一些细节，也作为自己的一篇学习笔记吧。
首先，先来感受flex布局的属性们：
6个容器属性：

    flex-direction
    flex-wrap
    flex-flow
    justify-content
    align-items
    align-content

6个项目属性

    order
    flex-grow
    flex-shrink
    flex-basis
    flex
    align-self

在开始介绍各个属性之前，先了解一些flex弹性容器的特点：

当你对一个元素设置了display：flex；那么这个元素就成为了弹性容器，
每个弹性容器都有一个主轴，一个交叉轴
两个轴垂直交叉，成90度角
每根轴都有起点和终点
可通过 flex-direction属性改变主轴方向，所以主轴方向不一定是水平的
弹性容器中的元素成为弹性元素，弹性元素沿着主轴排列
弹性元素也可以通过display:flex设置为弹性容器，形成嵌套关系。
因此一个元素既可以是弹性容器也可以是弹性元素。

下面开始了解flex弹性容器的属性：

容器属性

1.改变主轴方向的 flex-direction

flex-direction有四个值：

    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。

2. 决定元素如何换行的 flex-wrap

弹性元素永远沿着主轴排列，如果一行排不开，如何换行由flex-wrap决定
他有三个值：

    nowrap（默认值）：不换行。如果单行内容过多，则溢出容器。
    wrap：单行内容过多，换行排列。第一行在下面
    wrap-reverse：单行内容过多，换行排列。换行方向为wrap时的反方向。第一行在上面

3. 复合属性 flex-flow

flex-flow是 flex-direction属性和flex-wrap属性的复合属性。flex-flow: flex-drection + flex-wrap；
默认情况是：
flex-flow: row nowrap;

4. 元素在主轴上的对齐方式 justify-content

    flex-start（默认值）：项目对齐主轴起点，项目间不留空隙。
    flex-end：项目对齐主轴终点，项目间不留空隙。
    center：项目在主轴上居中排列，项目间不留空隙。
    space-between：项目间间距相等，第一个项目离主轴起点和最后一个项目离主轴终点距离为0。
    space-around：每个项目两侧的间隔相等。
    space-evenly：项目间间距、第一个项目离主轴起点和最后一个项目离主轴终点距离等于项目间间距。

5.项目在交叉轴上如何对齐 align-items

5个值：

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

6.弹性元素多行时，交叉轴上的对齐方式 align-content

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

项目属性

1. 决定元素排列顺序的 order

.item{
  order: 0（默认值） | <integer>
}

数值越小，排列越靠前，默认为0。

2. 元素的收缩因子 flex- shrink，扩大因子 flex-grow

.item{
  flex-shrink: 1（默认值） | <number> // 取值为非负数
  flex-grow: 0（默认值） | <number>
}

当元素在主轴方向上溢出时，通过设置项目flex- shrink来压缩弹性元素适应容器。

当元素的值都为1，当空间不足时，都将等比例缩小。
如果一个项目的值为0，其他项目都为1，则空间不足时，前者不缩小。
负值无效

当元素在主轴方向上有剩余时，通过设置项目flex- grow来扩大弹性元素适应容器。

当元素的值0，即如果存在剩余空间，也不放大。
当元素的值都为1，等分剩余空间
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
负值无效

3. 刚性尺寸flex-basis

flex-basis设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸。

.item{
  flex-basis: auto（默认值） | <number>px
}

当容器设置flex-direction为row或row-reverse时，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替项目的width属性。

当容器设置flex-direction为column或column-reverse时，flex-basis和height同时存在，flex-basis优先级高于height，也就是此时flex-basis代替项目的height属性。

当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

4. 复合属性 flex

是flex-grow，flex-shrink，flex-basis的简写方式。
默认值为0 1 auto。后两个属性可选。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

5. align-self

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