在此页

• 要求
• The recipes
• 浏览器兼容性
• Resources on MDN
• 相关话题

You will often need to create a layout which has a number of columns, and CSS provides several ways to do this. Whether you use Grid, Flexbox or Multi-column layout will depend on what you are trying to achieve, and in this recipe we explore these options.

要求

There are a number of design patterns you might want to achieve with your columns:

• A continuous thread of content broken up into newspaper-style columns.
• A single row of items arranged as columns, with all heights being equal.
• Multiple rows of columns lined up by row and column.

The recipes

You need to choose different layout methods in order to achieve your requirements.

A continuous thread of content — multi-column layout

If you create columns using multi-column layout your text will remain as a continuous stream filling each column in turn. The columns must all be the same size, and you are unable to target an individual column or the content of an individual column.

You can control the gaps between columns with the column-gap property, and add a rule between columns using column-rule .

Download this example

Use multicol when:

• You want your text to display in newspaper-like columns.
• You have a set of small items you want to break into columns.
• You do not need to target individual column boxes for styling.

A single row of items with equal heights — flexbox

Flexbox can be used to break content into columns by setting flex-direction to row , however flexbox targets the elements inside the flex container and will place each direct child into a new column. This is a different behavior to what you saw with multicol.

There is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. Therefore to create gaps between items use a margin.

Download this example

Flexbox can also be used to create layouts where the flex items wrap onto new rows, by setting the flex-wrap property on the container to wrap . These new flex lines will distribute space along that line only — the items in the new line will not line up with items in the line above, as you'll see in the example below. This is why flexbox is described as one-dimensional. It is designed for controlling layout as a row or a column, but not both at the same time.

Download this example

Use flexbox:

• For single rows or columns of items.
• When you want to do alignment on the cross axis after laying out your items.
• When you are happy for wrapped items to share out space along their line only and not line up with items in other lines.

Lining items up in rows and columns — grid layout

If what you want is a layout where items line up in rows and columns then you should choose CSS Grid Layout. Grid Layout works on the direct children of the grid container in a similar way to the manner in which flexbox works on the direct children of the flex container, however with CSS Grid you can line your items up in rows and columns — it is described as two-dimensional.

Download this example

Use Grid:

• For multiple rows or columns of items.
• When you want to be able to align the items on the block and inline axes.
• When you want items to line up in rows and columns.

浏览器兼容性

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.

column-width

更新 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
column-width	Chrome 完整支持 50	Edge 完整支持 12	Firefox 完整支持 50 完整支持 50 不支持 1.5 — 74 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Prior to version 37, multiple columns didn't work with display: table-caption elements.	IE 完整支持 10	Opera 完整支持 11.1	Safari 完整支持 9	WebView Android 完整支持 50	Chrome Android 完整支持 50	Firefox Android 完整支持 50 完整支持 50 完整支持 4 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Prior to version 37, multiple columns didn't work with display: table-caption elements.	Opera Android 完整支持 11.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 5.0
Intrinsic sizes Experimental	Chrome 不支持 No	Edge 不支持 No	Firefox 不支持 No	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

不支持

不支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

见实现注意事项。

见实现注意事项。

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

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

column-rule

更新 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
column-rule	Chrome 完整支持 50	Edge 完整支持 12	Firefox 完整支持 52 完整支持 52 不支持 3.5 — 74 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项 Before Firefox 3, the default value for the normal keyword was 0 and not 1em .	IE 完整支持 10	Opera 完整支持 11.1	Safari 完整支持 9	WebView Android 完整支持 50	Chrome Android 完整支持 50	Firefox Android 完整支持 52 完整支持 52 完整支持 4 Prefixed Prefixed Implemented with the vendor prefix: -moz-	Opera Android 完整支持 11.1	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 5.0

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

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

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

flex

更新 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

图例

完整支持

完整支持

见实现注意事项。

见实现注意事项。

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

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

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

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

flex-wrap

更新 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-wrap	Chrome 完整支持 29	Edge 完整支持 12	Firefox 完整支持 28	IE 部分支持 11 注意事项 部分支持 11 注意事项 注意事项 Partial support due to large number of bugs present. See Flexbugs .	Opera 完整支持 17	Safari 完整支持 9	WebView Android 完整支持 4.4	Chrome Android 完整支持 29	Firefox Android 完整支持 52	Opera Android 完整支持 18	Safari iOS 完整支持 9	Samsung Internet Android 完整支持 2.0

图例

完整支持

完整支持

部分支持

部分支持

见实现注意事项。

见实现注意事项。

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

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

grid-template-columns

更新 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
grid-template-columns	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16 完整支持 16 不支持 12 — 79 Alternate Name Alternate Name Uses the non-standard name: -ms-grid-rows	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 完整支持 10 Alternate Name 完整支持 10 Alternate Name Alternate Name Uses the non-standard name: -ms-grid-columns	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
Animation of tracks	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 66	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 66	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No
fit-content()	Chrome 完整支持 29	Edge 完整支持 16	Firefox 完整支持 51	IE 不支持 No	Opera 完整支持 44	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57	Firefox Android 完整支持 51	Opera Android 完整支持 43	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
minmax()	Chrome 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 29 Disabled Disabled From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
repeat()	Chrome 完整支持 57 完整支持 57 完整支持 38 Disabled Disabled From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Edge 完整支持 16	Firefox 部分支持 57 注意事项 部分支持 57 注意事项 注意事项 repeat(auto-fill, ...) and repeat(auto-fit, ...) only support one repeated column (see bug 1341507 ). 不支持 52 — 57 注意事项 注意事项 calc() doesn't work in repeat() (见 bug 1350069 ). 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 44 完整支持 44 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari 完整支持 10.1	WebView Android 完整支持 57	Chrome Android 完整支持 57 完整支持 57 完整支持 38 Disabled Disabled From version 38: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.	Firefox Android 完整支持 52 完整支持 52 不支持 40 — 59 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 28 Disabled Disabled From version 28: this feature is behind the Enable experimental Web Platform features preference.	Safari iOS 完整支持 10.3	Samsung Internet Android 完整支持 6.0
subgrid	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 71 完整支持 71 完整支持 69 注意事项 Disabled 注意事项 Enabled by default in Firefox Nightly. Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 不支持 No	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持

完整支持

部分支持

部分支持

不支持

不支持

见实现注意事项。

见实现注意事项。

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

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

使用非标名称。

使用非标名称。

Resources on MDN

• Guide to Multi-column Layout
• Guide to Flexbox
• Guide to CSS Grid Layout

元数据

• 最后修改： 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