Introduction

Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

Block elements always start on a new line and take up the full width available. Examples include <div> and <p> elements.
Inline elements do not start on a new line and only take up as much width as necessary. Any height and width properties will not affect on this element. Examples include <span> and <a> elements.

Fortunately, the default display can be overridden. The Flexbox lets containers decide how to evenly distribute their children including their size and the space between them.

Flex container

To start using the Flexbox model, all you need to do is first set a certain parent element to be a flex-container by using display:flex. This immediately establishes a new flex formatting context for its children.

There are two key terms that we use frequently. I'll write them down here for future reference.

Flex container : The parent element you've set display:flex on.
Flex items : The children elements within a Flex container

Ordering and Orientation

The contents of a flex container can be laid out in any direction and any order. This allows an author to easily achieve effects that would previously have required complex or fragile methods. This functionality is exposed through the flex-direction, flex-wrap, and order properties.

flex-direction

The flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis. Its values are as below.

row

In horizontal direction (left to right)

row-reverse

Same as row, except the direction is swapped

column

In vertical direction (top to bottom)

column-reverse

Same as column, except the direction is swapped.

flex-wrap

The flex-wrap property controls whether the flex container is single-line or multi-line. wrap and nowrap are its two main values.

nowrap

The flex container is single-line.

wrap

The flex container is multi-line.

The flex-flow property is a shorthand for setting the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes.

order

Flex items are, by default, displayed and laid out in the same order as they appear in the source document. The order property can be used to change this ordering.

Alignment

After a flex container’s contents have finished their flexing and the dimensions of all flex items are finalized, they can then be aligned within the flex container.

justify-content

The justify-content property aligns flex items along the main axis of the current line of the flex container. In other words, it helps distribute extra free space leftover.

flex-start

Flex items are packed toward the start of the line.

flex-end

Flex items are packed toward the end of the line.

center

Flex items are packed toward the center of the line.

space-between

Flex items are evenly distributed in the line.

space-around

Half-size spaces on either end.

space-evenly

Full-size space on either end.

align-items & align-self

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction. align-self allows this default alignment to be overridden for individual flex items.

flex-start

Flex items are packed toward the start of the cross axis

flex-end

Flex items are packed toward the end of the cross axis

center

Flex items are packed toward the center of the cross axis

stretch

Flex items are evenly distributed in the line.

Note: If the flex container’s height is constrained this value may cause the contents of the flex item to overflow the item.

align-content

The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

flex-start

Flex items are packed toward the start of the cross axis

flex-end

Flex items are packed toward the end of the cross axis

center

Flex items are packed toward the center of the cross axis

space-between

Equal space between cross axis lines

space-around

Half-space on either end.

Flexibility

A flex container distributes free space to its items (proportional to their flex grow factor) to fill the container or shrinks them (proportional to their flex shrink factor) to prevent overflow.

flex-grow : This property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items.
flex-shrink : This property determines how much the flex item will shrink relative to the rest of the flex items.
flex-basis : This component specifies the initial main size of the flex item.

Flex values between 0 and 1 have a somewhat special behavior: when the sum of the flex values on the line is less than 1, they will take up less than 100% of the free space.

Nested flexboxes

Flex items within a flex container can be laid out either horizontally or vertically. But we can nest a flex container inside another one to make more complex layouts.

So imagine that for some reason we want to make a layout that looks like the below image.

We can think of the whole page as a big column that contains three rows. The second and third rows have two horizontal elements inside them. Finally, Within the second flex item of the second row, we have two child elements that are laid out vertically.

The HTML will be like this:

          <div class="parent">
  <div id="child-1"></div>
  <div id="child-2">
    <div id="child-2-1"></div>
    <div id="child-2-2">
      <div id="child-2-2-1"></div>
      <div id="child-2-2-2"></div>
    </div>
  </div>
  <div id="child-3"></div>
    <div id="child-3-1"></div>
    <div id="child-3-2"></div>
  </div>
</div>
        

Now that the HTML is done. We move over to CSS. The parent element needs to be the big flex container.

          .parent {
  display: flex;
  flex-direction: column
}
        

Now, each of the second and third rows has its own flex items.

          #child-2,
#child-3 {
  display: flex
  flex-direction: row
}
        

Now the child-2-2 element has its couple of children.

          #child-2-2 {
  display: flex
  flex-direction: column
}
        

The rest is just some margins, paddings, and background-colors.

Reference

All the documentation in this page is taken from the following pages