文章目录
- 1.flex:1
- 2.flex-grow
- 3.flex-shrink
- 4.flex-basis
1.flex:1
flex：1，其实就是
flex-grow:1;flex-shrink:1;flex-basis:0%这三个属性的简写
2.flex-grow
MDN上的描述
这个属性规定了 flex-grow 项在 flex 容器中分配剩余空间的相对比例。 主尺寸是项的宽度或高度，这取决于flex-direction值。
剩余空间是 flex 容器的大小减去所有 flex 项的大小加起来的大小。如果所有的兄弟项目都有相同的 flex-grow 系数，那么所有的项目将剩余空间按相同比例分配，否则将根据不同的 flex-grow 定义的比例进行分配。
- 属性值：
负值无效，默认为 0 - flex-grow MDN链接
- 个人理解就是，先让内容渲染出来，然后计算
剩余空间有多少。按照 有flex-grow 属性的比例，动态设置 当前DOM 的宽度 - 公式就是：
原始宽度 + （剩余空间 / 总共分成多少份 * 当前元素所占 分数）
如果，
.one设置宽度为200px ，剩下的让.two .three按照比例分，.two设置 flex-grow: 3; .three 设置 flex-grow: 1;
如果屏幕宽度是
1000px(因为没有设置容器宽度，所以默认就是屏幕宽度)，不设置flex-grow的话，two 宽度默认是 61 （后面还要小数，方便计算默认取整），three 宽度默认是 86（后面还要小数，方便计算默认取整）
那么剩余空间就是1000-200-61-86,就是 653，那么 要分成 3+1 份，每一份就是 163.25,
那么 two的宽度就是 61+(163.253) = 550.75
three的宽度就是 86+(163.251) = 249.25
在浏览器上调试，确实也是这个数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
/* 声明一个容器 */
display: flex;
}
.one {
background: #19CAAD;
}
.two {
background: #8CC7B5;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
.one {
width: 200px;
}
.two {
/* flex: 1; */
/* flex-basis: 200px; */
flex-grow: 3;
}
.three {
/* flex-basis: 200px; */
flex-grow: 1;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<!-- <div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div> -->
</div>
</body>
</html>
3.flex-shrink
MDN上的描述
flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
- 属性值：
负值无效，默认值为 1 - flex-shrink MDN 链接
- 公式就是：
父元素原始宽度 * (原始宽度 / 所有项原始宽度总和)
如果，.one 、.three 宽度设置为
200px，.two 宽度设置为：300px
如果 ，容器宽度是
500px， .one、.two、.three 每个都设置flex-shrink:1（也可以不设置因为默认值就是 1）
.one 的宽度就是 500 * (200 / 700) ≈ 142
.two 的宽度就是 500 * (300 / 700) ≈ 214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrapper {
/* 声明一个容器 */
margin: 100px 0 0 100px;
display: flex;
/* width: 1000px; */
width: 500px;
/* border: 1px solid red; */
}
.one {
background: #19CAAD;
}
.two {
background: #8CC7B5;
}
.three {
background: #D1BA74;
}
.four {
background: #BEE7E9;
}
.five {
background: #E6CEAC;
}
.six {
background: #ECAD9E;
}
.item {
text-align: center;
font-size: 200%;
color: #fff;
}
.one {
width: 200px;
}
.two {
width: 300px;
}
.three {
width: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one item">One</div>
<div class="two item">Two</div>
<div class="three item">Three</div>
<!-- <div class="four item">Four</div>
<div class="five item">Five</div>
<div class="six item">Six</div> -->
</div>
</body>
</html>
4.flex-basis
MDN上的描述
CSS 属性 flex-basis 指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 改变盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。
- 属性值：content | <‘width’> （即：可以百分比，也可以具体的数）
默认值是 auto - flex-basis MDN链接
