If you need to organize items in a single row, on a single column, you might prefer using Flexbox over Grid.

Flexbox is one of the two modern layouts systems, along with CSS Grid.

Flexbox is a one-dimensional layout model.

It will control the layout based on a row or on a column, but not rows/columns together at the same time as Grid does.

The main goal of flexbox is to allow items to fill all the space made available by their container, depending on some rules you set.

A flexbox layout is applied to a container by setting the property display to flex:

.container {
  display: flex;

Once you add this to an element, the content inside the element will be aligned using flexbox.

Once you do so, you can use other flexbox properties to set the layout.

Some of those properties apply to the container.

Some other properties apply to each individual item inside the container.

Apply to containerApply to items inside the container

Lessons in this unit:

0: ▶︎ Introduction
1: Align rows or columns
2: Vertical and horizontal alignment
3: Wrap
4: Moving items before / after another one using order
5: Vertical alignment using align-self
6: Grow or shrink an item if necessary
7: DEMO Create a layout using Flexbox
Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. Launching May 21, 2024. Join the waiting list!