A deep dive into Flexbox and Grid

By Chen Hui Jing / @hj_chen

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈
Chen Hui Jing
Slides QR code

Screens, screens, screens

A range of screen sizes
Image source: Inch Calculator

Image credit: Jyotika Sofia Lindqvist

Layout technique: float

Item A

Item B

Item C

Layout technique: inline-block

Item A

Item B

Item C

The parent-child relationship

Diagram showing a container with 3 children elements within

Layout technique: flex

A flex item

Another flex item

Flex items are also flex children
All direct children of the flex container become flex children

Flex formatting context

No margin collapse No floats or clear No vertical-align Absolute positioning still applies

Flexbox devtools

Screenshot of flexbox overlay in Firefox

The flex property

Diagram showing each component of the flex shorthand

Sizing in flexbox

View demo

Flex directions

Diagrams showing the row and column flex directions

View demo

No actual grid

Boxies aligning because they are the same width Boxies stop being aligned along columns once they are uneven widths

Real two-dimensional awareness

Boxies aligning because there are real rows and columns Boxies aligning because there are real rows and columns, even if there are different widths

Layout technique: grid

Item A

Item B

Item C

Item D

Item E

Item F

A better way of building grids

View demo

The magic sauce

No, just kidding. It's just that alignment really ties it all together.

Diagrams of boxies showing how alignment works for flex and grid

Box alignment properties

Property Axis Aligns Applies to
justify-content main/inline

content within element
(effectively adjusts padding)

Content diagram
block containers, flex containers and grid containers
align-content cross/block
justify-items inline

items inside box
(controls child items)

Items diagram
block containers and grid containers
align-items cross/block flex-containers and grid-containers
justify-self inline

element within parent
(effectively adjusts margins)

Self diagram
block-level boxes, absolutely-positioned boxes and grid items
align-self cross/block absolutely-positioned boxes, flex items and grid items

Can we put it all together?

View demo

Thank you!





Font is Fengardo Neue by Loïc Sander.