Adjust display settings to determine the fundamental layout behavior of an element.
Display settings control the layout behavior of child elements inside a parent element. Using different display settings, you can control layout in 1 or 2 dimensions and control how elements are displayed in relation to each other.
Block
Block is the default display setting for most elements. Each child element in a block parent element starts on a new line and takes up the full width of its parent element unless a custom width is set.
Flex
Flexbox arranges direct children elements in 1 dimension — either horizontally or vertically. You can customize the direction in which the direct children stack, how they are aligned and justified within the parent element, if there’s a gap between them, and if they wrap to the next line.
When you create a flex parent element, all direct children of that parent element become flex children. You can override flex child layout settings (e.g., size, alignment, order) in the Flex child settings.
Grid
Grid arranges direct children in 2 dimensions — both horizontally and vertically — in columns and rows. You can customize how the direct children are positioned, aligned, and distributed within the grid, and add gaps between columns and rows. You can override grid child layout settings (i.e., position, spans, alignment, justification, and order) in the Grid child settings.
When determining grid sizing, you can use the FR unit — which automatically calculates row and column space while adjusting for gaps — to create fluid grids.
Inline-block
Child elements in an inline-block parent element are arranged side-by-side, and their width is determined by the content inside. Children wrap when the content hits the boundary of the parent element.
Inline-flex
Inline-flex displays an element as an inline-level flex container. Child elements in an inline-flex parent are arranged according to the flexbox model. In other words, the flex container becomes an inline element, while its children are laid out as flex items.
Inline-grid
Inline-grid displays an element as an inline-level grid container. Child elements in an inline-grid parent are arranged according to the grid model. Similar to inline-flex, inline-grid combines the inline-level behavior of the parent element with the flexibility of grid layout for its children.
Inline
Inline is the default display setting for any text content inside an element. You can change the layout of an inline element by changing its margins and padding, but you can’t change its width or height.
None
You can use the None display setting to hide an element completely. Elements set to none aren’t rendered by the browser, which can be handy for altering how content displays on mobile devices. Elements set to none are also removed from the accessibility tree, making the element and its children unavailable to assistive technology like screen readers.