Flex布局（三：Flex计算规则）
前⾔
flex计算规则
（⼀）基本概念
与弹性盒⼦计算相关的属性有：
margin：外边距
flex-grow：定义项⽬的放⼤⽐例，默认为0
flex-shrink：定义项⽬的缩⼩⽐例，默认为1
flex-basis：定义了在分配多余空间之前，项⽬占据的主轴空间（main size）。
flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
（⼆）当⼦盒⼦⼩于⽗容器
flex容器每⼀⾏的宽度 = 每个⼦容器的宽度 + ⼦元素对应轴的margin值
flex-grow（⼦盒⼦的伸展值）
flex-grow申明的值为0，不出现伸展的情况
flex-grow申明的值不为0，且⼦盒⼦的flex-basis(或width)值之和 < 容器的padding的左边界到右边界的值。那么⼦盒⼦会根据申明的flex-grow值去分配剩余的空间。
现在我们举个例⼦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.container {
display: flex;
width: 400px;
}
.container > div {
height: 40px;
}
.first {
flex: 1 0 0;
background-color: red;
}
.
second {
flex: 2 0 0;
background-color: blue;
margin: 0 50px;
}
.third {
flex: 3 0 0;
background-color: yellow;
}
</style>
</head>
<body>
<div class='container'>
<div class='first'></div>
<div class='second'></div>
<div class='third'></div>
</div>
</body>
</html>
上⾯代码中，我们定义了外层容器width为400px，但是第⼆个margin为100px。现在flex-basis 属性值为0, 剩下空间为300px。则根据每个盒⼦flex-grow 属性值及其权重来分配剩余空间
.first宽度 300 *（1/6） = 50px
.second宽度 300 * (2/6) = 100px
.third 宽度 300 *（3/6） = 150
（⼆）当⼦盒⼦超过⽗容器
flex-basis（⼦盒⼦的基准值）
可以代替申明width属性
同时声明width属性和flex-basis属性时，会以flex-basis的值来计算
当flex-basis属性值为0，在width有申明的情况下以width来计，width没有的申明的话，则按其内容来计。
flex-shrink（⼦盒⼦的缩⼩值）
当flex-shirk的值不为0，且⼦盒⼦的flex-basis(或width)值之和 > 容器的padding的左边界到右边界的值。那么⼦盒⼦会根据申明的flex-shirk值去缩⼩当前⼦盒⼦的空间。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.container {
display: flex;
width: 200px;
height: 400px;
border: 1px solid #c3c3c3;
}
.first {
flex-basis: 40px;
flex-shrink: 1;
background-color: red;
}
.second {
flex-shrink: 3;
background-color: blue;
width: 200px;
}
.third {
flex-basis: 40px;
flex-shrink: 2;
background-color: yellow;
}
</style>
</head>
<body>
<div class='container'>
<div class='first'></div>
<div class='second'></div>
<div class='third'></div>
</div>
</body>
flex布局详细讲解</html>
上⾯代码， ⽗容器定义宽度200px，因为flex-basis可替代width属性的。
所以，⼦项⽬宽度为 （200+40+40）= 280px，溢出了80px。
⾸先计算加上权重的值：1*40 + 3 * 200 + 2 * 40 = 720 px
.first 需要缩⼩的值：(40 * 1/720) * 80 = 4.44px
.second 需要缩⼩的值：(200 * 3/720) * 80 = 66.67px
.first 需要缩⼩的值：(40 * 2/720) * 80 = 8.89px
那么我们就可以分别得到盒⼦宽度
35.56px 133.33px 31.11px
注意
如果flex-basis的属性未设置，即flex-basis: 0，那么弹性盒⼦计算多余空间或者溢出空间的宽度是依据其width的值，如果width未设置，那么是其内容的宽度
如果同时设置了flex-basis的属性值和width的值，那么将会忽略width的值
flex-basis可设为百分⽐，是相对于祖先申明为display:flex的元素⽽⾔
⼏种长假的flex取值：
flex：1 ->> flex : 1 1 0%;
flex: none ->> flex: 0 0 auto;
flex: auto ->> flex: 1 1 auto;
flex: 0 auto; 或者 flex: initial -->> flex: 0 1 auto; 即为flex的初始值

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。