Understanding Display

A presentation at Web Directions hover by Rachel Andrew

Understanding display

Understanding display

Some things are block things, and some things are inline.

Some things are block things, and some things are inline.

If it didn't, our document would load looking like this.

If it didn't, our document would load looking like this.

Being able to change the value of display is important

Being able to change the value of display is important

How we have taught CSS

How we have taught CSS

display

display

CSS Display Module Level 3

CSS Display Module Level 3

block and inline

block and inline

writing‐mode: vertical‐rl

writing‐mode: vertical‐rl

Normal flow

Normal flow

Layout always returns to normal flow

Layout always returns to normal flow

display: block

display: block

display: inline

display: inline

display: flex

display: flex

Creating a flex formatting context

Creating a flex formatting context

A formatting context

A formatting context

display: flex

display: flex

display: flex

display: flex

justify‐content: space‐between

justify‐content: space‐between

display: inline‐flex

display: inline‐flex

display: grid

display: grid

The value of display

The value of display

Two values of display

Two values of display

display: block flex

display: block flex

display: block flow-root

display: block flow-root

overflow: auto

overflow: auto

display: block flow‐root

display: block flow‐root

display: inline flow-root

display: inline flow-root

Margins

Margins

display: flex

display: flex

Anonymous boxes

Anonymous boxes

Out of flow

Out of flow

Absolute positioning in a grid layout

Absolute positioning in a grid layout

Not generating boxes

Not generating boxes

It's all a value of display

It's all a value of display

subgrid

subgrid

CSS Layout is all about boxes. We know that some boxes are blocks, and others are inline, and we can change the display type of elements by changing the value of the display property. That property holds the key to much more than this, however. It is the foundation on which all layout is built; the core of the inbuilt CSS layout system. Learning Grid Layout, or Flexbox, without understanding Display, leaves you with a wobbly foundation and more questions than answers.

The real question isn’t “Should I use Grid or Flexbox?” but instead, “How do I want these boxes to behave?” Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and knowing how the various formatting contexts behave unlocks margin collapsing and the behavior of items inside grid or flex layout. By the end of the hour, you’ll understand how the display property underpins the layout system we have today, the things coming in the future, and be able to make more informed decisions when deciding how to build any part of your design, big or small.