Display settings

Adjust display settings to determine the fundamental layout behavior of an element.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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.

In this lesson, you’ll learn about each display setting in the Style panel > Layout section:

  1. Block
  2. Flex
  3. Grid
  4. Inline-block
  5. Inline-flex
  6. Inline-grid
  7. Inline
  8. None

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.

Note: When using inline-block, whitespace in HTML becomes visual space in the site design. Learn how to manage whitespace between inline-block elements.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top