flex思维导图、总结、各属性案例

思维导图

容器的属性 _{/ 斜线：在flex-direction: column;属性下}

flex-direction：元素的排列方向(模型A、模型B)

1. row（默认） ：模型A，主轴为水平方向，起点在o，横向排列（o到x），元素为A、B、C
2. row-reverse：模型A，主轴为水平方向，起点在x，横向排列（x到o），元素为C、B、A
3. column：模型B，主轴为垂直方向，起点在o，纵向排列（o到y），元素为A、B、C
4. column-reverse：模型B，主轴为垂直方向，起点在y，纵向排列（y到o），元素为C、B、A

flex-wrap：容器内的元素是否换行

1. nowrap（默认）：超出部分不换行/列，始终保持一行/列显示，元素会被压缩
2. wrap：一行内剩余空间不够一个元素宽/高时，超出部分进行换行/列，始终保持元素宽/高
3. wrap-reverse：一行内剩余空间不够一个元素宽/高时，超出部分进行换行/列，始终保持元素宽/高，行/列排序进行翻转

flex-flow：flex-direction、flex-wrap的简写，默认值为：flex-flow: row nowrap；

justify-content：元素在主轴上的对齐方式

1. flex-start（默认）：元素左/上对齐
2. flex-end：元素右/下对齐
3. center：元素居中对齐
4. space-between：元素两端对齐，前后没有间距，元素之间平分剩余空间
5. space-around：元素分散对齐，前后有间距，元素之间空间相等，前后空间是元素空间的一半

align-items：元素在交叉轴上的对齐方式

1. flex-start：元素上/左对齐
2. flex-end：元素下/右对齐
3. center：元素居中对齐
4. baseline：元素内文字基线对齐，文字底部/右边在一个水平线上
5. stretch（默认）：元素拉伸对齐，元素如果未设置高/宽度或者auto，占满容器的高/宽度

align-content：定义多根轴线(多行、多列)的对齐方式，(多行元素、多列元素)当做轴线，需要设置flex-wrap: wrap/wrap-reverse，只有一根轴线(一行、一列)，该属性无效

1. flex-start：轴线(多行/列)，上/左对齐
2. flex-end：轴线(多行/列)，下/右上对齐
3. center：轴线(多行/列)，上下/左右居中对齐
4. space-between：轴线(多行/列)，上下/左右两端对齐，前后没有间距，元素之间平分剩余空间
5. space-around：轴线(多行/列)，上下/左右分散对齐，前后有间距，元素之间空间相等，前后空间是元素空间的一半
6. stretch（默认）：轴线(多行/列)，上下/左右拉伸对齐，元素如果未设置高/宽度或者auto，占满容器的高/宽度

容器内元素的属性

order：元素排列顺序，从小到大，越小越靠前，支持负数，默认值为0

flex-grow：元素放大比例，只有在行/列有剩余空间下有效，默认值为0（不进行放大）

1. 同级元素默认值的情况下，B元素设置为1，B元素将沾满剩余空间，B元素设置2，3，4等都是同样的效果
2. 同级元素默认值的情况下，B元素设置为1，C元素设置为2，剩余空间3等分，B元素获取剩余空间的1/3，C元素获取剩余空间的2/3
3. 同级元素全部设置为1，将均分剩余空间

flex-shrink：元素缩小比例，只有在行/列空间全部占满下有效，默认值为1（进行缩小），负数无效

1. 同级元素默认值的情况下，同级元素全部都进行了缩小
2. 同级元素默认值的情况下，B和E元素设置为0，B和E元素将不进行缩小
3. 同级元素全部设置为0，将全部不进行缩小，元素将超过父级元素行/列

flex-basis：元素固定空间(宽度/高度)或者自动空间的比例，不需要行/列空间有剩余或者占满，默认值为auto

1. 元素设置固定宽度
2. 元素设置空间比例

flex：flex-grow、flex-shrink、flex-basis的简写，默认值为flex：0 1 auto; 有2个简写auto、none

1. auto：1 1 auto的简写
2. none：0 0 auto的简写

align-self：重写父级元素的align-items属性

关联文章

1. flex布局 常见问题，解决技巧