flex布局
前言
所谓布局即在指定的范围中（container）对里面的元素（items）进行一个布置。
练习游戏（https://flexboxfroggy.com/）
- what：flex即弹性盒子
- why：在移动端，禁止使用float，适当使用position，一定会使用到flex
- how：只需在父盒子上加上display:flex
- 要注意地点：
- 左对齐和起点对齐：从左往右排，左就是起点。从上往下排，上就是起点，交叉轴用语。主轴的起点对齐叫做左对齐。
- 主轴：所有子盒子在水平或者垂直方向的对齐方式，水平还是垂直方向取决于flex-direction,如果是row或者row-reverse则是水平方向的对齐方式，如果是column或者column-reverse则是垂直方向的对齐方式。我们称这条参照轴线为主轴（main-axis）。
- 交叉轴：相应的，如果主轴是水平方向，那么垂直方向我们就称之为交叉轴（cross-axis），也叫做侧轴，反之同理。
- 只要使用了flex，主轴和交叉轴一定会存在
- flex布局是平面内的布局，也就是说二维布局
container(display:flex)
- flex-direction：子盒子布置方向
- row（默认值）：从左往右
- row-reverse：从右往左
- column：从上往下
- column-reverse：从下往上
- flex-wrap：子盒子布置时是否换行
- wrap：换行（向下换行）
- nowrap（默认值）：不换行
- wrap-reverse：换行（向上换行）
- flex-flow：flex-direction和flex-wrap简写，默认值为 row nowrap
- justify-content：参考主轴，所有子盒子的对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-around：两侧间隔相等
- space-between：两端对齐
- align-item：参照交叉轴，所有子盒子的对齐方式
- flex-start：起点对齐
- flex-end：终点对齐
- center：居中
- baseline：以子盒子里面的第一行文字的基线对齐
- stretch（默认值）：子盒子未设置高度，则子盒子会占满父盒子的高度
- align-content：子盒子多行并且多列的的时候生效
- flex-start：参考交叉轴，起点对齐
- flex-end：参考交叉轴，终点对齐
- center：：参考交叉轴，居中对齐
- space-around：参考交叉轴，间隔大小相等
- space-between：参考交叉轴，两端对齐
- stretch：参考交叉轴，占满整个交叉轴，子盒子宽或高未定生效
items
- order：指定子盒子的排列顺序，数值越小，排的越靠前。默认为0
- flex-basis：指定子盒子的宽度，默认值为auto
- flex-grow：指定子盒子的放大比例，默认为0
- flex-shrink：指定子盒子缩小比例，默认为1
- flex：flex-grow flex-shrink flex-basis的缩写，默认值0 1 auto
- align-self：指定子盒子的对齐方式，可覆盖align-items
- auto
- flex-start
- flex-end
- center
- baseline
- stretch
