flex 容器 属性详解
- flex-direction 决定元素的排列方向 (设置主轴和交叉轴的)
取值：
row（默认）
column - flex-wrap 决定元素如何换行（排列不下时候）
取值：
nowrap（默认）
wrap
wrap-reverse - flex-flow flex-direction和flex-wrap的简写
flex-flow: row warp；(同时设置这两个属性)
- justify-content 决定元素在主轴上的对齐方式
取值：
flex-satrt（默认）
flex-end
center
space-around (每个元素在主轴上两边占据的空间相等)
space-between (两端元素在主轴上靠边对齐，中间元素两边占据的空间相等) - align-items 决定元素在交叉轴上的对齐方式
取值：
flex-satrt（默认）
flex-end
center
stretch (看起来好像和flex-satrt属性效果一样，但是当元素没有设置高度的时候，自动元素的高度是占满整个容器的高度)
baseline (看起来好像和flex-satrt属性效果一样，是以元素内第一行文字为对齐方式)
flex 元素 属性详解（只能用在每个小的元素里边）
-
flex-grow 当有空余空间时，元素的放大比例
取值： 0 1 2 3 4 ...
flex-shrink 当空间不足时，元素的缩小比例
> 取值： 1 0 2 3 4 ...flex-basis 元素在主轴上占据的空间
> 取值： 1 0 2 3 4 ...flex 是grow、shrink、basis的简写
> flex: 1 0 50rpxorder 定义元素的排列顺序
> flex: 0 1 2 3 4 ...align-self 定义元素自身的对齐方式（会复写掉 justify-content 、align-items 属性）
取值：
auto | flex-start | flex-end | center | baseline | stretch
