在此页

• 句法
• 形式定义
• 形式句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

注意： in case both flex-basis (other than auto ) and width (或 height in case of flex-direction: column ) are set for an element, flex-basis has priority.

句法

/* Specify <'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* Intrinsic sizing keywords */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* Automatically size based on the flex item’s content */
flex-basis: content;
/* Global values */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
					

flex-basis property is specified as either the keyword content 或 <'width'> .

值

<'width'>

An absolute <length> ， <percentage> of the parent flex container's main size property, or the keyword auto . Negative values are invalid. Defaults to auto .

content

Indicates automatic sizing, based on the flex item’s content.

注意： This value was not present in the initial release of Flexible Box Layout, and thus some older implementations will not support it. The equivalent effect can be had by using auto together with a main size ( width or height ) of auto .

History:

• Originally, flex-basis:auto meant "look at my width or height property".
• Then, flex-basis:auto was changed to mean automatic sizing, and "main-size" was introduced as the "look at my width or height property" keyword. It was implemented in bug 1032922 .
• Then, that change was reverted in bug 1093316 , so auto once again means "look at my width or height property"; and a new content keyword is being introduced to trigger automatic sizing. ( bug 1105111 covers adding that keyword).

形式定义

初始值	auto
适用于	flex items, including in-flow pseudo-elements
继承	no
百分比	refer to the flex container's inner main size
计算值	as specified, but with relative lengths converted into absolute lengths
动画类型	a length , percentage or calc();

形式句法

content | <'width'>
					

范例

Setting flex item initial sizes

HTML

<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>
<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
					

CSS

.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.flex {
  background: #6AB6D8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2E86BB;
  color: white;
  font-size: 14px;
  text-align: center;
  position: relative;
}
.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 12px;
}
.flex1 {
  flex-basis: auto;
}
.flex1:after {
  content: 'auto';
}
.flex2 {
  flex-basis: max-content;
}
.flex2:after {
  content: 'max-content';
}
.flex3 {
  flex-basis: min-content;
}
.flex3:after {
  content: 'min-content';
}
.flex4 {
  flex-basis: fit-content;
}
.flex4:after {
  content: 'fit-content';
}
.flex5 {
   flex-basis: content;
}
.flex5:after {
  content: 'content';
}
.flex6 {
  flex-basis: fill;
}
.flex6:after {
  content: 'fill';
}
					

Results

规范

规范	状态	注释
CSS Flexible Box Layout Module The definition of 'flex-basis' in that specification.	候选推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
flex-basis	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 22 注意事项 完整支持 22 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 18 — 28 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 11 注意事项 完整支持 11 注意事项 注意事项 When a non- auto flex-basis is specified, Internet Explorer 10 and 11 always uses a content-box box model to calculate the size of a flex item, even if box-sizing: border-box is applied to the element. See Flexbug #7 for more info.	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 22 注意事项 完整支持 22 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 完整支持 Prefixed Prefixed Implemented with the vendor prefix: -webkit- 完整支持 Prefixed Implemented with the vendor prefix: -webkit- Disabled layout.css.prefixes.webkit preference (needs to be set to true ). To change preferences in Firefox, visit about:config. 不支持 18 — 28 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0
auto	Chrome 完整支持 22	Edge 完整支持 12	Firefox 完整支持 18	IE 完整支持 11	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 ≤37	Chrome Android 完整支持 25	Firefox Android 完整支持 18	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 1.5
content	Chrome 不支持 No	Edge 不支持 12 — 79	Firefox 完整支持 61	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 61	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
max-content	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 66 完整支持 66 完整支持 22 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 66 完整支持 66 完整支持 22 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
min-content	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 66 完整支持 66 完整支持 22 Prefixed Prefixed Implemented with the vendor prefix: -moz-	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 66 完整支持 66 完整支持 22 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• CSS Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Controlling Ratios of flex items along the main axis
• width

元数据

• 最后修改： Aug 17, 2020

相关话题

1. CSS
2. CSS 参考
3. CSS 的灵活框布局
4. 指南

   1. Aligning Items in a Flex Container
   2. Backwards Compatibility of Flexbox
   3. Basic concepts of flexbox
   4. Controlling Ratios of Flex Items Along the Main Axis
   5. Cross-browser Flexbox mixins
   6. Mastering Wrapping of Flex Items
   7. Ordering Flex Items
   8. Relationship of flexbox to other layout methods
   9. Typical use cases of Flexbox
5. 特性

   1. flex
   2. flex-basis
   3. flex-direction
   4. flex-flow
   5. flex-grow
   6. flex-shrink
   7. flex-wrap
   8. order