Equal height layouts with flexbox

Use flexbox to set equal heights for columns — even when each column has different content inside.

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Equal height layouts with flexbox

Use flexbox to set equal heights for columns — even when each column has different content inside.

1 Getting started

Coming soon

1

Intro to the box model 3:04

Intro to the box model

Coming soon

1

Display settings 10:48

Display settings

Coming soon

1

Spacing 6:28

Spacing

Coming soon

1

Size 17:35

Size

Coming soon

1

Position 16:51

Position

Coming soon

1

Flexbox 8:08

Flexbox

Coming soon

1

Center elements with flexbox 1:20

Center elements with flexbox

Coming soon

1

Equal height layouts with flexbox 1:47

Equal height layouts with flexbox

Coming soon

1

Grid 14:15

Grid

Coming soon

1

Flexbox vs grid vs Quick Stack 5:32

Flexbox vs grid vs Quick Stack

Coming soon

1

Enable relative position 1:43

Enable relative position

Coming soon

1

Absolute Positioning 1:43

Absolute Positioning

Coming soon

1

Apply a z-index value 1:49

Apply a z-index value

Coming soon

1

Hide overflowing content 1:49

Hide overflowing content

Coming soon

1

Fixed positioning 1:27

Fixed positioning

Coming soon

Course progress

Assessment

Test your knowledge

Up next

Grid

Use grid to position content within a responsive layout.

Continue to next lesson → Complete course ✓