A deep dive into Flexbox and Grid

🇲🇾 👾 🏀 🚲 🖌️ 👟 💻 🖊️ 🎙 🐈‍⬛ 🧗 🏳️‍🌈

@hj_chen

Screens, screens, screens

A range of screen sizes — Image source: Inch Calculator

I know that CSS is not everyone's cup of tea, and I'm not here to tell you to love CSS as much as I do. But regardless of your FEELINGS about CSS, if you happen to work on the frontend of the web, odds are you will still have to cross paths with CSS somehow.

Again, you don't have to love it, but I'm here to share with you that it is now easier than before to build layouts that are suitable for the web, which is a medium that is quite special. If you think about it, there are not that many places where something you design is almost never viewed in exactly the same way.

Technology evolves very fast, I know, but as of now, most web interactions involve a screen. And these screens can be as small as a watch-face or as large as a 70-inch super HDTV. And you, the developer or designer or creator, can't really control this.

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

When you set the display property of a box to flex, it creates a flex formatting context for its immediate children. Elements in a flex formatting context have a different set of behaviours from those in block or inline formatting contexts.

Flex formatting context

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

View demo

No actual grid

Boxies aligning because they are the same width

Boxies stop being aligned along columns once they are uneven widths

But as nice as flexbox is, there is still a limitation. Or maybe its more accurate to say, it is something that flexbox was not meant to do. And that is to create actual grids that recognise an x and y axis.

All other layout models on the web only provide control in a single dimension. Elements in every layout model are laid out one after another. And when we force them to be the same width, they naturally just line up in a grid. However, each element has no idea of its own position in relation to whatever is perpendicular to the flow direction.

Grid systems built on these single dimension layout models rely on math to get items to line up neatly in rows and columns. This is a large reason why there were numerous grid libraries that would do the math for you and provide you the appropriate CSS classes to apply to your elements instead.

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)	block containers, flex containers and grid containers
`align-content`	cross/block	content within element (effectively adjusts padding)	block containers, flex containers and grid containers
`justify-items`	inline	items inside box (controls child items)	block containers and grid containers
`align-items`	cross/block	items inside box (controls child items)	flex-containers and grid-containers
`justify-self`	inline	element within parent (effectively adjusts margins)	block-level boxes, absolutely-positioned boxes and grid items
`align-self`	cross/block	element within parent (effectively adjusts margins)	absolutely-positioned boxes, flex items and grid items

Can we put it all together?

View demo

Thank you!

https://chenhuijing.com

@hj_chen

@huijing

Font is Fengardo Neue by Loïc Sander.

A deep dive into Flexbox and Grid

Screens, screens, screens

Layout technique: float

Layout technique: inline-block

The parent-child relationship

Layout technique: flex

Flex formatting context

Flexbox devtools

The flex property

Sizing in flexbox

Flex directions

No actual grid

Real two-dimensional awareness

Layout technique: grid

A better way of building grids

The magic sauce

Box alignment properties

Can we put it all together?

Thank you!

Layout technique: `float`

Layout technique: `inline-block`

Layout technique: `flex`

The `flex` property

Layout technique: `grid`