flex

译者：这句其实有个坑，Example不要随便译成示例啊亲

总结

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

更多属性和定义请参见 使用CSS Flexible boxes

语法

/* 0 0 auto */
flex: none;

/* 单值，没有单位的数字，是flex-grow */
flex: 2;

/* 单值，有单位的，宽、高，是flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;

/* 两个值：flex-grow | flex-basis */
flex: 1 30px;

/* 两个值：flex-grow | flex-shrink */
flex: 2 2;

/* 三个值：flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;

/* 全局值 */
flex: inherit;
flex: initial;
flex: unset;

Values

<'flex-grow'>

定义flex item的flex-grow属性。 详细内容请参见 <number>。 负值无效。 默认值为1。

<'flex-shrink'>

定义flex item的flex-shrink属性. 详细内容请参见 <number>。 负值无效。 默认值为1。

<'flex-basis'>

定义flex item的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 raw box)</div>
    <div class="raw-item" id="raw">Raw box</div>
</div>

var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
	raw.style.display = raw.style.display == "none" ? "block" : "none";
});

#flex-container {
	width: 100%;
	font-family: Consolas, Arial, sans-serif;
}

#flex-container > div {
	border: 1px solid #f00;
	padding: 1rem;
}

#flex-container > .raw-item {
	border: 1px solid #000;
}

结果

规范

浏览器兼容性

^[1] 在 Firefox 18 和 19激活flexbox, 用户需要把about:config preference的 "layout.css.flexbox.enabled" 改为true.

^[2] Firefox 28开始支持Multi-line flexbox .

^[3] Internet Explorer 10-11 (非12+)中会忽略flex中的flex-basis部分所使用的calc()。可以用详细方法带题简写方法来解决这个问题。更多信息参见Flexbug #8。

^[4] Internet Explorer 10-11 (非12+)中一个flex在flex-basis 部分中使用无单位值会被认为语法无效，并被忽略。解决办法是在flex的flex-basis 部分中一直使用单位。更多信息参见 Flexbug #4 。

参见

• 使用CSS flexible boxes