css3的flex-grow属性

最新推荐文章于 2024-06-26 10:44:48 发布
最新推荐文章于 2024-06-26 10:44:48 发布
阅读量354 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45846357/article/details/105620264
版权
本文介绍了CSS3的flex-grow属性，用于控制当父元素有剩余空间时，子元素如何分配这部分空间。通过举例说明，解释了当子元素设置不同的flex-grow值时，它们将如何按比例扩大以填充父元素的剩余宽度。
摘要由CSDN通过智能技术生成
该属性用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。 flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。值越大，索取的越厉害。
1、举个例子: 父元素宽400px，有两个子元素：A和B。A宽为100px，B宽为200px。 则空余空间为 400-（100+200）= 100px。 如果A，B都不索取剩余空间，则有100px的空余空间。
<body>
<div class="box">
    <div class="inner">
    </div>
    <div class="inner1">
    </div>
</div>
</body>

.box{
            display: flex;
            flex-direction: row;
            margin:100px auto;
            width:400px;
            height:200px;
            border:1px solid red;
 
        }
        .inner{
            flex-basis:100px;
            height:100px;
            background:pink;
        }
        .inner1{
            f
最低0.47元/天 解锁文章
weixin_45846357
关注
css flex布局 —— 项目属性 flex-grow
且听风吟的博客
09-26 3197
css flex布局 —— 项目属性 flex-grow
每日一学—CSS flex-grow 属性
黛琳ghz的博客，期待你的关注。
05-08 1万+
什么是flex-grow属性❓ flex-grow 属性用于设置或检索弹性盒子的扩展比率。 ❗注意：如果元素不是弹性盒对象的元素，则 flex-grow 属性不起作用。 CSS 语法 flex-grow:number|initial|inherit; 属性值 值 描述 number 一个数字，规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。 initial 设置该属性为它的默认值。 inherit 从父元素继承该属性。 测试代码 ...
flex属性中的flex-grow、flex-shrink、flex-basis
最新发布
卿本无忧的博客
06-26 1067
flex属性中的flex-grow、flex-shrink、flex-basis
css3新弹性盒子-flex-grow
m0_63616567的博客
06-15 364
flex-grow<number>默认值：0适用于：弹性盒模型容器子元素继承性：无。
css3 flex-grow,flex-shrink,flex-basis三者的结合使用
周家大小姐
04-29 564
不管在什么情况下左边的盒子宽都不会变 <style> .container{ display: flex; } .left{ background: #000; height:100px; /* flex-grow: 800px; 是扩...
css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
weixin_30279671的博客
03-21 186
最近在研究css3的flex。遇到的flex:1;这一块，很是很纠结，flex-grow、flex-shrink、flex-basis始终搞不清，最经搜集了大量的介绍，应该能算是明白了。网上大部分解释是flex-grow 是扩展比率flex-shrink 是收缩比率flex-basis 伸缩基准值 假设flex盒子父级宽度固定为800px； Flex-grow、Flex-shrink、Flex...
css弹性盒子-------桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解
热门推荐
m0_37058714的博客
06-21 8万+
flex-grow、flex-shrink、flex-basis三个属性的作用：在flex布局中，父元素在不同宽度下，子元素是如何分配父元素空间的。(注意：这三个属性都是在子元素上设置的，下面小编要讲的是父元素，指以flex布局的元素(display:flex))小编这里先教一下大家如何快速记住这三个属性：首先是   flex-basis  ，basis英文意思是&lt;主要成分&gt;，所以他和...
CSS——Flex弹性布局及flex-grow与flex-shrink的计算
GoodLuck_wu5的博客
07-31 513
一、Flex布局 flex布局就是将盒子变成弹性盒子， 任何一个盒子都可以变成弹性盒子display: flex 行内元素也可以使用 Flex 布局 display: inline-flex 注意： 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。 二、容器的属性
flex属性：flex-grow/flex-basis/flex-shrink
qq_43650979的博客
05-17 223
flex属性：flex-grow/flex-basis/flex-shrink flex的“可伸缩”主要体现在flex-grow/flex-basis/flex-shrink这三个属性上 flex-basis 未应用flex-grow和flex-shrink之前，flexbox中的项的初始大小,默认取值是auto <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &lt
【CSS3】flex-grow属性演示
iuukai
08-26 482
【传送门：阮一峰 - Flex 布局教程：语法篇】 相关文章： 1.【flex-grow】属性演示 2.【flex-shrink】属性演示 3.【flex-basis】属性演示 4.【flex】属性演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* res
CSS3——弹性盒模型- flex-grow、flex-shrink、flex-basis
weixin_30663471的博客
07-19 87
本文：flex的扩展属性及其应用 -----------------------分界线----------------------- flex-grow：(用来瓜分父级宽度剩余的宽度，，默认值为0) 容器宽度为400px,子元素1的宽度为100px,子元素2的宽度为100px,子元素3的宽度为100px，总宽度为100 + 100 + 100 = 300px。容器还剩余100px...
flex-grow
弱智de克星
01-17 920
flex-grow
CSS3 - flex属性：flex-grow、flex-shrink和flex-basis
Qlly
03-16 440
HTML <div class="parent"> <div class="c c1">1</div> <div class="c c2">2</div> <div class="c c3">3</div></div> </div> CSS .parent { ...
flex布局---容器内部，flex-grow属性
weixin_45128912的博客
07-17 157
flex布局---容器内部，flex-grow属性
css3的flex: flex-grow flex-shrink flex-basis详细用法
m0_46662835的博客
05-17 500
flex：可以同时添加三个属性值，分别为 flex-grow flex-shrink flex-basis，那他们分别是啥意思，拆分开来如何使用呢； flex-grow 设置弹性盒的扩展比率，如果给它们共同设置一个该属性的话，它代表按等比例平分子级所占宽度之外的剩余空间，它的默认值为1，也就是flex-grow：1； 如代码： <div class="wrapper"> <div class="content">1</div> <
聊一聊 Flex 中的 flex-grow、flex-shrink、flex-basis
weixin_30849403的博客
07-17 193
在使用 flex 布局的时候难以理解的是 flex-grow、flex-shrink、flex-basis 几个属性的用法，下面通过几个例子来演示。 flex-basis flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。 对于子项1，flex-...
深入理解CSS之flex精要之 flex-basis flex-grow flex-shrink 实战讲解
ScottePerk的博客
10-06 1万+
这篇文章对flex不熟也可以看。这篇文章只讲这三个属性。为了简单化，不会提到主轴交叉轴，也不讲方向，默认方向就是水平方向从左往右。但并不影响对这三个概念的理解。如果你觉得对flex比较了解，可以直接从第二小节开始看起。
css flex 等比布局 flex-grow
01-18
flex-grow属性用于设置flex容器中的项目在剩余空间中的放大比例。它决定了项目在主轴方向上的分配比例。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，而其他项目的flex-grow属性都为1，则前者将占据的空间是后者的两倍。 以下是一个使用flex-grow属性实现等比布局的示例： ```html <div class="container"> <div class="item item1">Item 1</div> <div class="item item2">Item 2</div> <div class="item item3">Item 3</div> </div> ``` ```css .container { display: flex; } .item { flex-grow: 1; background-color: lightblue; border: 1px solid black; padding: 10px; } .item1 { flex-grow: 2; } .item2 { flex-grow: 1; } .item3 { flex-grow: 1; } ``` 在上面的示例中，容器中有三个项目，其中第一个项目的flex-grow属性为2，而其他两个项目的flex-grow属性都为1。这意味着第一个项目将占据的空间是其他两个项目的两倍。因此，第一个项目将占据50%的剩余空间，而其他两个项目将各占据25%的剩余空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值