收藏
批改状态：合格
老师批语：不错, 继续
上一篇文章讲解了弹性盒子内的弹性元素在主轴上的的排列方式和盒子空间的分布，今天在这里开始讲解弹性盒子的增长因子！话不多说看实例
所有弹性元素不增长，以原始宽度显示，增长因子默认为 “”0“”！
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Flex-grow 设置弹性盒子增长因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 100px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
</style>
</head>
<body>
<h1>Flex-grow 设置弹性元素增长因子</h1>
<p>所有弹性元素不增长，原始宽度显示，增长因子flex-grow: 0;</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
把全部剩余空间分配给第三个弹性元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Flex-grow 设置弹性盒子增长因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 100px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<h1>Flex-grow 设置弹性元素增长因子</h1>
<p>把全部剩余空间分配给第三个弹性元素</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
全部剩余空间按增长因子在不同弹性元素间分配
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Flex-grow 设置弹性盒子增长因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 100px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item:first-of-type {
flex-grow: 1;
}
.container > .item:nth-of-type(2) {
flex-grow: 1.5;
}
.container > .item:last-of-type {
flex-grow: 1;
}
</style>
</head>
<body>
<h1>Flex-grow 设置弹性元素增长因子</h1>
<p>全部剩余空间按增长因子在不同弹性元素间分配</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
友情提示：
增长因子支持小数, 因为是按增长比例分配 ，如：flex-grow: 1.5;
每个弹性元素宽度不同时, 同样适用以上分配规律
增长因子的计算方式：
计算步骤:
1. 获取基本变量 1.1 可分配空间: 550px - (100px + 100px +100px) = 250px 1.2 增长因子: 第一个: 1, 第二个: 1, 第三个: 3 1.3 增长因子之和: 1 + 1 + 3 = 5
2. 计算增长比例 2.1 计算公式: 增长比例 = 增长因子 / 增长因子之和 2.2 第一个元素增长比例: 1 / 5 = 0.2 2.3 第二个元素增长比例: 1 / 5 = 0.2 2.4 第三个元素增长比例: 3 / 5 = 0.6
3. 计算每个元素的增长量 3.1 第一个元素增长量: 250px * 0.2 = 50px 3.2 第二个元素增长量: 250px * 0.2 = 50px 3.3 第三个元素增长量: 250px * 0.6 = 150px
4. 计算每个元素最终宽度 4.1 第一个元素: 100px + 50px = 150px 4.1 第二个元素: 100px + 50px = 150px 4.1 第三个元素: 100px + 150px = 250px
所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-shrink: 设置弹性元素缩减因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 300px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
flex-shrink: 0;
}
</style>
</head>
<body>
<h1>flex-shrink: 设置弹性元素缩减因子</h1>
<p>所有弹性元素不缩减,以原始宽度显示,缩减因子为: 0</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-shrink: 设置弹性元素缩减因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 300px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
flex-shrink: 1;
}
</style>
</head>
<body>
<h1>flex-shrink: 设置弹性元素缩减因子</h1>
<p>所有弹性元素自适应容器宽度且不换行,缩减因子: 1 (默认)</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
当三个弹性元素的缩减因为子不相等时
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-shrink: 设置弹性元素缩减因子 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
width: 300px;
height: auto;
padding: 15px 0;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item:first-of-type {
flex-shrink: 1;
}
.container > .item:nth-of-type(2) {
flex-shrink: 3.5;
}
.container > .item:last-of-type {
flex-shrink: 1;
}
</style>
</head>
<body>
<h1>flex-shrink: 设置弹性元素缩减因子</h1>
<p>当三个弹性元素的缩减因为子不相等时</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
友情提示：
缩减因子也可以是小数,只要大于0就可以
缩减因子计算公式：
计算步骤:1. 获取基本变量 1.1 多余待缩放空间: (250px + 250px +250px) - 550px = 200px 1.2 缩减因子: 第一个: 1, 第二个: 1, 第三个: 1 1.3 增长因子之和: 1 + 1 + 1 = 1
2. 计算缩减比例 2.1 计算公式: 缩减比例 = 缩减因子 / 缩减因子之和 2.2 第一个元素缩减比例: 1 / 3 = 0.3333 2.3 第二个元素缩减比例: 1 / 3 = 0.3333 2.4 第三个元素缩减比例: 1 / 3 = 0.3333
3. 计算每个元素的缩减 3.1 第一个元素缩减: 20px * 0.3333 = 66.666px 3.2 第二个元素缩减: 20px * 0.3333 = 66.666px 3.3 第三个元素缩减: 20px * 0.3333 = 66.666px
4. 计算每个元素最终宽度 4.1 第一个元素: 250px - 66.66px = 183.33px 4.1 第二个元素: 250px - 66.66px = 183.33px 4.1 第三个元素: 250px - 66.66px = 183.33px
经过以上分析可知, 缩减比例是一个相对数,与缩减因子是否是整数无关
/*自动状态下, 将设置权限交给浏览器*/
/*如果元素设置了宽度, 就按自定义宽度显示*/
/*如果元素的宽度也是auto,或者没有定义, 就按内容宽度content显示*/
在未设置弹性元素宽度时, 以内容宽度显示 flex-basis: content;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-basis: 设置弹性元素的基准尺寸 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
height: auto;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
/*在未设置元素宽度时,以内容宽度显示*/
flex-basis: content;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<p>在未设置弹性元素宽度时, 以内容宽度显示</p>
<div class="container">
<div class="item">根据内容</div>
<div class="item">的宽度</div>
<div class="item">显示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
存在自定义元素宽度时,则以该宽度显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-basis: 设置弹性元素的基准尺寸 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
height: auto;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
/*在未设置元素宽度时,以内容宽度显示*/
flex-basis: content;
width: 150px;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<p>存在自定义元素宽度时,则以该宽度显示</p>
<div class="container">
<div class="item">根据内容</div>
<div class="item">的宽度</div>
<div class="item">显示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
自动状态下, 由浏览器根据预设值自行判定flex-basis: auto;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-basis: 设置弹性元素的基准尺寸 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
height: auto;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
/*在未设置元素宽度时,以内容宽度显示*/
flex-basis: auto;
width: 100px;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<p>自动状态下, 由浏览器根据预设值自行判定flex-basis: auto;</p>
<div class="container">
<div class="item">根据内容</div>
<div class="item">的宽度</div>
<div class="item">显示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
当元素存在自定义宽度与基准宽度时, 以基准宽度为准 flex-basis: 80px;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-basis: 设置弹性元素的基准尺寸 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
height: auto;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item{
width: 100px;
flex-basis: 80px;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<p>当元素存在自定义宽度与基准宽度时, 以基准宽度为准 flex-basis: 80px;</p>
<div class="container">
<div class="item">根据内容</div>
<div class="item">的宽度</div>
<div class="item">显示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
元素基准宽度支持百分比设置 flex-basis: 20%;
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> flex-basis: 设置弹性元素的基准尺寸 </title>
<style>
h1 {
padding: 15px;
}
p {
padding: 10px 15px;
}
.container {
width: 600px;
height: auto;
display: flex;
border: 5px dashed #FD482C;
margin-left: 15px;
padding: 5px;
box-sizing: border-box;
}
.container > .item {
height: auto;
background: #FD482C;
border: 1px solid #01AAED;
text-align: center;
color: #FFFFFF;
}
.container > .item:first-of-type {
flex-basis: 20%;
}
.container > .item:nth-of-type(2) {
flex-basis: 20%;
}
.container > .item:last-of-type {
flex-basis: 60%;
}
</style>
</head>
<body>
<h1>flex-basis: 设置弹性元素的基准尺寸</h1>
<p>元素基准宽度支持百分比设置 flex-basis: 20%;</p>
<div class="container">
<div class="item">根据内容</div>
<div class="item">的宽度</div>
<div class="item">显示</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
