Flex 布局 flex-grow 占用空间

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量780 收藏
点赞数
分类专栏： CSS 实例 文章标签： css flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AN_MEI/article/details/107286888
版权
本文探讨了Flex布局中flex-grow属性的作用。当不设置flex-grow时，各元素宽度为100，留有空白。而当设置flex-grow时，元素会占用这些空白，增长自身的宽度。如果多个元素同时设置flex-grow，它们将平均分配空白空间，共同增加宽度。
摘要由CSDN通过智能技术生成

1、占用空间 flex-grow

没有设置 flex-grow 时：s1、s2、s3、s4 各宽度100，预留多余空白处。
在这里插入图片描述
s2设置 flex-grow 时：占用了多余空白处，增长了自身宽度，没有了多余的空白处，自身宽度也从宽度100加到了114。
在这里插入图片描述
s2和s3都设置了flew-grow时：同时平分了多余的空白处，并且自身宽度都增加了。
在这里插入图片描述
在这里插入图片描述

<!-- Flex 布局 -->
<view class="container">
  <view class="s1"></view>
  <view class="s2"></view>
  <view class="s3"></view>
  <view class="s4"></
最低0.47元/天 解锁文章
<李小狮 / >
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css flex布局 —— 项目属性 flex-grow
且听风吟的博客
09-26 3161
css flex布局 —— 项目属性 flex-grow
flex弹性布局教程-04项目属性flex-grow
热门推荐
晴空闲云
09-21 2万+
本篇介绍了项目属性 flex-grow，用于定义项目的扩大系数，用于分配容器的剩余空间。 阅读时间约10~15分钟，文字虽多，但主要都是例子。
深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解
ScottePerk的博客
10-06 1万+
这篇文章对flex不熟也可以看。这篇文章只讲这三个属性。为了简单化，不会提到主轴交叉轴，也不讲方向，默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。如果你觉得对flex比较了解，可以直接从第二小节开始看起。
Flex布局-flex-grow、flex-shrink、flex-basis
xudakaka的专栏
12-24 287
Flex布局 父容器: 父容器设置子容器沿主轴排列：（） justify-content：flex-start,center,flex-end,space-around,space-between 父容器设置子容器沿交叉轴排列： align-items：flex-start,center,flex-end,baseline(首行文字对齐),stretch(子容器沿y方向的尺寸拉伸与父容器一致) ...
flex布局中理解flex-grow、flex-shrink、flex-basis属性
weixin_42382758的博客
05-08 1011
其中子项1的flex-grow: 0(未设置默认为0)， 子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。容器宽度400px, 子项目1占用的基准空间(width)为250px， 子项目2占用基准空间(width)为150px, 子项目3占用基准空间(flex-basis)为100px, 总基准空间250+150+100=500px > 400px, 多出的100px需要子项目根据flex-shrink进行吸收。
flex中的flex-grow、flex-shrink、flex-basis及缩写属性flex的使用场景
m0_51636525的博客
04-25 1万+
1.flex-grow决定了flex items 如何扩展拉伸 可以设置任意非负数字（正小数、正整数、0），默认是0 当flex-container在main axis（主轴）方向上有剩余size（空间）时，flex-grow属性才生效 三个宽度120px（3*120=360）的元素放在一个宽度400px的父级元素中，父级元素使用flex布局 <div class="container"> <div class="item item1">120px</d.
flex-shrink和felx-grow
全栈科学家的博客
02-20 630
flex-shrink和felx-grow和flex-basis
关于flex-grow，flex-shrink的计算
Snoopyqiuer的博客
10-11 712
在介绍flex-grow，flex-shrink的计算之前，先明确两个概念： 元素的实际宽度 = 元素的左边框+元素的左内边距+元素的内容宽度+元素的右内边距+元素的右边框； 元素的总占宽度 = 元素的左外边距+元素的左边框+元素的左内边距+元素的内容宽度+元素的右内边距+元素的右边框+元素的右外边距； 同时也可以先思考一下元素的padding、border、margin、box-sizing...
详解 flex-grow 与 flex-shrink
qq_38698753的博客
06-04 1538
自从开始开学习 CSS 布局，想要比较灵活的把父元素的空间分配给各个子元一直是各个前端程序员的梦想。在 flex 之前，如果不是专门去搜索相关的解决方案，一般人几乎想不出非常灵活的三（多）栏等高布局方案，而即使看了解决方案，很多人也会大呼奇技淫巧。不得不感慨在 flex 之前 CSS 的布局功能之弱：基本只能使用一些并非为布局而设计的属性来实现想要的布局——float、inline-block、p...
flex弹性布局.zip
03-18
在Flex布局中，元素的宽度和高度不再直接影响其占用的空间，而是由`flex-basis`、`flex-grow`和`flex-shrink`共同决定。 6. 响应式设计 - 结合媒体查询（Media Queries），可以根据屏幕尺寸、设备类型等条件动态...
flex实现的删除子容器
07-29
在前端开发中，Flex布局（Flexible Box）是一种强大的CSS布局模型，它允许开发者轻松地创建弹性容器和子元素，以适应各种屏幕尺寸和设备。在标题"flex实现的删除子容器"中，我们关注的核心是使用Flex布局来管理并...
flex折线的实现
07-27
5. **单个元素的控制**：每个flex项也可以通过`flex-basis`、`flex-grow`和`flex-shrink`属性来调整其在容器中的占用空间。 6. **浏览器兼容性**：虽然现代浏览器普遍支持Flexbox，但确保向后兼容性很重要。可能...
弹性盒模型笔记
03-09
- `flex-grow`：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。 - `flex-grow: 1;` 表示项目可以放大到填充整个容器的剩余空间。 - 在老版弹性盒模型中，使用 `-webkit-box-flex` 属性达到相同...
51CTO下载-40个CSS布局源码.zip
10-13
8. **Flex grow/shrink/basis**：在Flexbox布局中，这三个属性用于控制元素在剩余空间中的扩展、收缩和初始大小。 9. **Grid auto-flow** 和 `grid-template-columns/rows`：在Grid布局中，用于定义元素自动流的...
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1399
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS 的工作原理
07-25 1043
我可能会为一个框给出一个以像素为单位的回退宽度，然后继续给出一个值为 .旧浏览器将使用像素版本，忽略该行，因为它们不理解它。请记住，这是浏览器加载网页时发生的情况的非常简化的版本，并且不同的浏览器将以不同的方式处理该过程。鉴于 CSS 一直在开发中，因此领先于浏览器可以识别的内容，您可能会想知道如果浏览器遇到它无法识别的 CSS 选择器或声明会发生什么。如果浏览器正在解析您的规则，并遇到它无法理解的属性或值，它会忽略它并继续下一个声明。我们已经学习了CSS的基础知识，它的用途以及如何编写简单的样式表。
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中.zip
07-31
Java面试整理，涵盖基础、JVM、线程并发、框架、MySQL、微服务、Redis、中间件、数据结构与算法等。陆续完善中
chromedriver-mac-x64_121.0.6167.184.zip
最新发布
07-31
chromedriver-mac-x64_121.0.6167.184.zip
css flex 等比布局 flex-grow
01-18
以下是一个使用flex-grow属性实现等比布局的示例： ```html <div class="item item1">Item 1 <div class="item item2">Item 2 <div class="item item3">Item 3 ``` ```css .container { display: flex; } ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值