flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto。
flex-grow
同比放大flex-shrink
同比缩小flex-basis
是flex
元素在主轴方向上的初始大小(来源:MDN)
flex: 1;
相当于
flex: 1, 1, 0%;
我们用一个 demo 看一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
}
.container {
display: flex;
width: 100%;
}
.c1 {
background-color: green;
flex: 1;
}
.c2 {
background-color: red;
flex: 1;
}
.c3 {
background-color: wheat;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="c1">啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</div>
<div class="c2">啦啦啦啦啦啦</div>
<div class="c3">啦</div>
</div>
</html>
打开控制台,可以看到 flex: 1;
是什么的简写:
flex-basis
我们用 demo 可以更直观的看到
<!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>
#main {
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
#main div {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
#main div:nth-of-type(2) {
flex-basis: 100px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">6</div>
<div style="background-color:lightblue;">2</div>
<div style="background-color:khaki;">3</div>
<div style="background-color:pink;">4</div>
<div style="background-color:lightgrey;">5</div>
</div>
</body>
</html>
效果如图:
我们更改一下 css 样式,可以更好理解
#main div {
flex-grow: 1;
flex-shrink: 1;
/* 统一给一个初始值,第二个元素跟其他元素相差80px整 */
flex-basis: 20px;
}
#main div:nth-of-type(2) {
flex-basis: 100px;
}
注意:当一个元素同时设置了 width 和 flex-basis,此时 flex-basis 的优先级更高,以 flex-basis 为准。
本文参考了下面两篇文章: