flex: 1
代表了下面三个值:
flex-grow: 1
flex-shrink: 1
flex-basis: 0%
示例1
容器宽度为400px,设置了display: flex;
容器下面的item1、item2和item3都没有设置宽度,但都设置了flex: 1;
最终结果是三个item均分容器的宽度。
<!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>
.container {
display: flex;
width: 400px;
background-color: pink;
}
.item1 {
flex: 1;
background-color: blue;
}
.item2 {
flex: 1;
background-color: purple;
}
.item3 {
flex: 1;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="item1">这是项目1</div>
<div class="item2">项目2</div>
<div class="item3">项目3</div>
</div>
</body>
</html>