flex布局工具

flex布局工具
【父元素】flex-direction排列方向
【父元素】flex-wrap换行
【父元素】justify-content主轴对齐
【父元素】align-items交叉轴对齐
【子元素】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单独设置子元素对齐
你好,我是子元素0
【order会单独控制我】
你好,我是子元素1
你好,我是子元素2 【align-self 会单独控制我】
你好,我是子元素3
你好,我是子元素4
你好,我是子元素5 后边可以多写一些文字,形成差异
你好,我是子元素6 后边可以多写一些文字,形成差异
你好,我是子元素7 后边可以多写一些文字,形成差异
你好,我是子元素8 后边可以多写一些文字,形成差异
1
2
3
4