关于伸缩布局

本文深入解析Flex布局的各项属性,包括disflex、min-width、max-width、flex-direction等,并详细阐述justify-content和align-items属性如何实现子元素的水平和垂直对齐。同时,探讨了flex-wrap属性在解决子盒子换行问题上的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

disflex:flex; //伸缩布局模式

min-width: 300px; /*指定响应式 最小的宽度 就是到300px后网页就不在缩小了*/

max-width:500px; //最大的宽度

flex-direction: row; //设置横向排列  column设置竖向排列

 

关于justifycontent属性的介绍如下:

/*justify-content: flex-start; 让子元素从父容器的开头开始排序*/

/*justify-content: flex-end; 让子元素从父容器的结尾的地方开始排序 但是盒子顺序不变*/

/*justify-content: center; 让子元素在父容器中居中对齐*/

/*justify-content: space-between;左右的盒子贴近父盒子 中间的平均分布空白间距*/

justify-content: flex-end; /*相当于给盒子添加了一个左右的margin的外边距*/ 水平对齐

关于align-items垂直对齐介绍如下:

/*align-items: flex-start; 沿着顶部对齐 上对齐*/

/*align-items: flex-end; 底对齐*/

/* align-items: center; 垂直居中对齐*/

align-items: stretch; /*让子元素高度拉伸适用父容器(子元素不给高度的条件下)*/

 

关于一行子盒子是否换行的问题如下

/*flex-wrap: nowrap; 默认的第一个不换行 同一行上进行显示*/

/*flex-wrap: wrap; 子盒子超出边框会自动换行*/

flex-wrap: wrap-reverse; /*子盒子进行翻转*/

 

/*多行子盒子换行*/

/* flex-flow: row wrap; 要让多行盒子 实现换行的功能 这句话必须写

align-content: center; */

/* flex-direction: column; */

/* 上面两句话相当于下面的一句话 */

flex-flow: row wrap; /*变现的意思就是 垂直排列 换行*/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值