CSS Display - CSS: Cascading Style Sheets 编辑

CSS Display is a module of CSS that defines how the CSS formatting box tree is generated from the document element tree and defines properties controlling it.

Reference

CSS properties

• display

CSS data types

• <display-outside>
• <display-inside>
• <display-listitem>
• <display-box>
• <display-internal>
• <display-legacy>

Guides

CSS Flow Layout (display: block, display: inline)

• Block and Inline Layout in Normal Flow
• Flow Layout and Overflow
• Flow Layout and Writing Modes
• Formatting Contexts Explained
• In Flow and Out of Flow

display: flex

• Basic concepts of flexbox
• Aligning Items in a Flex Container
• Controlling Ratios of Flex Items Along the Main Axis
• Cross-browser Flexbox mixins
• Mastering Wrapping of Flex Items
• Ordering Flex Items
• Relationship of flexbox to other layout methods
• Backwards Compatibility of Flexbox
• Typical use cases of Flexbox

display: grid

• Basic Concepts of Grid Layout
• Relationship to other layout methods
• Line-based placement
• Grid template areas
• Layout using named grid lines
• Auto-placement in grid layout
• Box alignment in grid layout
• Grids, logical values and writing modes
• CSS Grid Layout and Accessibility
• CSS Grid Layout and Progressive Enhancement
• Realizing common layouts using grids

Specifications

Specification	Status	Comment
CSS Display Module Level 3 The definition of 'display' in that specification.	Candidate Recommendation	Added run-in, flow, flow-root, contents and multi-keyword values.
CSS Level 2 (Revision 1) The definition of 'display' in that specification.	Recommendation	Added the table model values and inline-block.
CSS Level 1 The definition of 'display' in that specification.	Recommendation	Initial definition. Basic values: none, block, inline and list-item.

In addition to the CSS Display Specification Level 3, further specifications define the behavior of various values of display.

Browser compatibility

BCD tables only load in the browser

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.