容器1,缩小比为0，宽度100px
容器2,缩小比为1，宽度200px
容器3,缩小比为3，宽度200px，缩放后宽度为50px
弹性布局
| 网址 | 表述 |
|---|---|
| Flex 布局教程：语法篇 | |
| Flex 布局教程：实例篇 |
弹性盒子
声明定义
容器盒子里面包含着容器元素，使用 display:flex 或 display:inline-flex 声明为弹性盒子。
flex-direction
用于控制盒子元素排列的方向。
| 值 | 描述 |
|---|---|
| row | 从左到右水平排列元素（默认值） |
| row-reverse | 从右向左排列元素 |
| column | 从上到下垂直排列元素 |
| column-reverse | 从下到上垂直排列元素 |
flex-wrap
flex-wrap 属性规定 flex 容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
| 选项 | 说明 |
|---|---|
| nowrap | 元素不拆行或不拆列（默认值） |
| wrap | 容器元素在必要的时候拆行或拆列。 |
| wrap-reverse | 容器元素在必要的时候拆行或拆列，但是以相反的顺序 |
flex-flow
flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。
css
flex-flow: row-reverse wrap-reverse;主轴排列
justify-content
用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。
| 选项 | 说明 |
|---|---|
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
交叉轴行
元素在交叉轴上有行的概念，理解这个概念会对理解 align-items 与 align-content 有更好的帮助。
- align-item 是控制元素在行上的排列
- align-content 是控制行在交差轴上的排列
align-items
用于控制容器元素在交叉轴上单行的排列方式。
| 选项 | 说明 |
|---|---|
| stretch | 元素被拉伸以适应容器（默认值） |
| center | 元素位于容器的中心 |
| flex-start | 元素位于容器的交叉轴开头 |
| flex-end | 元素位于容器的交叉轴结尾 |
拉伸适应交叉轴
如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响 stretch 的结果，因为 stretch 优先级低于宽高设置。并且max-height>min-height>height>stretch。width类似。
align-content
只适用于多行显示的弹性容器，用于控制行（而不是元素）在交叉轴上的排列方式。
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
| space-between | 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 |
| space-around | 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 |
| space-evenly | 元素间距离平均分配 |
弹性元素
放在容器盒子中的元素即为容器元素。
- 不能使用 float 与 clear 规则
- 弹性元素均为块元素
- 绝对定位的弹性元素不参与弹性布局
order属性
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。可通过JS控制order，动态改变元素顺序。
align-self
用于控制单个元素在交叉轴上的排列方式，align-items 用于控制容器中所有元素的排列，而 align-self 用于控制一个弹性元素的交叉轴排列。
| 选项 | 说明 |
|---|---|
| stretch | 将空间平均分配给元素 |
| flex-start | 元素紧靠主轴起点 |
| flex-end | 元素紧靠主轴终点 |
| center | 元素从弹性容器中心开始 |
flex-grow
用于将弹性盒子剩余的可用空间，分配给弹性元素。可以使用整数或小数声明。如果子元素未设置宽度，计算公式：宽度/（各子元素分配的数值之和）* 各子元素分配数值。
如果弹性元素设置了宽度，将把（弹性盒子-弹性元素宽度和）后按照 flex-grow 进行分配 ，计算公式：剩余宽度/（各子元素分配的数值之和）* 各子元素分配数值+原来宽度。
flex-shrink
与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值。
缩小比例 = 不足的空间 /（ (元素 1 宽度 x 缩小比例系数) + (元素 2 宽度 x 缩小比例系数) +...+（元素 n 宽度 x 缩小比例））
最终尺寸 = (1 - 缩小比例 x 缩小元素的比例系数) X 缩小元素宽度
举例，假如父容器宽度300px，一、二、三容器分别缩放0、1、3，一、二、三容器宽度为100px、200px、300px，不足的空间为200px。
html
<style>
article.love-flex-box-shrink {
border: solid 5px silver;
width: 300px;
height: 120px;
display: flex;
padding: 10px;
box-sizing: content-box;
div {
flex-shrink: 0;
width: 200px;
height: 100px;
overflow: hidden;
background: blue;
background-clip: content-box;
padding: 10px;
border: solid 1px blueviolet;
box-sizing: border-box;
color: white;
}
div:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
div:nth-child(2) {
flex-shrink: 1;
}
div:nth-child(3) {
content: attr(title);
flex-shrink: 3;
}
}
</style>
<article class="love-flex-box-shrink">
<div>容器1,缩小比为0，宽度100px</div>
<div>容器2,缩小比为1，宽度200px</div>
<div title="容器3,缩小比为3，宽度200px，缩放后宽度为50px">容器3,缩小比为3，宽度200px，缩放后宽度为50px</div>
</article>flex-basis
flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。可以是长度单位，也可以是百分比。flex-basis的优先级高于width、height属性。个人理解这个属性其实就是在flex布局下，一个高优先级的宽度。没有太大用处。
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
弹性文本
文本节点也在弹性布局操作范围内。
定位
绝对定位的弹性元素不参与弹性布局，相对定位参与，保留原来的空间位。
自动空间
在弹性布局中对元素使用margin-right:auto 等形式可以自动撑满空间。
html
<style>
nav.love-flex-box-margin-auto {
display: flex;
border: solid 1px green;
margin-top: 20px;
align-items: center;
height: 60px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
background: #f3f3f3;
ul {
list-style: none;
}
ul:nth-child(1) {
display: flex;
align-items: center;
margin-right: auto;
}
ul:nth-child(1) > li {
margin: 0 10px;
}
ul:nth-child(2) > li {
width: 50px;
height: 50px;
border-radius: 50%;
background: #9b59b6;
}
}
</style>
<div>
<nav class="love-flex-box-margin-auto">
<ul>
<li>标签1</li>
<li>标签2</li>
<li>标签3</li>
<li>标签4</li>
</ul>
<ul>
<li></li>
</ul>
</nav>
</div>