width和flex-basis的区别
2020-12-02 本文已影响0人
Frank_Fang
<!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>
.box {
display: flex;
width: 800px;
/* height: 100px; */
margin-bottom: 40px;
border: 1px solid black;
}
.item:nth-child(1) {
background-color: red;
}
.item:nth-child(2) {
background-color: orange;
}
.item:nth-child(3) {
background-color: yellow;
}
.item:nth-child(4) {
background-color: green;
}
.item:nth-child(5) {
background-color: cyan;
}
.item:nth-child(6) {
background-color: blue;
}
.item:nth-child(7) {
background-color: purple;
}
.box1 .item {
flex: 1;
}
.box2 .item {
flex: auto;
}
</style>
</head>
<body>
<h3>flex-basis和width的区别</h3>
<ol>
<li>flex-basis优先级高于width或height（如果flex-direction: column时），但仍然受限于min-width和max-width；</li>
<li>flex: 1(即flex-grow:1;flex-shrink:1;flex-basis:0%;)和flex: auto(即flex-grow:1;flex-shrink:1;flex-basis:auto)的区别是：前者忽略自身内容宽度强制等分；后者以内容为前提再等分剩余空间。</li>
</ol>
<p>flex-basis: 0%的效果：</p>
<div class="box box1">
<div class="item">这是第1个</div>
<div class="item">第2个的内容比较长的话，是这样的效果</div>
<div class="item">这是第3个</div>
<div class="item">这是第4个</div>
</div>
<p>flex-basis: auto的效果：</p>
<div class="box box2">
<div class="item">这是第1个</div>
<div class="item">第2个的内容比较长的话，是这样的效果</div>
<div class="item">这是第3个</div>
<div class="item">这是第4个</div>
</div>
</body>
</html>
