弹性盒子模型属性之flex-grow
来源:互联网 发布:淘宝描述不符违规 编辑:程序博客网 时间:2024/05/16 13:52
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!
今天就让我们先来看看flex-grow这个属性
flex-grow
定义项目的放大比例,默认值为0,就算存在剩余空间,也不会放大。下面的例子中没有定义该属性,是不会拥有分配剩余空间的权利的。
<div class="box">
<span class="item">1</span> <span class="item">2</span> <span class="item">3</span>
</div>
.box{
width:400px; border:1px solid deepskyblue; /*声明一个弹性盒子模型*/ display: flex;
}
.item{
width:100px; height:100px; background: cyan; border:1px solid deepskyblue; /*放大比例*/ flex-grow: 0; /*默认0 不放大*/
}
当项目1,2,3的flex-grow比例改变为:
.item:nth-child(1){
flex-grow: 0;
}
.item:nth-child(2){
flex-grow: 1;
}
.item:nth-child(3){
flex-grow: 2;
}
效果为:
计算过程如下(在此我们忽略变宽的大小,以便于计算):
整个box的宽度400px减去项目1+2+3原始宽度100px之和,得出答案400-(100+100+100)=100像素,
例子中项目1不放大,项目2,3的放大比例分别为1,2,那么剩余空间分为3分,项目2à1份,项目3à2分,比例就为1:2,分配出来的值就为项目1:100/3*1=33.33px,
项目2: 100/3*2=66.66px,那么这个时候剩余空间就被计算出来了,相加后的结构就为项目1:133.33px002E项目2:166.66px
项目1的计算公式: 100 + (100 / 3) * 1
项目2的计算公式: 100 + (100 / 3) * 2
那么flex-grow这个属性在我们使用弹性布局的时候是非常常见的,所以大家要予以重视. 怎么样,现在大家对于flex-grow是如何分配剩余空间的问题是不是就很清晰了呢^-^.
上海尚学堂web前端培训原创,请多多关注,陆续有web前端相关技术文章奉献。
阅读全文
0 0
- 弹性盒子模型属性之flex-grow
- 弹性盒子模型属性之flex-shrink
- 弹性盒子模型(flex)
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- CSS box-flex属性,然后弹性盒子模型简介
- 弹性盒子模型 box-flex
- html flex弹性盒子模型
- CSS弹性盒子模型Flex
- flex弹性盒子常用属性
- CSS3: box-flex (弹性盒子模型)
- tensorflow graph 中获取variable operation
- Android辅助功能
- toutiao
- 云数据中心异构资源管理大有可为
- C语言操作符
- 弹性盒子模型属性之flex-grow
- oj网站的训练题:进制转换
- <,>引起的mybatis异常:元素内容必须由格式正确的字符数据或标记组成
- 碉堡!新AlphaGo弃用人类知识 21天干掉柯洁版老狗【附Nature论文下载】
- Linux 设置静态IP方法
- 逻辑回归(Logistic Regression)简介及C++实现
- 给自己的JSP/Servlet教程
- 任务:2006年培养学员8万人,每年增长%25,请问按此增长速度,到那一年培训学员人数将达到20万人
- 高通5G芯片亮相;百度明年量产无人巴士