关于flex布局的基础教程,请点击Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com),下面我来讲解flex布局可能出现的奇奇怪怪的问题
与容器相关
align-content也可以控制一根轴线
- 默认使用
align-content是没有效果的 - 只有容器设置
flex-warp为warp或warp-reverse才可以生效 这里我使用了place-content,可以快速水平垂直居中
place-content:<align-content> <jusitfy-content>
place-content:center 等于 align-content:center 与 jusitfy-content:center
align-items也可以控制多根轴线
align-items与align-content的区别
控制单根轴线
align-items可以在容器不设置flex-warp时控制单根轴线交叉轴的对齐方式align-content须设置flex-warp为warp或warp-reverse才可以控制单根轴线交叉轴的对齐
控制多根轴线
-
align-items默认是控制单根轴线的,所以会把所有轴线看成一根轴线进行对齐 -
align-content通常定义多根轴线交叉轴对齐,所以会把每一根轴线看做成一根项目
与项目相关
项目子元素不能撑起项目高度
- 项目不设置宽度,则会由子元素撑开
- 项目不设置高度,因为
align-items默认为stretch,所以会拉伸
项目不进行默认收缩
大家都知道如果不设置flex-warp:warp或flex-shrink:0,默认项目超过显示会进行一比一收缩的,如图
但是一种情况不会进行收缩,就是项目收缩后又被子元素撑开,如图
设置项目
overflow:hidden解决问题
flex-shrink 计算方法
flex-shrink相加小于1
当flex-shrink相加小于1时,每个项目放缩的宽度 = 超出的宽度 * 对应项目的flex-shrink
flex-shrink相加大于1
当flex-shrink相加大于1时,每个项目放缩的宽度 = 超出的宽度 * 对应项目的flex-shrink权重
flex-grow 计算方法
flex-grow 相加小于1
当 flex-grow 相加小于1,每个项目放大的宽度 = 剩余的宽度 * 对应项目的flex-glow
flex-grow 相加大于1
当 flex-grow 相加大于1,每个项目放大的宽度 = 剩余的宽度 * 对应项目的flex-glow权重
不能加的属性
-
当盒子使用flex布局时,项目的
float、clear和vertical-align属性将失效, -
项目设置
position:absolute或fixed会脱离flex布局
margin:auto依然有效
margin的auto会平分对应剩余的空间
- margin:0 auto平分水平剩余空间
- margin:auto 0 平分垂直剩余空间
如果有错请大佬指出,这些都是我的平时总结
