目录
容器与项目
- 容器：父元素下的子元素如果要布局成弹性布局，则父元素称之为容器。
- 项目：弹性布局的元素称之为项目，它是容器的子元素。
主轴与交叉轴
- 主轴：项目们排列的方向称之为主轴。若项目们横向排列，主轴就是x轴；若项目们纵向排列，主轴就是y轴。（此处的x轴与y轴和直角坐标系不同，y轴是由上到下排列，在前端的知识点中y轴指向几乎都是竖直向下）
- 交叉轴：与主轴垂直相交的方向称之为交叉轴。
语法
元素变为弹性容器后，它的所有子元素变为弹性项目。
display:flex;
display:inline-flex;
元素设置为flex容器后，子元素项目的float、clear、vertical-align失效，子元素允许修改尺寸，容器的对齐方式text-align失效
容器的属性
flex-direction
其决定主轴的方向
- 值：
- row。默认值。主轴是x轴，主轴起点是左端。
- row-reverse。主轴是x轴，主轴起点是右端。
- column。主轴是y轴，主轴起点是顶端。
- column-reverse。主轴是y轴，主轴起点是底端。
flex-wrap
当一个主轴排列不下所有的项目时，可以换行显示
- 值：
- nowrap。默认值。空间不够时也不换行，项目会自动缩小。
- wrap。换行。
- wrap-reverse。换行并反转。（和wrap完全相反的顺序）
flex-flow
flex-direction与flex-wrap的缩写
- 值：（共有12种搭配）
- row nowrap(默认值)
justify-content
定义项目在主轴上的对齐方式
- 值：
- flex-start。在主轴的起点无间隙地挤在一起。
- flex-end。在主轴的终点无间隙地挤在一起。
- center。在主轴的中间无缝隙地挤在一起。
- space-between。各项目间距相等，且占据了主轴起点与终点的位置（第一个项目margin-left和最后一个项目的margin-right为0）。
- space-around。各项目间距相等。（各项目有相同的margin-left与margin-right）。
align-items
项目在交叉轴上对齐的方式
- 值：
- flex-start。默认值。在交叉轴起点对齐。
- flex-end。在交叉轴终点对齐。
- center。在交叉轴居中对齐。
- baseline。在交叉轴基线对齐。（与flex-start差不多）
- stretch。如果项目没有设置尺寸，在交叉轴上占满所有的空间。
项目的属性
order
- 值：无单位整数。
值越小越靠近主轴的起点。默认值为0。
flex-grow
定义项目的放大比例速度。也同样是定义项目在主轴上的长度（可能是宽也可能是高）的比例。
- 值：无单位整数。默认值为0,不放大。
flex-shrink
定义项目的缩小比例速度。当容器空间不足时项目应该如何缩小。
- 值：无单位整数，默认为0,不缩小。
align-self
定义当前项目在交叉轴上的对齐方式
- 值：
- flex-start：默认值，在交叉轴起点对齐。
- flex-end:在交叉轴的终点对齐。
- center：在交叉轴居中对齐。
- baseline：在交叉轴基线对齐。
- stretch：如果项目没有设置尺寸，在交叉轴上占满所有空间。
- auto：继承父元素的align-items效果。