flex-shrink默认值
时间: 2023-12-12 15:32:58 浏览: 263
CSS3 Flexbox中flex-shrink属性的用法示例介绍
根据提供的引用内容,当`flex-shrink`属性没有被设置时,它的默认值为`1`,表示项目将缩小以适应容器。如果所有项目的`flex-shrink`属性都被设置为`0`,则空间不足时,项目也不会缩小。下面是一个例子:
```html
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
```
```css
.container {
display: flex;
width: 300px;
height: 100px;
background-color: #eee;
}
.item {
flex: 1;
border: 1px solid #333;
}
.item1 {
flex-shrink: 0;
}
```
在上面的例子中,`.item1`的`flex-shrink`属性被设置为`0`,表示它不会缩小以适应容器。其他项目的`flex-shrink`属性都使用默认值`1`,表示它们会缩小以适应容器。因此,当容器的宽度小于`300px`时,`.item2`和`.item3`会缩小以适应容器,而`.item1`保持不变。
阅读全文