CSS参考手册
灵活的框布局 | Flexible Box Layout
flex-shrink
CSSflex-shrink
属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
flex-shrink: 2;
flex-shrink: 0.6;
/* Global values */
flex-shrink: inherit;
flex-shrink: initial;
flex-shrink: unset;
初始值 |
1 |
---|---|
适用于 |
弹性项目,包括流入的伪元素 |
遗传 |
没有 |
媒体 |
视觉 |
计算值 |
作为指定 |
动画类型 |
一个号码 |
规范的顺序 |
形式语法定义的独特的非模糊顺序 |
见使用CSS柔性盒有关更多属性和信息的信息。
语法
flex-shrink
属性只能是一个 <number>
。
值
<number
>负值是不被允许的。参考<number>
。
形式语法
<number>
例
HTML
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
<p>The width of D and E is less than the others.</p>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
CSS
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 120px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
结果
规范
Specification |
Status |
Comment |
---|---|---|
CSS Flexible Box Layout ModuleThe definition of 'flex-shrink' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
Feature |
Firefox (Gecko) |
Chrome |
Edge |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
18.0 (18.0)1 32.0 (32.0)2 |
21.0-webkit |
(Yes)-webkit (Yes) |
103 |
12.10 |
8.0-webkit |
Feature |
Firefox Mobile (Gecko) |
Android |
Edge |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
18.0 (18.0)1 32.0 (32.0)2 |
? |
(Yes)-webkit (Yes) |
No support |
12.10 |
No support |
灵活的框布局 | Flexible Box Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。