Specifies the display behavior of an element.
The display property defines the display type of an element, which determines how it participates in the layout flow. It controls both the outer display type (how the element interacts with its siblings) and the inner display type (how its children are laid out).
Block elements take up the full width available and start on a new line. Inline elements only take up as much width as necessary and do not start on a new line. Flex and grid create flexible and grid-based layouts respectively. None removes the element from the layout entirely.
Modern CSS also supports multi-keyword syntax like display: inline flex to separately specify the outer and inner display types.
| Name | Description | Optional |
|---|---|---|
value |
Common values: block, inline, inline-block, flex, inline-flex, grid, inline-grid, none, contents. | No |
.flex-container {
display: flex;
}
.hidden {
display: none;
}