CSS flex-shrink 属性

CSS flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。


实例

使第二个弹性项目相比其余项目收缩三倍:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #main {
  6. width: 350px;
  7. height: 100px;
  8. border: 1px solid #c3c3c3;
  9. display: flex;
  10. }
  11. #main div {
  12. flex-grow: 1;
  13. flex-shrink: 1;
  14. flex-basis: 100px;
  15. }
  16. #main div:nth-of-type(2) {
  17. flex-shrink: 3;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h2>flex-shrink 属性</h2>
  23. <div id="main">
  24. <div style="background-color:coral;"></div>
  25. <div style="background-color:lightblue;"></div>
  26. <div style="background-color:khaki;"></div>
  27. <div style="background-color:pink;"></div>
  28. <div style="background-color:lightgrey;"></div>
  29. </div>
  30. <p><b>注释:</b>Internet Explorer 10 以及更早的版本不支持 flex-shrink 属性。</p>
  31. </body>
  32. </html>

定义和用法

flex-shrink 属性固定在相同的容器中,项目相对于其余弹性项目的收缩量。

注释:如果元素不是弹性项目,则 flex 属性无效。

默认值:1
继承:
动画制作:支持。请参阅:动画相关属性
版本:CSS3
JavaScript 语法:object.style.flexShrink="5"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
flex-shrink29.021.0 -webkit-11.028.018.0 -moz-9.06.1 -webkit-17.0

CSS 语法

  1. flex-shrink: number|initial|inherit;
属性值
描述
number数字,规定项目相对于其余弹性项目的收缩量。默认值为 1。
initial将此属性设置为其默认值。参阅 initial
inherit从其父元素继承此属性。参阅 inherit

相关页面

CSS3 教程: CSS3 弹性框

CSS 参考手册:flex-basis 属性

CSS 参考手册:flex-direction 属性

CSS 参考手册:flex-flow 属性

CSS 参考手册:flex-grow 属性

CSS 参考手册:flex-wrap 属性

分类导航