14 steps to flex like CSS flex!

Flex now!

Background

Nowadays we have an application for everything. The tech market has a lot of products to help us with our needs, but somehow we don’t get attached to every product we see. Some applications feel smooth and friendly, and others feel… hmmm, a bit out of fashion. Every application we use goes through multiple steps, from market analysis to UI/UX to developing the platform. Each step has a lot to take care of, but for us, the front-end engineers, the main concern is the development process. We must translate those crazy designs into code. Funny right? We have to take care of the logic and of course, adapt those interfaces for web and mobile when needed. With the help of third-party libraries such as Bootstrap, Skeleton, Bulma, etc, that offer tools for layouts and UI components we handle the interfaces. Of course, this is a choice because most of these libraries have the same foundation, Flexbox. So for layouts, you can achieve the same result using only Flexbox. A good foundation of knowledge for Flexbox will give you the necessary skills to translate pretty much everything you see to code. And let’s not lie to each other, we’ve both searched how to center a div, how to align two items, empty spaces with no explanation, and more. Do you know why? Because we rely too much on those third-party libraries and miss the foundation they are built upon.

Why you should flex

The Flexbox aims to provide a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic. The main idea behind the flex layout is to give the container the ability to alter its items’ width/height (and order) to best fill the available space (mostly to accommodate its items to all kinds of display devices and screen sizes). A flex container expands items to fill available free space or shrinks them to prevent overflow. Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically based, and inline which is horizontally based). While those work well for pages, they lack the flexibility to support large or complex applications.

Terminology

Flexbox is a module that involves a set of properties. Some of the properties are set on the container and others are set on the children. The flex layout is based on “flex-flow direction”. Items are laid out following either the main axis or the cross axis.

• main axis — The main axis of a flex container is the primary axis where flex items are laid out along.
• main-start | main-end — The flex items are placed in the main axis starting from main-start to main-end.
• main size — A flex container’s width or height depending on the flex-flow direction of flex items.
• cross axis — The axis perpendicular to the main axis is called the cross axis. It is important to understand that the cross axis is the secondary axis after we have set the main axis. Its direction can be vertical or horizontal. The same applies to the main axis.
• cross-start | cross-end — The flex items are placed on the cross-axis starting from cross-start to cross-end.
• cross size — The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size.

Flexbox properties

1. display

This defines a flex container. It enables a flex content for all its direct children.

.container {
  display: flex; */* or inline-flex */*
}

2. flex-direction

This establishes the main axis, defining the direction of flex items placed in the flex container. Just think of it this way, am I gonna have the items laid out horizontally or vertically?

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row(default) — Left to right.
• row-reverse — Right to left.
• column — Flex items are placed vertically from top to bottom.
• column-reverse — From bottom to top.

3. flex-wrap

The default behavior of flex items is to try and fit all into one line. By wrapping the container we can lay out the flex items into more than one line.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap(default) — It is the default behavior of the flex container. All items will be on one line.
• wrap — Flex items will wrap into multiple lines along the cross axis, from top to bottom.
• wrap-reverse — Same as wrap but from bottom to top.

4. flex-flow

A shortcut for applying both flex-direction and flex-wrap properties.

.container {
  flex-flow: column wrap;
}

Default values for flex-flow are row and nowrap.

5. justify-content

This defines how flex items are aligned along the main axis. It might help you just to center an element or for more complex scenarios when distributing space in the container is needed.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

There are a set of values we can use for the justify-content property but I am going to explain the most used and useful ones.

• flex-start — Items are grouped together at the start of the line/lines in the container.
• flex-end — Items are grouped together at the end of the line/lines in the container.
• center — Items are centered along the line/lines in the container.
• space-between — Items are evenly distributed along the line, where the first item and the last item will be placed on the edges of the line.
• space-around — All items have equal space around them.
• space-evenly — The space is distributed equally from each item along the line.

6. align-items

This defines how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross axis.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

There are a set of values we can use for the align-items property but I am going to explain the most used and useful ones.

• flex-start — Items are placed at the start of the cross axis.
• flex-end — Items are placed at the end of the cross axis.
• center — Items are centered on the cross axis.
• stretch — Items are stretched to fill the container.
• baseline — Items are aligned such as their baselines align.

7. align-content

align-content aligns the container’s lines across the cross axis. For this to take effect we need to have multiline containers.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

There are a set of values we can use for the align-content property but I am going to explain the most used and useful ones. The default behavior is that all items are in their default position as if no value was set.

• flex-start — Items are grouped at the start of the container.
• flex-end — Items are grouped at the end of the container.
• center — Items are centered in the container.
• stretch — Lines stretch to fill the container.
• space-between — Items are evenly distributed in the container where the first line is at the start of the container and the last line is at the end.
• space-around — Items are evenly distributed with equal space around each line.

8. gap, row-gap, column-gap

The gap property controls the space between flex items.

.container {
  display: flex;
  gap: 16px;
  gap: 16px 32px; /* row-gap column gap */
  row-gap: 16px;
  column-gap: 32px;
}

When we specify only one value for gap it gets applied for both, the row-gap and the column-gap. Also, we can set each of them by using row-gap or column-gap.

Children properties

1. order

The order property is designed to lay the items out in ordinal groups. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.

As an example, I have 5 flex items and assign order values as follows:

• Source item 1: order: 2
• Source item 2: order: 3
• Source item 3: order: 1
• Source item 4: order: 3
• Source item 5: order: 1

These items would be displayed on the page in the following order:

• Source item 3: order: 1
• Source item 5: order: 1
• Source item 1: order: 2
• Source item 2: order: 3
• Source item 4: order: 3

2. flex-grow

This property specifies how much of the remaining space in the flex container should be assigned to the item (the flex grow factor). The remaining space is the size of the flex container minus the size of all flex items’ sizes together. If all sibling items have the same flex-grow factor, then all items will receive the same share of remaining space, otherwise, it is distributed according to the ratio defined by the different flex-grow factors.

.item {
  flex-grow: 2; /* default 0 */
}

3. flex-shrink

This defines the ability for a flex item to shrink if necessary.

.item {
  flex-shrink: 2; /* default 1 */
}

4. flex-basis

This defines the default size of an element before the remaining space is distributed.

.item {
  flex-basis: content | auto; /* default auto */
}

The auto keyword uses the width and height of the item. The content keyword sets the item size based on its content.

5. flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. You should keep in mind that the default values are 0 1 auto, but if you set it with a single value, like flex: 2, it will be interpreted with the following values: flex-grow: 2; flex-shrink:1; flex-basis: 0%;

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

6. align-self

Setting a value for align-self will override the default alignment for this flex item which inherits from the container configuration.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

That’s it! Please share this blog post to spread knowledge. If you want to explore more and get your hands dirty with flexbox, enjoy this tool I made with the sole purpose of learning flex: https://flex.better.network/

Add me on Linkedin if you found this article interesting :D