flex伸缩布局知识总结

flex伸缩布局

• 传统布局和flex伸缩布局的区别？
• 父项属性
• 子项属性

---

传统布局和flex伸缩布局的区别？

传统布局

• 兼容性好
• 布局繁琐
• 局限性，不能再移动端很好的布局

flex布局

• 操作方便，布局极其简单，移动端使用比较广泛
• pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分

父项属性

flex-direction主轴方向

• row 默认值：元素沿行排列，起始线在左边，终止线在右边
• row_reverse 元素沿行排列，起始线在右边，终止线在左边
• column 主轴和侧交换，元素沿列方向排列显示，起始线在顶部，终止线在底部
• column-reverse 主轴和侧轴交换，元素沿列方向排列显示，起始线在底部，终止线在顶部

flex-wrap是否换行

• nowrap 默认值：不换行
• wrap 换行

justify-content主轴排列方式

• flex-start 默认值：左对齐
• flex-end：右对齐
• center： 居中
• space-between：两端对齐，项目之间的间隔都相等
• space-around：每个项目两侧的间隔相等

align-items侧轴排列方式（单行）

• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸
• baseline 所有元素向基线对齐

align-content侧轴排列方式（多行）

• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸
• baseline 所有元素向基线对齐

子项属性

order排列顺序

• 数值越小，排列越靠前，默认为0
• 相同 order 属性值的元素按照其在源代码中出现的顺序进行排列

flex-grow剩余空间

• 剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小
• 如果所有的兄弟项目都有相同的flex-grow系数，那么所有的项目将获得相同的剩余空间，否则将根据不同的flex-grow系数定义的比例进行分配
• 负值无效，默认值为0，有剩余空间页不会扩大
• 如果某项有宽度，则减去这个宽度后才分配剩余空间

flex-shring收缩规则

• 负值无效，默认值为1，表示空间不够将缩小，则应该配合换行使用
• 如果值为0，表示空间不够不会缩小
• 如果所有项目的 flex-shring 值都为1，当空间不足时，都会等比例缩小

本文地址：https://blog.csdn.net/chuenst/article/details/112545931