花点时间弄懂flex布局

一.Flex 布局是什么

Flex 是 Flexible Box 的缩写，意为弹性布局。任何容器都可以指定为 Flex 布局.
备注以下：在文中，自我理解：主轴为 X 轴，交叉轴为 Y 轴

.box{display:flex}

之所以有这个布局出现，是因为布局的传统方案：基于盒状模型，依赖 display 属性，position 属性，float 属性对于那些特殊布局非常不方便.

行内元素若想使用 Flex

.box{display:inline-flex}

若是 webkit 内核的浏览器，例如 safari，必须加上 -webkit 前缀.
如果设置了 flex，则 float,clear,vergical-align 三个属性将失去作用.

二.Flex 的一些名词概念

采用 Flex 布局的元素，被称为 Flex 容器（Flex container）,
它的所有子元素自动成为容器成员，被称为 Flex 项目（Flex item）

容器默认存在两根轴：水平的主轴（main axis）和 垂直的交叉轴（cross axis）.

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目 (Flex item) 占据的主轴空间叫做 main size，占据的交叉轴空间叫做 cross size。

三. 容器的属性

3.1 flex-direction 属性
flex-direction 属性决定主轴（在我自已的理解中，主轴即 X 轴）的方向（即项目的排列方向）

.box{flex-direction:row | row-reverse | column |column-reverse;}

属性解释：
row(默认值): 主轴为水平方向，起点在左端
row-reverse: 主轴为水平方向，起点在右端
column: 主轴为垂直方向，起点在上沿
column: 主轴为垂直方向，起点在下沿

3.2 flex-wrap 属性
默认情况下，项目 (flex-item) 都排在一条线上，flex-wrap 属性定义，如果一条轴线排不下，如何换行.

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

属性解释：
总共有 12 个块
1.nowrap(默认值)：不换行

2.wrap: 换行，且第一行在上方

3.wrap-reverse: 换行，第一行在下方

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

3.4 justify-content 属性
justify-content 定义了项目在主轴上的对齐方式

.box{justify-content:flex-start | flex-end | center | space-between | space-around}

属性解释：
1.flex-start: 左对齐

2.flex-end: 右对齐

3.center: 居中

4.space-between: 两端对齐，项目之间间隔相等

5.space-around: 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边的间隔大一倍

3.5 align-items 属性
align-items 属性定义项目在交叉轴上如何对齐

.box{align-items:flex-start | flex-end | center | baseline | stretch}

属性解释：
1.flex-start:Y 轴的起点对齐

2.flex-end:Y 轴的终点对齐

3.center:Y 轴的中点对齐

4.baseline: 项目第一行文字的基线对齐

5.stretch(默认值)：如果项目未设置高度或设为 auto，则占满整个容器的高度

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

.box{align-content:flex-start | flex-end | center | space-between | space-around | stretch;}

属性解释：
1.flex-start: 与 Y 轴的起点对齐

2.flex-end: 与 Y 轴的终点对齐

3.center: 与 Y 轴的中点对齐

4.space-between: 与 Y 轴两端对齐，轴线之间的间隔平均分布

5.space-around: 每根轴线两侧的间隔都相等，所以轴线之间的间隔比轴线与边的间隔大一倍

6.stretch(默认值): 轴线占满整个 Y 轴

四. 项目 (Flex-item) 的属性

4.1 order 属性
order 属性定义项目(Flex-item) 的排序顺序，数值越小，排列越靠前，默认为 0.

.item{order:<int>}

4.2 flex-grow 属性
flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大

.item{flex-grow:<number>; 默认为 0}

若三个模块 flex-grow 都为 1，则显示如下：

若三个模块 flex-grow 值如下，则显示：

.item-one{flex-grow:1}
.item-two{flex-grow:2}
.item-three{flex-grow:1}

4.3 flex-shrink 属性
flex-shrink 属性定义了项目的缩小比例，默认为 1，如果空间不足，则该项目缩小，若为 0，则不缩小. 负值对该属性无效。

.item{flex-shrink:<number>; 默认为 1}

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

.item {flex-basis: <length> | auto; /* default auto */}

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

4.5 flex 属性
flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

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

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

以上内容参考此链接，欢迎查看原版.