在此页

• 要求
• Recipe
• Choices made
• 浏览器兼容性
• 另请参阅
• 相关话题

A navigation pattern where one or more elements are separated from the rest of the navigation items.

要求

A common navigation pattern is to have one element pushed away from the others. We can use Flexbox to achieve this, without needing to make the two sets of items into two separate flex containers.

Recipe

Download this example

Choices made

This pattern combines auto margins with Flexbox to split the items.

An auto margin absorbs all available space in the direction it is applied. This is how centering a block with auto margins works — you have a margin on each side of the block trying to take up all of the space, thus pushing the block into the middle.

In this case the left auto margin takes up any available space and pushes the item over to the right. You could apply the class push to any item in the list.

浏览器兼容性

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

The compatibility table in 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.

Flexbox

更新 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	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0 . 注意事项 Until Firefox 61, flex items that are sized according to their content are sized using fit-content , not max-content . 不支持 18 — 28 Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	IE 完整支持 11 注意事项 完整支持 11 注意事项 注意事项 Internet Explorer 11 ignores uses of calc() 在 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. 注意事项 Internet Explorer 11 considers a unitless value in the flex-basis part to be syntactically invalid (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. 完整支持 10 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -ms- 注意事项 Internet Explorer 10 and 11 ignore uses of calc() 在 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. 注意事项 Internet Explorer 10 and 11 consider a unitless value in the flex-basis part to be syntactically invalid (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.	Opera 完整支持 12.1	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 20 注意事项 完整支持 20 注意事项 注意事项 Since Firefox 28, multi-line flexbox is supported. 注意事项 Before Firefox 32, Firefox wasn't able to animate values starting or stopping at 0 . 注意事项 Until Firefox 61, flex items that are sized according to their content are sized using fit-content, not max-content . 不支持 18 — 28 Disabled Disabled From version 18 until version 28 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true ). To change preferences in Firefox, visit about:config. preference (needs to be set to ). To change preferences in Firefox, visit about:config.	Opera Android 完整支持 12.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

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

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

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

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

另请参阅

• CSS 的灵活框布局

元数据

• 最后修改： Jul 7, 2020

相关话题

1. CSS
2. CSS 参考
3. Layout cookbook
4. 指南

   1. Breadcrumb Navigation
   2. Card
   3. Center an element
   4. Column layouts
   5. Contribute a recipe
   6. Grid wrapper
   7. List group with badges
   8. Pagination
   9. Recipe: Media objects
   10. Split Navigation
   11. Sticky footers