Flexbox 弹性盒子布局

 Flexbox，全称弹性盒子布局，提供更精细的控制，能轻松解决困扰我们许久的垂直居中和登高列问题。

1 display: flex

将容器设置为弹性容器，容器会占据100%的可用宽度，高度则由自身的内容来决定，即使改变主轴方向，也不会影响这一本质。

允许子元素使用”margin:auto;”来填充子元素之间的可用空间，比如把最后的子元素移动到最右侧。

图 弹性容器基础

行内元素，贡献给父元素的高度是根据行高计算，而不是根据内边距与内容。

1.1 弹性容器属性

flex-direction	用于指定弹性方向。 初始值row（从左到右），column表示从上到下，row-reverse 从右到左，column-reverse 从下到上。 垂直的弹性盒子，高度由自身内容来决定，因此子元素的flex-grow 和flex-shrink 不会起作用，除非有“外力”强行改变弹性容器的高度。
flex-wrap	指定子元素是否会在弹性容器内折行显式。（如果弹性方向为垂直，则折列显式）。默认值：nowrap,不折行。 wrap 折行，wrap-reverse 折行翻转。 flex-wrap 用于flexbox布局中的子元素排列。 white-space 用于纯文本的布局需求。
justify-content	控制子元素在主轴上的位置。 flex-start: 默认值，让子元素从主轴的开始位置排列。 flex-end: 让子元素从主轴的结束位置开始排列。 center: 让子元素居中（主轴方向）。 space-between: 将第一个子元素放在主轴开始的地方，最后一个子元素放在主轴结束的地方，剩余的元素间隔均匀的放在这两者之间。 space-around: 类似space-between,只不过第一个子元素的前面和最后一个子元素的后面也会加上相同的间距。
align-items	控制子元素在主轴方向的对齐方式。 stretch: 默认值，在水平排列的情况下让所有子元素填充容器的高度，垂直排列的情况下让子元素填充容器的宽度。（其他值可以让子元素保留自身的大小） flex-start: 让子元素与副轴的开始位置对齐。 flex-end: 让子元素与副轴的结束位置对齐。 center: 让子元素副轴方向居中。 baseline: 让元素根据每个子元素的第一行文字的基线对齐。
align-content	如果开启了flex-wrap，且子元素有换行，则这个属性能控制子元素在副轴的间距。 否则会忽略这个属性。 属性值一共有六个，其中5个和justify-content的一样。 stretch 为初始值。填充在副轴上的空间。

表 弹性容器属性

图 弹性盒子容器的flex-direction属性

图 弹性容器盒子的flex-wrap 属性

图 弹性容器盒子的justify-content 与 align-items 属性

图 弹性容器盒子的align-content 属性

1.2 弹性子元素的属性

flex	是 flex-grow、flex-shrink、flex-basis 三个属性的缩写。 flex-basis: 定义元素的初始宽度（可以是px、em及百分比），初始值是auto（此时浏览器会检查元素是否设置了width属性值，如果有，则使用width的值作为flex-basis的值，否则用元素内容自身的大小），如果值非auto，那么width属性会被忽略。 flex-grow: 每个弹性子元素的flex-basis值计算出后，它们（包括外边距）加起来的宽度可能会小于弹性容器的宽度，多出来的留白，会按照flex-grow(增长因子)的值分配给每个元素，该值为非负整数，如果为0，那它的宽度不会超过flex-basis的值。 flex-shrink: 当子元素的初始尺寸（加上外边距）超出弹性容器的宽度，超出的部分会按照该值权重进行收缩。 默认值，flex-grow 和 flex-shrink为1、flex-basis为0%。
align-self	控制子元素在副轴上的对齐方式，会覆盖容器上的align-items值，如果子元素副轴方向上的外边距未auto，则会忽略该属性。 支持的关键字与align-items一样。默认值是auto。
order	将弹性子元素从兄弟节点中移动到指定位置，覆盖源码顺序。

表 弹性子元素的属性

图 弹性子元素的flex属性

图 弹性子元素的align-self属性