flex布局工具
【父元素】flex-direction排列方向
row row-reverse column column-reverse
【父元素】flex-wrap换行
nowrap wrap wrap-reverse
【父元素】justify-content主轴对齐
flex-start flex-end center space-between space-around
【父元素】align-items交叉轴对齐
flex-start flex-end center baseline stretch
【子元素】order排序
0 1 2 3 4 5 6 7 8 9
【子元素】flex-grow放大比例，默认为0，如存在剩余空间也不放大
若值为1、2、3 则这三个子项分别占剩余宽度的1/6 / 2/6 3/6 没设置flex-grow的子项目则不抢占
【子元素】flex-shrink 缩小比例 默认为1，如果空间不足项目会缩小
若值为1、2、3 分别在有剩余空间占比3:2:1 数值越大缩小的越狠
【子元素】flex-basis 基础大小 根据主轴决定是宽或高
若三个子元素大小分别为 100px、 200px、 300px 那么 他们宽度或高度占比1:2:3
【子元素】align-self单独设置子元素对齐
auto flex-start flex-end center baseline stretch
你好，我是子元素0
【order会单独控制我】
你好，我是子元素1
你好，我是子元素2 【align-self 会单独控制我】
你好，我是子元素3
你好，我是子元素4
你好，我是子元素5 后边可以多写一些文字，形成差异
你好，我是子元素6 后边可以多写一些文字，形成差异
你好，我是子元素7 后边可以多写一些文字，形成差异
你好，我是子元素8 后边可以多写一些文字，形成差异
1
2
3
4