CSS: Basic steps to Flexbox

In this post I will outline the basic steps when implementing Flexbox into your web design. This will assume a basic knowledge of how CSS and Flexbox works. It’s more of a personal reference.

Credit goes to the course Modern HTML & CSS From The Beginning 2.0 by Brad Traversy.

Step 1: display-flex

The first step is to declare the Flexbox layout by the display:flex property:

display:flex;

Step 2: Determine alignment

By default, the main axis of your Flexbox display will be aligned horizontally in rows:

flex-direction: row;

If you want to align it vertically in columns, you must add:

flex-direction: column;

Step 3: Wrap text

If you want to wrap the containers:

flex-wrap: wrap;

Step 4: Gaps

If you want gaps between the containers:

row-gap: 10px;
column-gap: 10px;

Or:

gap: 10px;

Step 5: Justify content and align items

To change the positioning of the items on the main axis:

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

To change the positioning of the items on the cross axis:

align-items: center;

align-items: flex-end;

align-items: stretch;

align-items: baseline;

NOTE: stretch doesn’t work if you set a height on the flex item

Step 6: Align individual items

If on the rare occasion you want to align individual items, add this to the respective class:

align-self: xxx;

Other useful flex properties:

Specify sizing when you shrink or grow the screen size:

Specify how much the item will grow relative to other items in the container:

flex-grow: #;

Specify how much the item will shrink relative to other items in the container (Only works when width hasn’t been set):

flex-shrink: #;

Set a value to the width of an item:

flex-basis: #;

The above three can be combined:

  flex: 1 0 0;

Or:

flex: 1;

The above is for if you want all item to be the same size, and all items to shrink and grow at the same time.

Then you can just make settings on other individual items if you want them to be different.

e.g.:

flex: 2;

Manipulate the order of items (without changing the HTML):

If you want to reverse the order of items:

flex-direction: row-reverse;

If you want to change the order of items and specify where each item goes:

.item-1 {
  order: 2;
}

etc.

Peter Eagleton