##如果不使用box-sizing来改变盒模型的话,那么这个属性就决定了flex元素的内容盒(content-box)的宽或者高(取决于主轴方向)的尺寸大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
display: flex;
}
.flex1 {
background: red;
flex: auto;
}
.flex2 {
background: pink;
}
.flex3 {
background: tan;
}
.flex4 {
background: khaki;
}
.flex5 {
background: forestgreen;
}
</style>
</head>
<body>
<div class="container">
<div class="flex flex1">1: flex-basis test</div>
<div class="flex flex2">2: flex-basis test</div>
<div class="flex flex3">3: flex-basis test</div>
<div class="flex flex4">4: flex-basis test</div>
<div class="flex flex5">5: flex-basis test</div>
</ul>
</body>
</html>
复制代码