首先要知道 flex:1是一个复合属性 是 flex-grow,flex-shrink,flex-basis简写
flex-grow:1 表示当父盒子的宽度比所以盒子加在一起的宽度还要大的时候 加了flex-grow:1的盒子会自动分配多余的空间。如果给两个及以上的盒子加这个属性 那么他们会平分剩余空间。
<style>
.context {
width: 800px;
height: 300px;
border: 1px solid blue;
display: flex;
}
.item1 {
width: 200px;
height: 300px;
background-color: pink;
}
.item2 {
width: 200px;
height: 300px;
background-color: green;
}
.item3 {
width: 200px;
height: 300px;
background-color: red;
flex-grow: 1;
}
</style>
</head>
<body>
<div class="context">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
flex-shrink:1 表示当父盒子的宽度比所以盒子加在一起的宽度要小的时候(也就是放不下), 加了flex-shrink:1 的盒子会自动减去超出的宽度,如果给两个及以上的盒子加这个属性 那么他们会平均分摊多余的空间。
flex-basis:0% 表示flex布局的时候,盒子的宽度会从0开始计算,不会受原本设置的width所影响!