Table of Contents

1. What is Flexbox
2. How Flexbox works
3. Example
4. Resources

What is Flexbox and why we use it?

Flexbox is a CSS3 layout model that provides a much easier and efficient way to arrange items within a container and create highly adaptive designs.
It is most appropriate and used for small-scale applications and layouts like navigation menus, card layouts and web forms. Usually, when it comes to large-scale and enterprise applications CSS grid is used most frequently.

How Flexbox works?

Flexbox is not a css style property but a whole CSS module, that contains it's own properties and operators. Some of these properties are applied on the container (flex container) whereas the others are applied on the children (flex items).

Flexbox is an one-dimensional layout system that we can use to create a row or a column axis layout. Items will be laid out following either the main axis (from main-start to main-end) or the cross axis (from cross-start to cross-end).

In the example bellow, we will discuss how Flexbox works, how flex container communicates with flex items and some properties that it uses.

Example

⚫ The display: flex property sets the container as a flex container, so every item that exists inside it becomes a flex item.

⚫ Now as you can see the flex items are aligned in a row in the main axis. This happens because flexbox sets the flex-direction: row property to the flex container by default.
The flex-direction CSS property specifies how flex items are placed in the flex container defining the main axis and the direction.
We can change the main direction of the items to be the one we want by adding to the flex-direction the properly value.

flex-direction takes 4 values:

• row(default): left to right.
• column: same as row but top to bottom.
• row-reverse: right to left.
• column-reverse: same as row-reverse but bottom to top.

⚫ The order property changes the order of the flex items inside the container.

⚫ The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available within the flex container. This shorthand is setting three separate CSS properties (flex factors) at the same time, these are flex-grow, flex-shrink and flex-basis. The last two properties (flex-shrink and flex-basis) are optional. A flex item is fully inflexible if flex-grow and flex-shrink values are zero and flexible otherwise.

In the example above, flex: 1 is equivalent to:
flex-grow : 1
flex-shrink : 1
flex-basis : 0

flex-grow: Specifies how much the item will grow relative to the rest of the flexible items.

flex-shrink: Specifies how much the item will shrink relative to the rest of the flexible items.

flex-basis: Sets the initial main size of the flex item, before free space is distributed according to the flex factors.

⚫ In the flex container we have added the justify-content: center property and as you can see the items are aligned to the center.
The justify-content CSS property defines and controls the alignment along the main axis of all the items of the flex container.

Some frequently used values justify-content takes are:

• flex-start (default): The flex items are packed toward the start of the flex-direction.
• flex-end: The flex items are packed toward the end of the flex-direction.
• center: The flex items are packed flush to each other toward the center of the alignment container along the main axis.
• space-between: The flex items are evenly distributed within the alignment container along the main axis. The spacing between each pair of adjacent items is the same.
• space-around: The flex items are evenly distributed within the alignment container along the main axis, with half-size spaces on either end. The spacing between each pair of adjacent items is the same.
• space-evenly: The alignment subjects are evenly distributed in the alignment container, with a full-size space on either end.

⚫ In the flex container we have added the flex-wrap: wrap property and as you can see when the size of the window changes the flex items are separated to multiple lines.
The flex-wrap CSS property sets whether flex items are forced into one line or can be flowed into multiple lines.
By default, flex items try to fit into one line. We can change that and allow the items to wrap as needed with this property.

The flex-wrap takes the values:

• nowrap(default): The flex items are laid out in a single line which may cause the flex container to overflow.
• wrap: The flex items break into multiple lines and the direction is defined by flex-direction.
• wrap-reverse: Behaves the same as wrap but opposite to direction defined by flex-direction.

Resources

• W3Schools: CSS Flexbox
• MDN: Flexbox
• CSS-Tricks: A Complete Guide to Flexbox