Valid values:

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It is equivalent to inline flow-root.

inline-table

The inline-table value does not have a direct mapping in HTML. It behaves like an HTML

element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

It is equivalent to inline table.

inline-flex

The element behaves like an inline element and lays out its content according to the flexbox model.

It is equivalent to inline flex.

inline-grid

The element behaves like an inline element and lays out its content according to the grid model.

It is equivalent to inline grid.

Formal syntax

 = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid   

Examples

In the below example, we are creating an inline flex container with the legacy keyword inline-flex.

HTML

html

  
Flex Item
  
Flex Item


Not a flex item

CSS

css

.container {
  display: inline-flex;
}

Result

In the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.

css

.container {
  display: inline flex;
}

Specifications

Specification
CSS Display Module Level 3 # typedef-display-legacy

Browser compatibility

css.properties.display.inline-block

css.properties.display.inline-table

css.properties.display.inline-flex

css.properties.display.inline-grid

See also

• display