优先级：min-width > max-width＞ flex-basis ＞ width
flex 属性
flex-grow 子分配父剩余空间 占几份就是数字几
flex-grow：默认0 不增长
flex-shrink: 默认1 等比例缩小
flex-basis: auto 初始值的大小（auto 表示子元素的大小由内容决定） （子元素在分配剩余空间之前的初始大小。）（它可以是一个长度值（如 px、%、em 等），也可以是 auto。）
flex：0 1 auto 即flex-grow: 0, flex-shrink: 1, flex-basis: auto
1. flex-grow （子元素增长几份） 【grow 英文意思为长大】
剩余空间除以所有flex-grow属性之和再乘以flex-grow值
例如：剩余空间：（400-100-100-100）=100 flex-grow属性之和：3+1+1=5
.one为100/5*1=20（即为增长20px）
<style>
.container {
width: 400px;
height: 100px;
display: flex;
border: 1px solid #000;
}
.one {
width: 100px;
height: 100px;
background-color: rgba(168, 127, 127, 0.5);
flex-grow: 1;
}
.two {
width: 100px;
height: 100px;
background-color: rgba(62, 62, 69, 0.5);
flex-grow: 1;
}
.three {
width: 100px;
height: 100px;
background-color: rgba(102, 126, 102, 0.5);
flex-grow: 3;
}
</style>
<body>
<p>father-400px</p>
<div class="container">
<div class="one">初始:1-100px
<br />
(分配之后120)
<br />
flex-grow: 1;
</div>
<div class="two">初始:2-100px
<br />
(分配之后120)
<br />
flex-grow: 1;
</div>
<div class="three">初始:3-100px
<br />
(分配之后160)
<br />
flex-grow: 3;
</div>
</div>
</body>
image.png
2.flex-shrink (子元素收缩几份) 【shrink 英文意思为收缩】
<style>
.container {
width: 300px;
height: 200px;
display: flex;
border: 1px solid #000;
font-size: 10px;
}
.one {
width: 200px;
height: 100%;
background-color: rgba(168, 127, 127, 0.5);
flex-shrink: 0;
}
.two {
width: 100px;
height: 100%;
background-color: rgba(62, 62, 69, 0.5);
flex-shrink: 1;
}
.three {
width: 100px;
height: 100%;
background-color: rgba(102, 126, 102, 0.5);
flex-shrink: 1;
}
</style>
<body>
<p>father-300px</p>
<div class="container">
<div class="one">初始:1-200px
<br />
<br />
(分配后200)
<br />
<br />
flex-shrink: 0;
</div>
<div class="two">初始:2-100px
<br />
<br />
(分配后50)
<br />
<br />
flex-shrink: 1;
</div>
<div class="three">初始:3-100px
<br />
<br />
(分配后50)
<br />
<br />
flex-shrink: 1;
</div>
</div>
</body>
image.png
-
flex-basis （子）
image.png
image.png
<style>
.container {
width: 500px;
height: 200px;
display: flex;
border: 1px solid #000;
font-size: 10px;
}
.one {
width: 100px;
height: 100%;
background-color: rgba(168, 127, 127, 0.5);
}
.two {
width: 100px;
height: 100%;
background-color: rgba(62, 62, 69, 0.5);
flex-grow: 1;
}
.three {
flex-basis: 100px;
height: 100%;
background-color: rgba(102, 126, 102, 0.5);
}
</style>
<body>
<p>father-500px</p>
<div class="container">
<div class="one">初始:1-100px
</div>
<div class="two">初始:2-100px
<br/>
(分配后撑满剩余空间)
<br/>
flex-grow:1 ;
</div>
<div class="three">初始:无
<br/>
(渲染后100px)
<br/>
flex-basis: 100px;
</div>
</div>
</body>
image.png
