CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。
弹性盒子中的子元素可以在各个方向上进行布局，并且能以弹性尺寸来适应显示空间。由于元素的显示顺序可以与它们在源代码中的顺序无关，定位子元素将变得更容易，并且能够用更简单清晰的代码来完成复杂的布局。这种无关性是仅限制于视觉呈现上的，语言顺序以及基于源代码顺序的导航均不受影响。
弹性盒布局概念
在定义方面来说，弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。弹性容器扩展其内元素来填充可用空间，或将其收缩来避免溢出。
弹性盒布局相关词汇
图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。
弹性容器(Flex container)
包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。
弹性项目(Flex item)
弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。
轴(Axis)
每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
- flex-direction 确立主轴。
- justify-content 定义了在当前行上，弹性项目沿主轴如何排布。
- align-items 定义了在当前行上，弹性项目沿侧轴默认如何排布。
align-self 定义了单个弹性项目在侧轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。
方向(Direction)
弹性容器的主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)描述了弹性项目排布的起点与终点。它们具体取决于弹性容器的主轴与侧轴中，由 writing-mode 确立的方向（从左到右、从右到左，等等）。
order 属性将元素与序号关联起来，以此决定哪些元素先出现。
flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
行(Line)
根据 flex-wrap 属性，弹性项目可以排布在单个行或者多个行中。此属性控制侧轴的方向和新行排列的方向。
尺寸(Dimension)
根据弹性容器的主轴与侧轴，弹性项目的宽和高中，对应主轴的称为主轴尺寸(main size) ，对应侧轴的称为 侧轴尺寸(cross size)。
min-height 与 min-width 属性初始值将为 0。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，描述弹性项目的整体的伸缩性。
属性
align-content
概述
align-content 属性定义了当作为一个弹性盒子容器的属性时，浏览器如何在容器的侧轴围绕弹性盒子项目分配空间。==该属性对单行弹性盒子模型无效。 #==
语法
/* Positional alignment */ align-content: center; /* Pack items around the center */ align-content: start; /* Pack items from the start */ align-content: end; /* Pack items from the end */ align-content: flex-start; /* Pack flex items from the start */ align-content: flex-end; /* Pack flex items from the end */ align-content: left; /* Pack items from the left */ align-content: right; /* Pack items from the right */ /* Baseline alignment */ align-content: baseline; align-content: first baseline; align-content: last baseline; /* Distributed alignment */ align-content: space-between; /* Distribute items evenly The first item is flush with the start, the last is flush with the end */ align-content: space-around; /* Distribute items evenly Items have a half-size space on either end */ align-content: space-evenly; /* Distribute items evenly Items have equal space around them */ align-content: stretch; /* Distribute items evently Stretch 'auto'-sized items to fit the container */ /* Overflow alignment */ align-content: safe center; align-content: unsafe center; /* Global values */ align-content: inherit; align-content: initial; align-content: unset;
取值
flex-start
所有行从垂直轴起点开始填充。第一行的垂直轴起点边和容器的垂直轴起点边对齐。接下来的每一行紧跟前一行。
flex-end
所有行从垂直轴末尾开始填充。最后一行的垂直轴终点和容器的垂直轴终点对齐。同时所有后续行与前一个对齐。
center
所有行朝向容器的中心填充。每行互相紧挨，相对于容器居中对齐。容器的垂直轴起点边和第一行的距离相等于容器的垂直轴终点边和最后一行的距离。
space-between
所有行在容器中平均分布。相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的边对齐。
space-around
所有行在容器中平均分布，相邻两行间距相等。容器的垂直轴起点边和终点边分别与第一行和最后一行的距离是相邻两行间距的一半。
stretch
拉伸所有行来填满剩余空间。剩余空间平均的分配给每一行
align-items
概述
align-items 属性以与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。==与align-content属性的区别在于它指定了当前Flex容器的行中的项目的对齐方式，而align-content则指定了行自身的对齐方式。==
语法
/* Basic keywords */ align-items: normal; align-items: stretch; /* Positional alignment */ align-items: center; /* Pack items around the center */ align-items: start; /* Pack items from the start */ align-items: end; /* Pack items from the end */ align-items: flex-start; /* Pack flex items from the start */ align-items: flex-end; /* Pack flex items from the end */ align-items: self-start; align-items: self-end; align-items: left; /* Pack items from the left */ align-items: right; /* Pack items from the right */ /* Baseline alignment */ justify-items: baseline; align-items: first baseline; align-items: last baseline; /* Overflow alignment (for positional alignment only) */ align-items: safe center; align-items: unsafe center; /* Global values */ align-items: inherit; align-items: initial; align-items: unset;
取值
flex-start
元素向侧轴起点对齐。
flex-end
元素向侧轴终点对齐。
center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
baseline，first baseline，last baseline
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
stretch
弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
align-self
概述
align-self 会对齐当前 flex 行中的 flex 元素，并覆盖 align-items 的值. 如果任何 flex 元素的侧轴方向 margin 值设置为 auto，则会忽略 align-self。
语法
align-self: auto align-self: flex-start align-self: flex-end align-self: center align-self: baseline align-self: stretch align-self: inherit
取值
auto
设置为父元素的 align-items 值，如果该元素没有父元素的话，就设置为 stretch。
flex-start
flex 元素会对齐到 cross-axis 的首端。
flex-end
flex 元素会对齐到 cross-axis 的尾端。
center
flex 元素会对齐到 cross-axis 的中间，如果该元素的 cross-size 的尺寸大于 flex 容器，将在两个方向均等溢出。
baseline
所有的 flex 元素会沿着基线对齐，The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line。
stretch
flex 元素将会基于容器的宽和高，按照自身 margin box 的 cross-size 拉伸。
flex-direction
概述
flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
语法
/* The direction text is laid out in a line */ flex-direction: row; /* Like <row>, but reversed */ flex-direction: row-reverse; /* The direction in which lines of text are stacked */ flex-direction: column; /* Like <column>, but reversed */ flex-direction: column-reverse; /* Global values */ flex-direction: inherit; flex-direction: initial; flex-direction: unset;
==注意==：值 row 和 row-reverse 受 flex 容器的方向性的影响。 如果它的 dir 属性是 ltr，row 表示从左到右定向的水平轴，而 row-reverse 表示从右到左; 如果 dir 属性是 rtl，row 表示从右到左定向的轴，而 row-reverse 表示从左到右。
取值
row
flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
row-reverse
表现和row相同，但是置换了主轴起点和主轴终点
column
flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse
表现和column相同，但是置换了主轴起点和主轴终点
flex-flow
概述
flex-flow 属性是 flex-direction 和 flex-wrap 的简写。
语法
这个属性有两个值，两个值以空格隔开。
取值
取值详见flex-direction 和 flex-wrap
flex-wrap
概述
flex-wrap 指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
语法
flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; /* Global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset;
取值
nowrap
flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start 会根据 flex-direction 的值 相当于 start 或 before。
wrap
flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
wrap-reverse
和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
justify-content
概述
justify-content 属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。
语法
/* Positional alignment */ justify-content: center; /* 居中排列 */ justify-content: start; /* Pack items from the start */ justify-content: end; /* Pack items from the end */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* Pack items from the left */ justify-content: right; /* Pack items from the right */ /* Baseline alignment */ justify-content: baseline; justify-content: first baseline; justify-content: last baseline; /* Distributed alignment */ justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */ justify-content: space-evenly; /* Distribute items evenly Items have equal space around them */ justify-content: stretch; /* Distribute items evenly Stretch 'auto'-sized items to fit the container */ /* Overflow alignment */ justify-content: safe center; justify-content: unsafe center; /* Global values */ justify-content: inherit; justify-content: initial; justify-content: unset;
当 length 属性和自动外边距属性（margin: auto）生效之后，对齐已经完成了。也就是说，如果存在至少一个弹性元素，而且这个元素的 flex-grow 属性不等于 0，那么对齐方式不会生效，就像没有多余空间的情况。
取值
start
从行首开始排列。每行第一个元素与行首对齐，同时所有后续的元素与前一个对齐。(话说翻译居然不用审核？)
flex-start
从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。
order
概述
rder 属性规定了弹性容器中的可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
语法
/* Numerical value including negative numbers */ order: 5; order: -5; /* Global values */ order: inherit; order: initial; order: unset;
取值
默认0，可以设置正数或负数