Css 弹性布局

弹性布局

display:flex 要发生弹性布局的子元素,他们的父元素,成为容器需设置display:flex
flex将块级元素设置为容器
inline-flex将行内元素设置为容器 元素设置为flex容器后,容器的text-align,vertical-align失效

设置主轴的方向

flex-direction 取值
row 默认值,主轴是x轴,主轴起点在左端
row-reverse 主轴是x轴,主轴起点在右端
column     主轴是y轴,主轴起点在顶部
column-reverse 主轴是y轴,主轴起点在底部

设置项目的换行

flex-wrap: 取值
默认值  nowrap  空间不够时,不换行,项目会自动缩小
wrap  空间不够时,项目不缩小,换行
wrap-reverse 项目换行,并反转

定义项目在主轴上的对齐方式

justify-content 取值
flex-start 默认值,主轴起点对齐
flex-end 主轴终点
center   主轴中心
space-around 每个外边距相同,两端有空白
space-between 两端对齐,两端无空白

项目们在交叉轴上的对齐方式

align-items: 取值
flex-start 默认值,交叉轴起点对齐
flex-end 交叉轴终点对齐
center 交叉轴中间对齐
baseline 基线,同flex-start类似
stretch 项目不写高,充满容器整个高度

让所有弹性盒模型对象的子元素都有相同的长度,且忽略它们内部的内容

flex:1; // 要发生弹性布局的子元素设置 默认值:	0 1 auto

flex 是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写

flex-grow
表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
默认值为0表示不占有剩余空间;
当子元素都设置为1时表示平均分配剩余空间;
当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
当一个子元素为1其余子元素为0,1的子元素占据全局剩余空间

felx-shrink
表示当子元素的空间大于父元素的空间时,如何缩小子元素
默认值为1表示等比缩小
当所有子元素都设置为1时所有子元素都会等比例缩小
当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小

flex-basis
用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值