弹性盒子模型属性之flex-grow
在学习弹性盒子模型的时候,有几个属性常常让同学们感觉头痛, 不知到最后得到的效果数值到底是怎样计算得来的,那么不要慌,稳住,我们能赢 !!!
今天就让我们先来看看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前端相关技术文章奉献。
更多专业前端知识,请上 【猿2048】www.mk2048.com
弹性盒子模型属性之flex-grow相关推荐
- 弹性盒子模型中`display:flex`布局下`white-space:nowrap`失效问题
文字长度过长显示省略号的样式设置方法众所周知: <!-- 单行显示省略号 --> .css {white-space: nowrap;overflow: hidden;text-overf ...
- flex弹性盒子模型
目录 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器中或在自身属性中 3.flex布局的优点 1.弹性盒子模型可以以任意父容器为flex模型 2.他的布局位置可以在父容器 ...
- css3弹性盒子模型之box-flex(--)
今天看到蓝色理想上面有一篇文章讲<css3弹性盒模型布局模块介绍>里面讲到用box-flex,突然觉得有点心慌,上次看到响应式网页设计里面 也同样讲到flex box自适应布局,而上次竟然 ...
- css3的弹性盒子模型,css3弹性盒子模型——回顾。
1.box-flex属性规定框的子元素是否可伸缩其尺寸. 父元素必须要声明display:box;子元素才可以用box-flex. 语法:box-flex:value; 示例: .test_box { ...
- 微信小程序---弹性盒子模型
1.弹性盒子布局 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为 ...
- css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
- flex弹性盒子中flex-grow与flex的区别
flex弹性盒子中flex-grow与flex的区别 大家在使用flex布局的时候很多情况下都会用到flex-grow这个属性, flex-grow 属性用于设置父元素剩余空间的瓜分比例, flex ...
- css中 盒模型的属性包括(),css的盒子模型属性有哪些?css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
- flex弹性布局之弹性盒子模型
一,flex弹性盒子布局 1. flex弹性盒子介绍 弹性盒子是 CSS3 的一种新的布局模式.CSS3 弹性盒( Flexible Box 或 flexbox,是一种当页面需要适应不同的屏幕大小以及 ...
最新文章
- Python-time
- linux 查看libevent 安装目录,linux下libevent安装配置与简介 以及 linux库文件搜索路径的配置...
- 73. Leetcode 230. 二叉搜索树中第K小的元素 (二叉搜索树-中序遍历类)
- Apache服务器上部署的网站乱码问题的解决办法
- python温度转换代码分析_Python温度转换实例分析
- Android Studio 3.0 下 Cordova 打包时 Gradle 兼容性问题解决
- Docker+Teamcity+Maven+SVN搭建持续集成环境
- centos安装桌面和远程连接
- php 内存池,内存详解: 详解PHP内存池中的存储层_php
- python库批量安装的方法
- 拆t460拆机图解_ThinkPad T460P评测,二楼附ThinkPad T460P拆机图
- 【论文阅读】2018-基于深度学习的网络流量分类及异常检测方法研究_王伟
- EasyRecovery易恢复15免费数据恢复软件功能介绍
- 微信字号调整问题 html,解决h5 开发 ,设置手机字体大小微信设置字体大小 页面变形问题...
- LeetCode 227. 基本计算器 II 【c++/java详细题解】
- Java编写五线谱上的音符_五线谱音符(五线谱1234567表示图)
- 【JS从入门到精通】09-数组
- excel 显示 html代码,excel转成html显示
- 蓝鲸作业平台:搞定与脚本相关的一切
- 亚马逊获20亿美元信用额度:有助新业务投资