flex的三个属性:

(1)flex-grow;指的是相对于其他的子元素的扩展比率;默认值为0;数字

(2)flex-basis;指的是子元素的具体长度;可以为长度(rem,px,em)也可以为百分比;

(3)flex-shink;指的是相对于其他元素的收缩比率;默认值为0;数字

以上三者均是按父容器的大小划分;

正常情况设置flex:1;表示该子容器等于父容器的1倍,当没有别的子元素时,此时二者大小相等。若有别的子元素,那么是去掉别的子元素的长度,剩下的大小划分,若还是设置为1,仍然和剩下的大小一样大;

转载于:https://www.cnblogs.com/qinyuande/p/7629270.html

### 关于 `flex: 1` 的作用和使用方法 #### 什么是 `flex: 1` `flex: 1` 是 CSS 中 Flexbox 布局的一个简写形式,它定义了一个弹性盒子(Flex Item)如何在其容器(Flex Container)中分配空间。具体来说,`flex: 1` 等价于设置以下三个属性: - **`flex-grow: 1`**: 子元素会按照比例扩展以填充剩余的空间。 - **`flex-shrink: 1`**: 当空间不足时,子元素会被压缩的比例。 - **`flex-basis: 0%`**: 初始大小被设定为零百分比。 这意味着当父级容器设置了 `display: flex` 后,任何具有 `flex: 1` 设置的子元素都会尝试均匀地占据可用空间[^2]。 #### 使用场景 假设有一个简单的 HTML 结构如下所示: ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` 对应的 CSS 可能这样编写: ```css .container { display: flex; } .item { flex: 1; /* 所有的 item 都将平分 container 的宽度 */ } ``` 在这种情况下,“Item 1”,“Item 2” 和 “Item 3” 将平均分割它们的父亲容器 `.container` 提供的所有水平空间[^3]。 #### 特殊情况处理 如果某些项目需要不同的增长比率,则可以通过单独指定其 `flex` 值来实现差异化的布局效果。例如,让第一个项目占两倍宽而其他两个保持原样: ```css .item:nth-child(1) { flex: 2; /* 这个项目将会占用双倍的空间相对于其他的兄弟节点 */ } ``` 这种灵活性使得开发人员能够轻松构建复杂却动态调整的设计方案,满足现代网页设计对于响应性和适配性的高要求[^2]。 #### 总结 综上所述,`flex: 1` 主要用于使所有的弹性盒模型对象自动填满整个行或者列,并且可以根据实际需求进一步定制各个项目的相对尺寸关系,极大地简化了传统浮动定位带来的繁琐操作过程[^1]^。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值