又过了好几天没更新样子，加上最近玩Python有点嗨，总之又是各种理由，今天正好就来总结个比较简单flex弹性布局吧。
当时我才开始学前端的时候，做布局的时候页面元素少的时候还挺好办！直接就用定位啊，浮动啊也能解决问题，只是说有点繁琐，特别用浮动的时候，毕竟脱离文档流，容易遇上一些很诡异的问题（也许是当时基础不扎实的原因）。当时觉得一个比较大的问题就是实现垂直居中，甚至有的时候还得去强行借助JavaScript，特别对于我这种能用h5解决的，绝不会去用css，能用css，完成的绝对不会去用JS（一个原因可能是懒，另一个嘛应该算是有洁癖，总觉得性能上的小问题总不想放…）
好啦，好啦，废话扯了一大堆，我就大概梳理一下下吧！
总览
容器的属性
| 属性名 | 解释 | 值(第一个为默认值) |
|---|---|---|
| flex-direction | 排列方向 | row：主轴为水平方向左端起点 row-reverse：同上，右端起点 column：主轴为垂直方向上沿起点 column-reverse：同上，下沿起点 |
| flex-warp | 是否换行 | no-wrap：不换行 wrap：换行 wrap-reverse：换行，第一行在底部 |
| flex-flow | 上两个合在一起写 | row nowrap(默认值) … 其余的同上 |
| justify-content | 项目在主轴上 的对齐方式 |
flex-start：左对齐 flex-end：右对齐 center：居中对齐 space- between：两端对齐 space-around：沿轴线均匀分布 |
| align-items | 项目在交叉轴上 的对齐方式 |
stretch：等高对齐 flex-start：顶端对齐 flex-end：底部对齐 center：交叉轴居中对齐 baseline：第一行文字基线对齐 |
| align-content | 多根轴线的 对齐方式 |
stretch：轴线占满整个交叉轴 flex-start：与交叉轴的起点对齐 flex-end：与交叉轴的终点对齐 center：与交叉轴的中点对齐 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
项目的属性
| 属性名 | 解释 | 值(第一个为默认值) |
|---|---|---|
| order | 定义项目排列顺序 | 整数，默认0 |
| flex-order | 当有空间时项目的放大比例 | 默认0不放大 |
| flex-shrink | 空间不足时项目的缩小比例 | 默认1不足时缩小 |
| flex-basis | 项目在主轴上占据的空间 | 默认auto |
| flex | 上面三项合在一起写 | 默认值0 1 auto |
| align-self | 单独一个项目的对齐方式 | 和容器属性中align-items一致，覆盖align-items属性 |