Why Learn FLEXBOX at all?

The Flexible Box Layout Model (more commonly known as FlexBox) is a one-dimensional layout system that is used to display HTML elements in a row-based or a column-based layout.

The way you present your content is of utmost importance as it is the most important form of transmission of your ideas to the user.

So how do we achieve that ?

Well during the initial years, CSS had the responsibility of showing our content in a pretty and decent way.

CSS has remained one of the most important parts of web development but it was a strenuous task to create two-dimensional web page layouts using only CSS as we had to use CSS properties such as float, positioning a lot of elements with position and inline-block styling.

So to solve this conundrum, Flexbox was introduced in 2009 as a new layout system, with the goal to help us build responsive web pages and organize our elements easily, and since then, it’s gained more and more attention. It turns out it’s now used as the main layout system for modern web pages.

BASICS

Flexbox is a whole module by itself and is not to be treated as a single property, so it is only natural that it involves its whole set of properties.

The majority of them are meant to be set on the container (parent element, commonly known as "flex-container") whereas the others are meant to be set on the children (commonly known as "flex-items").

Flex Layout Model

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).

• main-axis

The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property

• main-start | main-end

The flex items are placed within the container starting from main-start and going to main-end.

• main-size

A flex item’s width or height, whichever is in the main dimension, is the item’s main size. The flex item’s main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.

• cross-axis

The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

• cross-start | cross-end

Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

• cross-size

The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

FLEXBOX PROPERTIES

Properties for the Parent (flex-container)

• display

This defines a flex container; inline or block depending on the given value. It enables a flex context for all its direct children.

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

• flex-direction

  The flex-direction CSS property sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed).

This establishes the main-axis, thus defining the direction flex items are placed in the flex container. Flexbox is (aside from optional wrapping) a single-direction layout concept. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

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

1) row (default)

left to right in ltr; right to left in rtl

2) row-reverse

right to left in ltr; left to right in rtl

3) column

same as row but top to bottom

4) column-reverse

same as row-reverse but bottom to top

• flex-wrap

  The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
  By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

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

• flex-flow

  This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.

• justify-content

  The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.
  This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.

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

• align-items

  This defines the default behavior for 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 (perpendicular to the main-axis).

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

• gap, row-gap, column-gap

  The gap property explicitly controls the space between flex items. It applies that spacing only between items not on the outer edges.

.container {
  display: flex;
  ...
  gap: 40px;
  gap: 40px 20px; /* row-gap column gap */
  row-gap: 40px;
  column-gap: 20px;
}

Properties for the Children (flex-items)

• order

You can target individual items and change where they appear in the visual order with the order property.
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.

.item-1 {
    order: 2;
}

.item-2 {
    order: 3;
}

.item-3 {
    order: 1;
}

.item-4 {
    order: 3;
}

.item-5 {
    order: 1;
}

These would be displayed in the following order -->

• flex-grow

  This defines the ability for a flex item to grow if necessary. It accepts a unitless value that serves as a proportion. It dictates what amount of the available space inside the flex container the item should take up.
  If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one of the children has a value of 2, that child would take up twice as much of the space either one of the others (or it will try, at least).

CONCLUSION

In the end, I would just like to say that it is entirely up to you, whether to use Flexbox or not. But it is a fact that Flexbox does make a developer's life easy as it integrates seamlessly with existing HTML layouts or any other grid systems like Bootstrap.

One other advantage of using Flexbox is that we can very easily apply, both semantic and non-semantic elements.

However, you need to keep in mind that if you are working with legacy software that need older browsers, they don't support Flexbox.