基本概念
采用弹性布局的元素，称为项目。其子元素，称为项目
main start 主轴起点 main axis 主轴 main end 主轴终点
cross start 交叉轴起点 cross axis 交叉轴 cross end 交叉轴终点
[交叉轴也称 侧轴]
[项目默认沿主轴排列]
容器属性
设定主轴方向： [指定项目的排列方向]
flex-direction: row [默认值] | row-reverse | column | column-reverse
[row 默认值 主轴水平向右]
[row-reverse 主轴水平向左]
[column 主轴垂直向下]
[column-reverse 主轴垂直向上]
指定项目的换行方式：
flex-wrap: nowrap [默认值] | wrap | wrap-reverse
[nowrap 默认值 不换行]
[wrap 换行 从主轴上往主轴下排列]
[wrap-reverse 换行 从主轴下往主轴上排列]
主轴方向与换行的复合写法：
flex-flow: row nowrap [默认值]
指定项目在主轴上的对齐方式
justify-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly
[flex-start 默认值 起点对齐]
[flex-end 终点对齐]
[center 居中]
[flex-start 默认值 起点对齐]
[space-between 两端对齐]
[space-around 项目两侧间距相等排开]
[space-evenly项目与项目间、项目与边框的间距相等，对标 space-around]
指定主轴的对齐方式
align-content: flex-start [默认值] | flex-end | center | space-between | space-around | space-evenly
指定项目在侧轴上的对齐方式
align-items:flex-start [默认值] | flex-end | center | baseline
baseline 对齐项目的 第一行文字的 基线
项目属性
指定项目的排列顺序：order: val;
指定项目对剩余空间分配的占比: flex-grow:0 [默认值];
[若所有项目均为1，则项目将平分剩余空间]
指定项目 在分配多余空间前 占据的主轴空间:flex-basis:auto [默认值];
[类width 但优先级比width高]
指定项目的缩小比例：flex-shrink:1 [默认值]
[若所有项目均为1，则空间不足时，项目均会等比缩小]
缩放属性、占据主轴空间属性的复合写法：flex: flex-grow flex-shrink flex-basis
[快捷值1：auto == (1 1 auto)]
{ 项目占据(或均分)本行剩余的主轴所有空间 (因为flex-basis属性优先级高于width，所以不会出现元素溢出问题)}
[快捷值2：none == (0 0 auto)]
{ 空间不足时项目不会缩小，空间剩余时项目不会放大}
{ 当项目没指定高度height时，align-content:stretch [默认值]会失效，因为侧轴空间的缩放也被禁止}
指定单个项目在侧轴上的对齐方式：align-self:flex-start [默认值] | flex-end | center | baseline
[优先级高于align-content]
