flex 增长与收缩
flex:auto 将增长值与收缩值设置为1,基本大小为 auto 。
flex:none. 将增长值与收缩值设置为0,基本大小为 auto 。也就是固定大小。
增长:
基本大小 + 额外空间 *(增长系数 / 增长系数总和)
按比例划分额外空间,然后各自分配。
缩小:
基本大小 – 溢出大小 *(缩小系数 * 基本大小 / 各各缩小系数 * 自身大小 之和)
#container { display: flex; flex-wrap: nowrap; }
flex-shrink: 1并非严格等比缩小,它还会考虑弹性元素本身的大小。
- 容器剩余宽度:-70px
- 缩小因子的分母:1*50 + 1*100 + 1*120 = 270 (1为各元素flex-shrink的值)
- 元素1的缩小因子:1*50/270
- 元素1的缩小宽度为缩小因子乘于容器剩余宽度:1*50/270 * (-70)
- 元素1最后则缩小为:50px + (1*50/270 *(-70)) = 37.03px
均匀增长(直接按设置的比例增长)
将基本大小设置为:0,那么收缩值就不在适用了。
flex:值;或 flex-shrink:0;flex-basis:0;
如:flex:1; flex:2; flex:3. 那么第二个为第一个的2倍宽度,第三个为第一个的3倍宽度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0px;
}
.flexbox-row{
margin: 50px auto;
display: flex;
flex-direction: row;
width: 120px;
height: 320px;
border: 1px #ccc solid;
}
.box1{
flex: 1;
height: 50px;
}
.box2{
flex: 2;
height: 50px;
}
.box3 {
flex: 1.5;
height: 30px;
}
</style>
</head>
<body> <div class="flexbox-row">
<div class="box box1" style="background-color:coral;">A</div>
<div class="box box2" style="background-color:lightblue;">B</div>
<div class="box box3" style="background-color:khaki;">C</div>
</div> </body>
</html>
flex 增长与收缩的更多相关文章
- SQL Server 数据的创建、增长、收缩
第一步: create database Studio on primary (name = 'Studio',filename='E:\DB\Studio.mdf' ...
- CSS3:flex布局应用
想把先前的整理的东西贴出来,怎奈总是有额外事情发生,额,教训电脑要离水杯远点~~ 推荐一本书,<编写可维护的Javascript>这是Nicbolas C.Zakas写的,他的<Ja ...
- 【Taro】363- 玩转 Taro 跨端之 flex 布局篇
Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...
- css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- 聊聊Flexbox布局中的flex的演算法
到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- css属性之flex属性
flex属性 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间.是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性. /* Basic ...
随机推荐
- this指向和apply,call,bind三者的区别
一.前言 this指向,apply,call,bind的区别是一个经典的面试问题,同时在项目中会经常使用到的原生的js方法.同时也是ES5中的众多坑的一个.ES6中可能会极大的避免了this产生的错误 ...
- 【转】asp.net基础-HttpModule
HttpModule是向实现类提供模块初始化和处置事件.当一个HTTP请求到达HttpModule时,整个ASP.NET Framework系统还并没有对这个HTTP请求做任何处理,也就是说此时对于H ...
- Java:基于MD5的文件监听程序
前述和需求说明 和之前写的 Python:基于MD5的文件监听程序 是同样的功能,就不啰嗦了,就是又写了一个java版本的,可以移步 python 版本去看一下,整个的核心思路是一样的.代码已上传Gi ...
- ES 集群上,业务单点如何优化升级?
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! ES 基础 ES 集群 ES 集群上业务优化 一.ES 基础 ...
- CSharpGL(50)使用Assimp加载骨骼动画
CSharpGL(50)使用Assimp加载骨骼动画 在(http://ogldev.atspace.co.uk/www/tutorial38/tutorial38.html)介绍了C++用Asism ...
- GIS之家资源
分享资源之arcgis软件系列 arcgis10.0(arcgis desktop以及arcgis server):下载 arcgis10.1(arcgis desktop以及arcgis serve ...
- 自己手动搭建jenkins教程
下载列表; http://updates.jenkins-ci.org/download/war/ 本次下载: http://updates.jenkins-ci.org/download/war/ ...
- NTSTATUS Values
By combining the NTSTATUS into a single 32-bit numbering space, the following NTSTATUS values are de ...
- 「工具」Aquarelo - 来自意大利的色阶管理工具
Aquarelo是一款小而美的色阶管理工具,由意大利团队开发,包含三个核心功能,可用于色彩管理.色彩搭配等场景. ## 相关参数 * 操作系统:macOS* 工具官网:[Aquarelo for Ma ...
- Storm入门(八)Storm实战常见问题总结(持续更新)
一.本地环境log级别设置问题 storm-core-1.1.0.jar下面有个log4j2.xml文件,默认log级别是info. <configuration monitorInterval ...