Introduction

CSS Flexbox is probably one of the most revolutionary thing that has happened to CSS. It has made designing layout with just CSS super-easy😀. Good thing that it is also super easy to learn😉. Gone are the days when you used to take a hell lot of time to do merely "center a div" sort of jobs in CSS and relying on frameworks like Tailwind or Bootstrap is no more a necessity to achieve easy responsiveness in your website. Flexbox is your saviour💪. In this blog, we will see some fundamental as well as some exciting operations with code examples to help you better grasp the visual understanding of how Flexbox works💻.

Basics

It is important to understand that flexbox is not just a stand-alone property of CSS like font-size, height or width but a layout module that contains many properties. Below is a beautiful illustration by CSS-Tricks that illustrates the axes and parameters upon which flexbox properties act. Just have a look😎

From the above illustration, we can see how axes are by default defined on an element by flexbox. These axes can change from its by default orientation depending on the values defined on the properties of flexbox.

• main-axis: This is the primary axis of a flex container( upon which display: flex; is used) along which the flex-items(inner child elements of the container) are laid out. One important thing to note that the direction is not necessary to be horizontal only, it depends on the flex-direction defined.
• cross-axis: This is the axis that is perpendicular to the main axis. Its direction depends on the main axis' direction.

Rest terms are pretty much self explanatory from the above illustrations, if not, we will be seeing their implications in below topics.

Note: Please click on the HTML and CSS tabs on the codepen embeds to see the code used.

display: flex;

It is here where the magic begins✨✨
This property of display defines a flex container

• By default, flex here means "inline-flex".
• This display method creates a flex context for the children elements of the container.

flex-direction

Remember, we saw main axis in the illustration above and talked about its direction. Well, `flex-direction' property sets the direction of the main axis.

• By default, flex-direction is row, but there are some other values also for this property like

.container{
  flex-direction: row | row-reverse | column | column-reverse;
  /* row is the by default value */
}

flex-direction: column;

• This direction sets the main axis along the column of the container, more specifically along the veritcal of the container.
  https://codepen.io/code-raushan/pen/QWmrREo

flex-direction: row-reverse;

• This sets the main axis along the row of the container like flex-direction: row but from right to left order.
  https://codepen.io/code-raushan/pen/VwXxOpM

flex-direction: column-reverse;

• This sets the main axis along the column of the container like flex-direction: column but from bottom to top order.
  https://codepen.io/code-raushan/pen/wvmjbdR
  
  

justify-content

This properties allows us the alignment of the child elements along the main axis

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

justify-content: center;

• Items will be centered along the main axis.
  https://codepen.io/code-raushan/pen/poLVXxr

justify-content: flex-start;

• This is the by default value of justify-content in which items are aligned toward the start of the main axis.
  https://codepen.io/code-raushan/pen/LYdmKXa

justify-content: flex-end;

• Items will be aligned towards the end of the main axis.
  https://codepen.io/code-raushan/pen/mdxLZoJ

justify-content: space-between;

-Items will be aligned on the main axis such that the first item is at the start of the axis and the last at the end of the axis and other in-between items are evenly distributed in the line.

justify-content: space-around;

-Items will be aligned on the main axis with equal space around them.

justify-content: space-evenly;

-Items will be aligned such that the spacing between the items remain same.

align-items

This property defines the alignment of items along the cross axis on the current line.

.container{
  align-items: center | flex-start | flex-end | stretch | baseline ;

}

align-items: center;

• Items are centered along the cross axis.

align-items: flex-start;

• Items are aligned at the start of the cross axis.

align-items: flex-end;

• Items are aligned at the end of the cross-axis.

align-items: stretch;

• Items are stretched to fill the flex-container.
• But respects the min-height and min-width set on the child elements.

align-items: baseline;

• Items are aligned such that the baseline of each item remains the same irrespective of their individual height and width.

align-content

This property behaves the same as of justify-content but on the cross axis. Also, this property will work only in a multi-line flex container.

flex-wrap

This property allows to wrap the flex items if necessary.

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

• flex-wrap: nowrap; This is a by default value of wrap, in this items will be on a single line.
• flex-wrap: wrap; This property wraps the flex-items, in situation of overflow, to the next line.
• flex-wrap: wrap-reverse; This property does the same job as the above one but from bottom to top.

order

This property is applied on the flex-item to position that particular item in a desired order.

.item{
  order: 3;
}

Further Learning

Above illustration and code snippets explain the core fundamentals of flexbox in the most lucid manner possible. But, there is more to Flexbox, that I highly recommend going through following blogs and docs👇
MDN Web Docs
CSS-Tricks, which I personally referred for this blog.