文章内容
2023/4/24 17:48:10,作 者: 黄兵
flex-shrink 如何使用？
flex-shrink 是一个用于指定 Flex 容器中子元素的收缩比例的 CSS 属性。它定义了当容器空间不足以容纳所有子元素时，子元素如何收缩以适应可用空间的比例，以实现弹性布局。
具体来说，flex-shrink 属性可以接受一个非负数值，它表示子元素相对于其他子元素的收缩比例。默认情况下，所有的子元素的 flex-shrink 属性值都为 1，这意味着它们都可以收缩以适应可用空间。
举个例子，如果容器中有三个子元素，其中两个的 flex-shrink 属性为 1，另一个的 flex-shrink 属性为 2，当容器空间不足时，后者将收缩的比前两者更多。
下面是一个示例代码，演示如何使用 flex-shrink 属性：
<div class="container">
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
}
.item {
background-color: gray;
color: white;
padding: 10px;
text-align: center;
}
.item-1 {
flex-shrink: 1;
}
.item-2 {
flex-shrink: 2;
}
.item-3 {
flex-shrink: 1;
}
</style>
<div class="item item-1">Item 1</div>
<div class="item item-2">Item 2</div>
<div class="item item-3">Item 3</div>
</div>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 300px;
}
.item {
background-color: gray;
color: white;
padding: 10px;
text-align: center;
}
.item-1 {
flex-shrink: 1;
}
.item-2 {
flex-shrink: 2;
}
.item-3 {
flex-shrink: 1;
}
</style>
上面的代码将三个子元素放在一个 Flex 容器中，并使用 flex-shrink 属性来指定它们的收缩比例。在这个例子中，我们设置 .item-1 和 .item-3 的 flex-shrink 属性为 1，.item-2 的 flex-shrink 属性为 2。因此，当容器空间不足时，.item-2 将比其他子元素收缩得更多，以适应可用空间。
需要注意的是，flex-shrink 属性仅在容器空间不足时才会生效。如果容器有足够的空间来容纳所有子元素，flex-shrink 属性将不会对子元素进行任何调整。此时可以使用 flex-grow 属性来定义子元素在剩余空间分配时的增长优先级。
其它相关推荐：
5、客户端浏览器版本
评论列表