<display-legacy>
Quick Summary for <display-legacy>
CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.
Code Usage for <display-legacy>
<div class="container">   <div>Flex Item</div>   <div>Flex Item</div> </div>  Not a flex item 
More Details for <display-legacy>

<display-legacy>

CSS 2 used a single-keyword syntax for the display property, requiring separate keywords for block-level and inline-level variants of the same layout mode. This page details those values.

Syntax

Valid <display-legacy> 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 <table> 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.

Examples

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

HTML

<div class="container">   <div>Flex Item</div>   <div>Flex Item</div> </div>  Not a flex item 

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.

.container {   display: inline flex; } 

Specifications

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

Support of inline-block

Support of inline-table

Support of inline-flex

Support of inline-grid

See also

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

Last modified: Feb 22, 2022, by MDN contributors

Select your preferred language English (US)Français日本語Português (do Brasil)中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote

'Dawnie' used to say, "It's really quite simple: Be kind, and the rest takes care of itself. Never do anything that's not kind".


Dawn Atherton
Random CSS Property

translateY()

The translateY() CSS function repositions an element vertically on the 2D plane. Its result is a <transform-function> data type.
translateY() css reference