From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/flex-shrink/index.html | 173 +++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 files/zh-cn/web/css/flex-shrink/index.html (limited to 'files/zh-cn/web/css/flex-shrink') diff --git a/files/zh-cn/web/css/flex-shrink/index.html b/files/zh-cn/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..1f95357a2b --- /dev/null +++ b/files/zh-cn/web/css/flex-shrink/index.html @@ -0,0 +1,173 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Property + - CSS 属性 + - Reference + - 参考 + - 弹性盒 +translation_of: Web/CSS/flex-shrink +--- +
{{ CSSRef}}
+ +

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

+ +
flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Global values */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset
+ +

{{cssinfo}}

+ +

更多属性和定义请参见使用 CSS 弹性盒子

+ +

语法

+ +

flex-shrink 属性只能是一个 <number>。

+ +

取值

+ +
+
<number>
+
负值是不被允许的。参考 {{cssxref("<number>")}}。
+
+

Formal syntax

+ + 
{{csssyntax}}
+
+
+ +

示例

+ +

HTML

+ +
<p>the width of content is 500px, flex-basic of flex item is 120px.</p>
+<p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p>
+<p>the width of D is not the same as A's</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;
+}
+ +

结果

+ +

{{EmbedLiveSample('示例', '500px', '300px', '', 'Web/CSS/flex-shrink')}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

浏览器兼容性

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("32.0")}}[2]		21.0{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		10[3]12.108.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile("18.0")}}[1]
+ {{CompatGeckoMobile("32.0")}}[2]		{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatNo}}12.10{{CompatNo}}
+
+ +

[1] Firefox 仅支持单行 flexbox 直到 Firefox 28版本。To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true.

+ +

In addition to the unprefixed support, Gecko 48.0 {{geckoRelease("48.0")}} added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49.0")}} the preference defaults to true.

+ +

[2] 在 Firefox 32 之前，Gecko不能将动画从0开始或停止在0(Spec,Demo).。

+ +

[3] Internet Explorer 10 使用 0 而不是 1 作为 flex-shrink 属性的初始值。A workaround is to always set an explicit value for flex-shrink. See Flexbug #6 for more info.

+ +

参考

+ + -- cgit v1.2.3-54-g00ecf