弹性盒 flex
弹性盒子是一种用于按行或按列布局元素的一维布局方法 。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。
使用弹性盒，必须先设置弹性盒容器：display: flex; 或 display: inline-flex;
flex 模型说明
当元素表现为 flex 框时，它们沿着两个轴来布局：
弹性容器：设置了
display:flex;或display: inline-flex;的元素称为 flex 容器（flex container）。弹性元素：设置了
display:flex;元素的子元素称为 flex 项（flex item）。弹性盒可以嵌套，一个元素可以是弹性容器，也可以是弹性元素
主轴（main axis）：弹性元素的排列方向称为主轴。该轴的开始和结束被称为 main start 和 main end。
侧轴（cross axis）：与主轴垂直方向的称为侧轴。该轴的开始和结束被称为 cross start 和 cross end。
flex 容器相关属性
弹性容器中弹性元素的排列方式 flex-direction。
flex-direction: row | row-reverse | column | column-reverse;
row：默认值，弹性元素在容器中水平排列，自左向右。（主轴：自左向右）row-reverse：弹性元素在容器中反向水平排列，自右向左。（主轴：自右向左）column：弹性元素纵向排列，自上向下。（主轴：自上向下）column-reverse：弹性元素反向纵向排列，自下向上。（主轴：自下向上）
弹性容器中弹性元素的换行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
nowrap- 默认值，溢出部分不换行。wrap- 沿着侧轴方向自动换行。wrap-reverse- 沿着侧轴反向自动换行。
简写属性 flex-flow
flex-direction 和 flex-wrap — 的缩写 flex-flow。可以同时设置排列方式和换行方式。
flex-direction: row; 和 flex-wrap: wrap; 可以替换为 flex-flow: row wrap;，没有前后顺序要求。
主轴上元素的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start：元素沿着主轴的起边排列。flex-end：元素沿着主轴的终边排列。center：弹性元素居中排列。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出。
space-between：弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2* 20px=10px）。
侧轴上元素的对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
align-self，用来覆盖当前弹性元素上的 align-items
stretch：默认值，将元素的长度设置为相同的值。如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。flex-start：沿侧轴起边对齐。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：沿侧轴终边对齐。弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。center：居中对齐。弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。baseline：基线对齐。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
侧轴元素额外空间的分配
align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
stretch- 默认。各行将会伸展以占用剩余的空间。flex-start- 各行向弹性盒容器的起始位置堆叠。flex-end- 各行向弹性盒容器的结束位置堆叠。center-各行向弹性盒容器的中间位置堆叠。space-between-各行在弹性盒容器中平均分布。space-around- 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
flex 元素相关属性
指定弹性元素的伸展的系数 flex-grow
当父元素有剩余空间时，子元素如何伸展，父元素的剩余空间会按照比例进行分配。
flex-grow: 0;默认值0，不伸展。- 值越大，伸展越多。
指定元素的收缩系数 flex-shrink
当父元素中的空间不足以容纳所有的子元素时，如何对子元素进行收缩。
flex-shrink: 1;默认值1，等比例收缩。flex-shrink: 0;不收缩。- 值越大，收缩越多。
指定弹性元素的弹性基准
flex-basis 指定的是元素在主轴上的基础长度。
- 默认值
auto，表示参考元素自身的高度和宽度。 - 如果主轴是横向的，则该值指定的就是元素的宽度。
- 如果主轴是纵向的，则该值指定的就是元素的高度。
指定弹性元素的排列顺序
order: 0;
- 所有
flex项默认的order值是 0。 - 相同 order 值的 flex 项按源顺序显示。
- 用整数值来定义排列顺序，数值小的排在前面。可以为负值。
完美居中
使用弹性盒子，居中变的很简单，只需要设置弹性元素 margin: auto; 可以使得弹性元素在两上轴方向上完全居中
弹性元素自身在侧轴方向上的对齐方式。
用来覆盖当前弹性元素上的 align-items
align-self: auto | flex-start | flex-end | center | baseline | stretch
auto：如果align-self'的值为auto，则其计算值为元素的父元素的align-items值，如果其没有父元素，则计算值为stretch。flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与flex-start等效。其它情况下，该值将参与基线对齐。stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照min/max-width/height属性的限制。
简写属性
flex 属性用于指定弹性子元素如何分配空间。
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
flex: 增长 缩减 基准
auto: 计算值为 1 1 autoinitial: 计算值为 0 1 autonone：计算值为 0 0 autoinherit：从父元素继承[ flex-grow ]：定义弹性盒子元素的扩展比率。[ flex-shrink ]：定义弹性盒子元素的收缩比率。[ flex-basis ]：定义弹性盒子元素的默认基准值。