5.当切换容器排列方式后，水平对齐以及垂直对齐的 应用 变化（重点、难点⭐⭐⭐⭐⭐）
- 当使用flex-direction: (例 column) ;时 justify-content 、 align-content 、align-items发生的变化
- 当排列为column / column-reverse 时，其实容器的主轴发生了变化
- 主轴现在是竖轴，副轴是横轴
这时候 justify-content 控制的不再是横向的，而是竖向的排列 - 这时候 align-content / align-items 控制的不再是竖向的，而是横向的排列
6.Let’s Codeing（子项目的属性）
java程序员可省略…
6.1.order: number ; 顺序指定
- order: 0 ;(默认值都为 0 )
- 当我将每个子项目的order修改后 order
父：justify-content: space-evenly ; 父：align-items : center ; 子：.item:nth-child(1){ order: 0;} 子：.item:nth-child(2){ order: 1;} 子：.item:nth-child(3){ order: -1;} 子：.item:nth-child(4){ order: 3;} 子：.item:nth-child(5){ order: 2;} 子：.item:nth-child(6){ order: 2;}
看效果
6.2.flex-grow……子项目延伸比率
所谓grow就是当排列元素没有占满一行时，会有剩余空间，
子元素通过设置这个属性，声明要占取剩余空间的剩余份数，
默认所有子元素为0
这里我举两个例子
父： /* 水平对齐方式 */ justify-content: space-evenly ; /* 垂直对齐方式 */ align-items : center ; 子：.item:nth-child(1){ margin: 10px; flex-grow: 2; } 子：.item:nth-child(2){ margin: 10px; } 子：.item:nth-child(3){ margin: 10px; }
父： /* 水平对齐方式 */ justify-content: space-evenly ; /* 垂直对齐方式 */ align-items : center ; 子：.item:nth-child(1){ margin: 10px; flex-grow: 3; } 子：.item:nth-child(2){ margin: 10px; } 子：.item:nth-child(3){ margin: 10px; flex-grow: 1.5; }
6.3.flex-basis……子项目的基本宽度
- 会覆盖之前设置的width属性
- 看代码
父： /* 水平对齐方式 */ justify-content: space-evenly ; /* 垂直对齐方式 */ align-items : center ; 子：.item:nth-child(1){ flex-basis: 100px; } 子：.item:nth-child(2){ flex-basis: 100px; } 子：.item:nth-child(3){ flex-basis: 200px; }
6.3.flex-shink……子项目收缩比率
- flex-shink跟flex-grow 正好相反 是当子项目容不下时，设置当前子项目收缩的比例
- flex-shink：1 ；（默认值为1） ，也就是说每个子项目在容不下时，都会的去均匀收缩
- 可以试着把第一个设置为0看看
父： max-width: 700px; /* 水平对齐方式 */ justify-content: space-evenly ; /* 垂直对齐方式 */ align-items : center ; 子：.item:nth-child(1){ flex-basis: 300px; flex-shrink: 0; } 子：.item:nth-child(2){ flex-basis: 300px; } 子：.item:nth-child(3){ flex-basis: 300px; }
- 再来一个扯一点的案例
- 好了，还没有理解的话，再写一个，没事沃不累！
- 终于整完了
6.4.flex: …… ; 再来一个实用的吧
- flex: 0 1 30% ;
- grow shink basis
- 第一个表示延伸比率为 0（不延伸）
- 第二个表示收缩比率为 1 (不收缩)
- 第三个表示基本宽度为 30% （以父级容器宽度为标准的30%）
- 看实战
子：.item:nth-child(1){ flex: 0 1 20% ; } 子：.item:nth-child(2){ flex: 1 0 30% ; } 子：.item:nth-child(3){ flex: 0 1 20% ; }
6.5.align-self……子元素垂直对齐（self 子项目 自己 单独的排列方式）
- 默认值 auto auto会接受父级带来的排列方式，
- 设置后，会覆盖父级的排列方式
- align-self: flex-start ；（单个自己进行顶部排列 ：据主轴而变化）
- align-self: flex-start ；（单个自己进行居中排列 ：据主轴而变化）
- align-self: flex-start ；（单个自己进行底部排列 ：据主轴而变化）
- align-self: flex-start ；（单个自己进行高度充满排列 ）
- align-self: baseline ;(单独基线排序 一般多个配合使用 )
