flex布局中flex-basis|flex-grow|flex-shrink
flex布局中flex-basis|flex-grow|flex-shrink
整个才是正确的算法
flex-basis(基准值)
可以设置flex布局中容器的宽度,如果同时存在width属性,将把它给覆盖!
它也是计算flex-grow和flex-shrink的基准值,默认值是auto;
flex-grow(扩展比例)
当flex-item的总宽度小于容器时,flex-grow设置为0(默认值),那么他将不安比例来均分剩余的空间;
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.flex-container{
width:400px;
background:red;
display:flex;
/*
总的空间空间长度400px
flex-item:100+100=200
child1分得的空间:=(1/3)*200=66.7
child1最终的宽度:=flex-basis+66.7=166.666666666(近似值) 同理可以计算 child2的值:
*/
}
.flex-item:nth-child(1){
flex-basis:100px;/*flex-basis将覆盖width的属性值滴呀*/
background:black;
width:200px;
flex-grow:1;
}
.flex-item:nth-child(2){
flex-basis:100px;
background:green;
flex-grow:2;
}
</style>
</head> <body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
</body>
</html>
效果:
flex-shrink(收缩比例)
默认值为1;(ps:收缩比例的算法和扩展算法是不一样的呢!)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.flex-container{
width:400px;
background:red;
display:flex;
border:1px solid red;
/*
超出的空间:400-(400+200)=-200;
child要减去的空间:(1/3)*200=66.66
最总的空间值:400-66.6=333.4(这种算法是错误滴呀) 正确的算法:
超出空间:400-(400+200)=-200;
加权总和:400*1+200*2=800;
child1被移除的比例:400*1/800*200=100
child1的最终宽度:400-100=300 同理可以求child2 */
}
.flex-item:nth-child(1){
flex-basis:400px;/*flex-basis将覆盖width的属性值滴呀*/
background:black;
flex-shrink:1;
}
.flex-item:nth-child(2){
flex-basis:200px;
background:green;
flex-shrink:2;
}
</style>
</head> <body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
</div>
</body>
</html>
收缩前后对比:
flex:flex-grow | flex-shrink | flex-basis
默认值:0 1 auto;
无论flex-item被填充的多款,只要我们设置
.flex-item:nth-child(1){flex:1}
.flex-item:nth-child(2){flex:2}
.flex-item:nth-child(1){flex:1}
它是将整个容器分成:1:2:1了,
如果我们这样设置:
.flex-item{flex:1},空间将均分,是整个容器空间,而不是多余的空间;
如果你加上了flex-basis,那么计算就更为复杂!
flex布局中flex-basis|flex-grow|flex-shrink的更多相关文章
- flex布局中flex-grow与flex-shrink的计算方式
CSS 中的 Flex(弹性布局) 可以很灵活的控制网页的布局,其中决定 Flex 布局内项目宽度/高度的是三个属性: flex-basis, flex-grow, flex-shrink. flex ...
- svg矢量图在flex布局中样式扭曲的问题
问题机型 小米5 华为nova 其他未知的可能机型 问题描述 利用flex 布局的一行中, 左一样式: -webkit-box-flex: 0; flex: 0 1 auto; 左二样式: -webk ...
- flex布局中transform出错
在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位 动画结束后位置正常: 修复代码只需要posit ...
- 关于flex布局中的兼容性问题
这几天在做项目中用到了flex布局,但是在测试的过程中发现他的兼容性实在是太差了,仅仅用到水平和垂直居中的样式,没想到兼容性代码就写了好几行. display:flex; display:-webki ...
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- flex布局中父容器属性部分演示效果
如图可见flex的属性分为父容器和子容器的属性共12个.关于这些属性具体代表什么意思,网上有很多教程的文章,自觉不能写得比别人更好,所以这里主要写了一些例子关于父容器属性效果的演示,希望可以帮助大家理 ...
- 微信小程序-flex布局中align-items和align-self区别
首先看看菜鸟教程中关于align-items和align-self的定义 align-items:align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式.(对 ...
- flex布局中flex-shrink的计算规则
下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> ...
随机推荐
- COJ978 WZJ的数据结构(负二十二)
试题描述 输入两个正整数N.K,以及N个整数Ai,求第K小数. 输入 第一行为两个正整数N.K.第二行为N个正整数Ai. 输出 输出第K小数. 输入示例 5 41 2 3 3 5 输出示例 3 其他说 ...
- <!--[if IE]>….<![endif]--> (<!--[if !IE]>||<![endif]-->)的用法
1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> 2. <!--[if IE]> 所有的IE可识别 ...
- _jobdu_1002
/************************************************************************/ /* 题目1002:Grading 时间限制:1 ...
- IOS 开发的官方文档链接
下面这些文章都是苹果官方的开发文档,非常有用: iOS Developer Library https://developer.apple.com/library/ios/navigation/ 总入 ...
- 虚拟机下CentOS找不到网卡eth0的解决方法
1. vi /etc/sysconfig/network-scripts/ifcfg-eth0 2. 将其中的ONBOOT属性改成yes即可 2015-8-3更新: 今天发现通过VirtualBo ...
- 【iM_VGA模块】运行 ucgui 演示!
挂在 iCore2 双核心板上的 VGA模块,跑 ucgui DEMO 演示.大家看看! ============================== 技术论坛:http://www.eeschool ...
- 开源top100
1.SwitchyOmega 项目简介:SwitchyOmega 是 SwitchySharp 的新版本.这是一个 Chrome 浏览器用来切换不同代理的插件.SwitchyOmega 初次安装时会检 ...
- HTML: margin詳解
margin:10px; 設置塊元素的上,右,下,左方向的值同爲10px margin:10px 30px; 設置塊元素的上和下爲10px,左和右爲30px; margin:10px 20px 30p ...
- 去除字符串中空格的方法(2016.1.12P141-2)
// forif来处理空格 // 方法一 String str = " ww sse rr"; String str1;// 定义一个中间变量 String str2 = &quo ...
- Pentium II paging mechanism
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION To understand the str ...