flex心得笔记

flex布局

大家好，本人是一名热爱编程语言的年轻人，在学习的路上从未停下脚步，下面是我在网络上的资源学习中，个人认为不容易一次性学好的知识点，总结了一点供自己学习使用，也能使大家巩固一些知识点。

开启了flex布局的元素叫flex container

flex container 里面的直接子元素叫做flex items

开启flex布局

display：flex/inline-flex //块级flex和行内flex元素

flex container上的css属性

flex-flow //是flex-direction与flex-wrap的简写，可以省略顺序随意。

flex-direction //设置主轴的方向，有4个值

1. row ：主轴方向，item从左到右排列
2. column ：交叉轴方向，item从顶部开始排列
3. row-reverse ：主轴方向反转，item从右到左排列
4. column ：交叉轴方向反转，item从底部开始排列

flex-warp //设置flex container是单行还是多行

1. nowrap（默认）：单行
2. wrap：多行
3. wrap-reverse：多行（对比warp，cross start 与cross end 相反）

justify-content //设置flex items在主轴上的对齐方式，有6个值

1. flex-start（默认）：与主轴开始位置对齐
2. flex-end ：与主轴结束位置对齐
3. center ：居中对齐
4. space-between ：items之间距离相等，俩端与主轴的开始、结束位置对齐
5. space-evenly ：items之间距离相等，俩端距离与items之间距离相等
6. space-around： items之间距离相等，主轴开始和结束的位置是items之间的一半距离

align-items //设置flex items 在交叉轴上的对齐方式，有6个值

1. normal：在弹性布局中，与stretch一样
2. stretch：当flex items 在交叉轴方向的size为auto时，会拉伸填充与flex container的size一样
3. flex-start：与交叉轴开始位置对齐
4. flex-end： 与交叉轴结束位置对齐
5. center： 居中对齐
6. baseline：与基线对齐（只看第一行元素基线）

align-content //设置多行flex items在交叉轴上的对齐方式，与justify-content类似

​ stretch（默认）：与align-items的stretch类似；

1. flex-start（默认）：与交叉轴开始位置对齐
2. flex-end ：与交叉轴结束位置对齐
3. center ：居中对齐
4. space-between ：items之间距离相等，俩端与交叉轴的开始、结束位置对齐
5. space-evenly ：items之间距离相等，俩端距离与items之间距离相等
6. space-around： items之间距离相等，交叉轴开始和结束的位置是items之间的一半距离

flex items上的css属性

flex 是flex-grow||flex-shrink||flex-basis的缩写形式，用的时候要注意值的书写。

flex-grow //设置flex items的扩展

1. 可以设置任意非负数字（正整数、正小数、0），默认为0

2. 当flex container在主轴方向上有剩余size时，flex-grow才会生效

3. 如果所有items的flex-grow总和超过1

   每个item的扩展为 container剩余的size * flex-grow / 总和

4. 如果所有items的flex-grow总和没有超过1

   每个item的扩展为 container剩余的size * flex-grow

   flex items扩展后的最终大小不能超过max-with\max-height

flex-basis //设置itme在主轴上的base size

1. auto（默认值）、具体的的宽度数值（100px）

2. 在使用它的时候要注意优先级

3. 优先级由高至低分别是：

   max-w/h、min-w/h

   flex-basis

   width\height

   内容本身的size

flex-shrink //设置flex-items的收缩

收缩比例=flex-shrink*flex item的base size

base size是 item 放入 container之前的size

1. 可以设置任意非负数字（正整数、正小数、0），默认为1

2. 当flex items在主轴方向上超过container的size时，flex-shrink才会生效

3. 如果所有items的flex-shrink总和超过1

   每个item的收缩为 items超出container的size * 收缩比例/ 所有items收缩比例的总和

4. 如果所有items的flex-shrink总和没有超过1

   每个item的扩展为 items超出container的size*flex-shrink * 收缩比例/ 所有items收缩比例的总和

   flex items扩展后的最终大小不能超过min-with\min-height

order //设置flex items的排布顺序

1. 可以设置任意整数（正、负数、0），数值小的item排在最前面
2. 默认是0；

algin-self //设置item自己的algin-items，值会覆盖 container设置的algin-items

1. auto（默认）：遵从flex container的align-items设置
2. stretch、flex-start、flex-end、center、baseline，效果与align-items一致