CSS.3: Flexbox

Search…

CSS.3: Flexbox

Introduction
​Flexbox is an alternative and often more convenient system for CSS layout.
Also see the section on column layouts using flexbox here.​
Distributing Boxes
One of best features of flexbox is it's ability to distribute boxes across the available space in intuitive ways. It's very easy to visually explain the ways that flexbox will do this.
Align Content
Align Items
Justify Content
Exercises
Position and Distribute Elements Using Flexbox
​https://flexboxfroggy.com/​
Don't worry too much about the end sections of the exercise. We won't be using things like order very often.
Further Reading
Game that teaches flexbox: https://geddski.teachable.com/p/flexbox-zombies​

CSS.2.8: Float

CSS.3.1: Flexbox Layout

Last modified 5mo ago

Copy link

On this page

Introduction

Distributing Boxes

Align Content

Align Items

Justify Content

Exercises

Position and Distribute Elements Using Flexbox