david2tdw
commented
4 years ago <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex-basis, width</title>
<style>
.container {
display: flex;
width: 1000px;
height: 100px;
border: 1px solid green;
margin-top: 20px;
}
.item:nth-child(1) {
background-color: yellow;
}
.item:nth-child(2) {
background-color: blue;
}
.item:nth-child(3) {
background-color: #d44e20;
}
.item:nth-child(4) {
background-color: #79d420;
}
.item:nth-child(5) {
background-color: #2c2d2a;
}
.item:nth-child(6) {
background-color: #d420b1;
}
.item:nth-child(7) {
background-color: #20d45c;
}
.item1 {
width: 200px;
}
.item2 {
width: 30px;
flex-basis: 200px;
}
.item3 {
width: 30px;
flex-basis: 200px;
max-width: 100px;
}
.item4 {
flex-basis: 200px;
min-width: 250px;
}
.item5 {
flex-basis: 200px;
}
.item6 {
flex-basis: 200px;
}
.item7 {
flex-basis: 200px;
flex-grow: 1;
}
</style>
</head>
<body>
<p>只设置width宽度，不设置flex-basis （flex-basis:auto;）。每个item的宽度都是200px。</p>
<div class="container">
<div class="item item1"></div>
<div class="item item1"></div>
<div class="item item1"></div>
<div class="item item1"></div>
</div>
<p>同时设置flex-basis和width，flex-basis生效。</p>
<div class="container">
<div class="item item2"></div>
<div class="item item2"></div>
<div class="item item2"></div>
<div class="item item2"></div>
</div>
<p>在设置了flex-basis后，通过max-width属性，限制每一个item的最大宽度。最终flex-basis = 100px</p>
<div class="container">
<div class="item item3"></div>
<div class="item item3"></div>
<div class="item item3"></div>
<div class="item item3"></div>
</div>
<p>在设置了flex-basis后，通过min-width属性，限制每一个item的最小宽度。最终flex-basis = 250px</p>
<div class="container">
<div class="item item4"></div>
<div class="item item4"></div>
<div class="item item4"></div>
<div class="item item4"></div>
</div>
<p>当没有足够空间的时候, 每个item会等比例压缩。最终每个item的宽度为142.86px。</p>
<div class="container">
<div class="item item5"></div>
<div class="item item5"></div>
<div class="item item5"></div>
<div class="item item5"></div>
<div class="item item5"></div>
<div class="item item5"></div>
<div class="item item5"></div>
</div>
<p>当有额外的空间的时候, 默认每个item不会自动拉伸。flex-grow默认值为0.</p>
<div class="container">
<div class="item item6"></div>
<div class="item item6"></div>
</div>
<p>当有额外的空间的时候, 如果设置flex-grow = 1;则会拉伸每个item去填充满整个容器。</p>
<div class="container">
<div class="item item7"></div>
<div class="item item7"></div>
</div>
</body>
</html>
Flex Items的应用准则：
content –> width –> flex-basis (limted by max|min-width) 也就是说，
优先级： flex-basis > width > content
[翻译]Flex Basis与Width的区别