MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

CSS flex 是一个简写属性,它具有定义一个可伸缩项目的能力。flex 元素可以根据他们的 flex-grow 因子拉伸以填充可用空间,或根据他们的 flex-shrink 因子收缩以防止溢出。

初始值as each of the properties of the shorthand:
适用元素flex items, including in-flow pseudo-elements
是否是继承属性
适用媒体visual
计算值as each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
正规顺序order of appearance in the formal grammar of the values

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

语法

/* 0 0 auto */
flex: none;

/* One value, unitless number: flex-grow */
flex: 2;

/* One value, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* Global values */
flex: inherit;
flex: initial;
flex: unset;

取值

<'flex-grow'>
定义 flex 元素的 flex-grow 属性,详见 <number>。默认值为 1,负值无效。
<'flex-shrink'>
定义 flex 元素的 flex-shrink 属性,详见 <number>。默认值为 1,负值无效。
<'flex-basis'>
定义 flex 元素的 flex-basis 属性。任何可用于 width 和 height 的值都可接受。若值为0,则必须加上单位,以免被视作伸缩性。 默认值为0%。
none
该关键字等于 0 0 auto.

正式语法

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Example

#flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
}

#flex-container > .flex-item {
	-webkit-flex: auto;
	flex: auto;
}

#flex-container > .raw-item {
	width: 5rem;
}
<div id="flex-container">
    <div class="flex-item" id="flex">Flex box (click to toggle row box)</div>
    <div class="raw-item" id="raw">Row box</div>
</div>

Result

规范

Specification Status Comment
CSS Flexible Box Layout Module
flex
Candidate Recommendation Initial definition

浏览器兼容性

Feature Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
Basic support 18.0 (18.0)[1]
20.0 (20.0)
28.0 (28.0)[2]
21.0-webkit
29.0
(Yes) 10.0-ms[3]
11.0[3]
12.10

6.1-webkit
9.0

Feature Firefox Mobile (Gecko) Android Edge IE Phone Opera Mobile Safari Mobile
Basic support ? 4.4 (Yes) 11 12.10 7.1-webkit

[1] In Gecko 18.0 (Firefox 18.0 / Thunderbird 18.0 / SeaMonkey 2.15) and 19.0 (Firefox 19.0 / Thunderbird 19.0 / SeaMonkey 2.16) flexbox support is hidden behind the about:config preference layout.css.flexbox.enabled, defaulting to false.

[2] Multi-line flexbox is supported since Gecko 28.0 (Firefox 28.0 / Thunderbird 28.0 / SeaMonkey 2.25).

In addition to the unprefixed support, Gecko 48.0 (Firefox 48.0 / Thunderbird 48.0 / SeaMonkey 2.45) 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 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[3] Internet Explorer 10-11 (but not 12+) ignores uses of calc() in the flex-basis part of the flex syntax. This can be worked around by using the longhand properties instead of the shorthand. See Flexbug #8 for more info. Furthermore a flex declaration with a unitless value in its flex-basis part is considered syntactically invalid in those versions and will thus be ignored. A workaround is to always include a unit in the flex-basis part of the flex shorthand value. See Flexbug #4 for more info.

参见

文档标签和贡献者

 最后编辑者: Joyee,