flex:1属性是一个简写属性,是以下三个flex-grow、flex-shrink和flex-basis属性的合并写法,下面来分别介绍这三种css属性
flex: 1的作用是同时设置flex-grow: 1、flex-shrink: 1和flex-basis: 0% 全写为flex: 1 1 0% ;
flex: 1 === flex: 1 1 0%
1、flex-grow
flex-grow属性:flex容器有剩余空间时可用,用于分配剩余空间的属性,默认值为0,表示不伸展。
比如:当某个弹性项目的flex-grow属性值为2时,表示该项目的伸展比例是其他flex-grow属性值为1的项目的两倍。这意味着该项目会相对于其他项目获得更多的剩余空间。而flex-grow属性值为0时则默认不伸展。
一个例子:
<style>
.flex{
display: flex;
width: 800px;
border: 1px solid red;
}
.content{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="flex">
<div class="content" style="flex-basis: 50%;">1</div>
<div class="content" style="flex-grow: 0;">2</div>
</div>
</body>
当2的flex-grow为0时表示不伸展,则2不会拉伸铺满整个容器
flex-grow为0
当2的flex-grow不为0时,则默认拉伸铺满整个容器
flex-grow为1
2、flex-shrink
flex-shrink属性:flex容器空间不足时可用,默认值为1,代表当项目空间不足时子item等比例收缩,设置为0时则不会收缩,item会超出容器范围
<style>
.flex{
display: flex;
width: 800px;
border: 1px solid red;
}
.content{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
flex-shrink: 0;/* flex容器空间不足时可用,默认值为1,代表当项目空间不足时子item等比例收缩,设置为0时则不会收缩,item会超出容器范围 */
}
</style>
</head>
<body>
<div class="flex">
<div class="content" style="flex-basis: 50%;">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
</body>
当子item的flex-shrink为0时,则子item若大于父容器剩余空间,则不会收缩
.content的flex-shrink为0 可见超出容器不收缩
flex-shrink为1 子item等比例收缩
.content的flex-shrink:1 可见子item平均分配了剩余空间
3、flex-basis
flex-basis属性:想要平均分配item所占空间时可用,或自定义每个item占多少空间。
例子:可定义每个子item占容器多少空间,如有十个item,则比例可定义为百分之10%,平均分配空间
<style>
.flex{
display: flex;
width: 800px;
border: 1px solid red;
}
.content{
width: 200px;
height: 200px;
background-color: skyblue;
border: 1px solid black;
flex-basis: 20%;
}
</style>
</head>
<body>
<div class="flex">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
</body>
当.content有五个且的flex-basis设置为20%时
可见每个item平均分配空间