概念
flex container(flex容器)
- 任何一个HTML元素都可以指定成flex布局(
display:flex)，即便是行内元素(display:inline-flex)。但设定为flex布局之后，子元素的float、clear、vertical-align属性会失效。
flex item(容器成员)
- 放入flex容器中的元素都是flex item。
main axis(容器主轴)和cross axis(交叉轴)
- 容器通过两条根轴来确定成员的摆放。水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end。
容器属性
flex-direction(排列方向)
- row(水平排列，从左到右)
- row-reverse(水平排列，从右到左)
- column(垂直排列，从上到下)
- column-reverse(垂直排列，从下到上)
flex-wrap(换行方式)
-
nowarp(默认不换行)
-
warp(换行)
-
warp-reverse(倒置换行)
flex-flow
- 等于
flex-direction+flex-wrap的简写方式
justify-content(主轴对齐方式)
- flex-start(靠起始点对齐)
- flex-end(靠终点对齐)
- center(居中对齐)
- space-between(两端对齐，平铺拉伸)
- space-around(两端不对齐，使用相等距离的间隔点，环绕平铺)
align-item(交叉轴对齐方式)
- flex-start(靠交叉轴起点对齐)
- flex-end(靠交叉轴终点对齐)
- center(交叉轴居中对齐)
- stretch(交叉轴拉伸)
- baseline(以容器元素的第一行文字基线对齐)
align-content(主轴多行的对齐方式)
- flex-start(靠交叉轴的起点对齐)
- flex-end(靠交叉轴的终点对齐)
- center(相对交叉轴，居中对齐)
- stretch(相对交叉轴拉伸)
- space-between(交叉轴两端对齐，平铺拉伸)
- space-aground(交叉轴两端不对其，使用相等距离的间隔点，环绕平铺)
容器成员的属性
order：
-
定义容器元素的排序编号，由小到大，默认为0（可以设置负数）
flex-grow
-
容器元素的平铺比例，默认为0。如果容器元素的flex-grow属性值为1，则等分平铺。
flex-shrink
-
当容器空间不足时的缩放比例。如果容器元素的flex-shrink属性值都未1时，则等分缩放。而其中有个元素设置flex-shrink为0，则不进行缩放。
flex-basis(设定主轴元素的main size)
- length(指定大小)
- auto(原本大小)
flex(flex-grow + flex-shrink + flex-basis的简写方式)
- 默认为 0 1 auto。
align-self(为容器元素设置单独的对齐方式)
- auto(默认，表示继承父元素的align-items属性/如果无父元素则是stretch)
- flex-start(交叉轴起点对齐)
- flex-end(交叉轴终点对齐)
- center(居中对齐)
- baseline(第一行文字基线)
- stretch(拉伸)
