What Is Flexbox

Flexbox is a part of CSS that provides an efficient way to lay out, align and distribute space among items in a container. Before flexbox became popular, it was a real challenge to center elements. We would use something called float which would behave unpredictably at a times.

The Two Axes of Flexbox

Everything we do in the flexbox revolves around the two axes, the main axis and the cross axis. The main axis is defined by the flex-direction property and the cross-axis run perpendicular to it.

So let us know more about the two axes.

The Main Axis

The main axis is defined by flex-direction, which has four possible values:

• row

• row-reverse

• column

• column-reverse

You Should choose row or row-reverse, your main axis will run along the row in the inline direction

You Should choose column or column-reverse, your main axis will run along from the top of the page to the bottom of the page in block direction.

The Cross Axis

The cross axis runs perpendicular to the main axis, therefore if your flex-direction (main axis) is set to row or row-reverse the cross-axis runs down the columns.

If your main axis is column or column-reverse then the cross-axis runs along the rows.

How To Use Flebox

To use the flexbox model firstly, we need to define the flexbox container.

HTML Code:

    <div class="container">
      <div class="box">
        1
      </div>  
       <div class="box">
         2
      </div>  
       <div class="box">
         3
      </div>  
    </div>

And then we have to add CSS to the flexbox container to make it a flexbox model.

CSS code:

.container{
    display: flex;
    border: 2px solid #000;
}

.box{
  text-align: center;
  border: 2px solid cyan;
  height: 200px;
  width: 200px;
  margin: 20px;
}

You can just have a look at this demo for a better understanding.

https://codepen.io/pujari-basvaraj/pen/RwBOrLL?editors=1100

Flex-Direction Property

As we have seen earlier that we can set the flex property in two directions (Main and Cross axis) i.e row and column.

So flex-direction property allows us to set the direction and orientation in which our flex-items should be distributed inside the flex-container.

As you can see we have four attributes through which we can deal with flexbox containers.

So let's just see examples for each of them and understand them in a better manner.

Flex-Direction: row

Row:

Row represents the horizontal axis oriented from the left to the right.

CSS code:

container {
  display: flex;
  flex-direction: row;
}

Example:

https://codepen.io/pujari-basvaraj/pen/RwBOawB?editors=1100

Row-reverse:

row-reverse represents the horizontal axis oriented from the right to the left.

CSS code:

.container {
  display: flex;
  flex-direction: row-reverse;
}

Example:

https://codepen.io/pujari-basvaraj/pen/QWBPNKw?editors=1100

Flex-Direction: Column

Column:

The flexbox items are ordered the same way as the text direction, along the cross-axis flex-direction.

CSS Code:

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

Example:

https://codepen.io/pujari-basvaraj/pen/BaPEKpg?editors=1100

Column-reverse:

In the Column Reverse flexbox items are ordered the opposite way as the text direction, along the cross axis.

CSS Code:

.container {
  display: flex;
  flex-direction: column-reverse;
}

Example:

https://codepen.io/pujari-basvaraj/pen/yLqrOoa?editors=1100

Justify-Content Property

This property justify-content allows us to arrange the flex-items along the main axis

inside the flex-box container.

Flex-Start:

The items are packed toward the start line.

CSS Code:

.container {
  display: flex;
  justify-content: flex-start;
}

Example:

https://codepen.io/pujari-basvaraj/pen/YzjMYpN

Flex-End:

The items are packed toward to end line.

CSS Code:

.container {
  display: flex;
  justify-content: flex-end;
}

Example:

https://codepen.io/pujari-basvaraj/pen/bGjJaWK

Center:

To center the inner div element we will make the parent a flex container.

CSS Code:

.container {
  display: flex;
  justify-content: center;
}

Example:

https://codepen.io/pujari-basvaraj/pen/qBywpXN

Space-Between:

space-between evenly distributes space items between the first item is set at the start of the container, and the last item is set at the end.

CSS Code:

.container {
  display: flex;
  justify-content: space-between;
}

Example:

https://codepen.io/pujari-basvaraj/pen/gOjyoXo?editors=1100

Space-Around:

space-around places items with space distributed evenly around the start and end of the list.

CSS-Code:

.container {
  display: flex;
  justify-content: space-around;
}

Example:

https://codepen.io/pujari-basvaraj/pen/MWBRrrM?editors=1100

Space-Evenly:

space-evenly is a value that can be assigned to the justify-content property to distribute flex items in such a way that the items have equal space around them.

CSS Code:

.container {
  display: flex;
  justify-content: space-evenly;
}

Example:

https://codepen.io/pujari-basvaraj/pen/xxJepjO?editors=1100

Flex-Wrap Property

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.

Wrap :

The wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.

CSS Code:

.container {
  display: flex;
  flex-wrap: wrap;
}

Example:

https://codepen.io/pujari-basvaraj/pen/ExpJodK?editors=1100

No-Wrap:

The No-wrap CSS property sets whether flex items are forced onto one line.

This is a default property of the flexbox container.

CSS Code:

.container {
  display: flex;
  flex-wrap: nowrap;
}

Example:

https://codepen.io/pujari-basvaraj/pen/eYjoVmZ

Wrap-Reverse:

The wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.

CSS Code:

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

Example:

https://codepen.io/pujari-basvaraj/pen/VwBNQLQ

Align-Content Property

The align-item In Flexbox, it controls the alignment of items on the Cross Axis. Grid Layout controls the alignment of items Block Axis within their grid area.

Flex-Start:

The items are packed flush to each other against the edge of the alignment container depending on the flex container's cross-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated as a start***.***

CSS Code:

.container {
  display: flex;
  align-content: flex-start;
// without this line, align-content won't work
    flex-wrap: wrap;
}

Example:

https://codepen.io/pujari-basvaraj/pen/OJwGQbq

Flex-End:

The items are packed flush with each other against the edge of the alignment container depending on the flex container's cross-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated as an end.

CSS Code:

.container {
  display: flex;
  align-content: flex-end;
// without this line, align-content won't work
    flex-wrap: wrap;
}

Example:

https://codepen.io/pujari-basvaraj/pen/MWBRQpy

Center:

The items are packed flush with each other in the center of the alignment container along the cross axis.

CSS Code:

.container {
  display: flex;
  align-content: center;
// without this line, align-content won't work
    flex-wrap: wrap;
}

Example:

https://codepen.io/pujari-basvaraj/pen/PoBgQmL

We have 3 more attributes that we can use with the align-content property:

• space-between

• space-around

• stretch

We just have to change one line of CSS in the code.

Align-Items Property

The align-item In Flexbox, it controls the alignment of items on the Cross Axis. Grid Layout controls the alignment of items Block Axis within their grid area.

Flex-Start:

The flexbox items are aligned at the start of the cross-axis.

CSS Code:

.container {
  display: flex;
  align-items: flex-start;
}

Example:

https://codepen.io/pujari-basvaraj/pen/MWBRQVb

Flex-End:

The flexbox items are aligned at the end of the cross-axis.

CSS Code:

.container {
  display: flex;
  align-items: flex-end;
}

Example:

https://codepen.io/pujari-basvaraj/pen/XWBQZYa

Center:

The flexbox items are aligned at the center of the cross-axis.

CSS Code:

.container {
  display: flex;
  align-items: center;
}

Example:

https://codepen.io/pujari-basvaraj/pen/YzjMejR

Stretch:

The flexbox items will stretch across the whole cross-axis.

CSS Code:

.container {
  display: flex;
  align-items: stretch;
}

Example:

https://codepen.io/pujari-basvaraj/pen/GRBLQXa

Baseline:

The flexbox items are aligned at the baseline of the cross-axis.

CSS Code:

.container {
  display: flex;
  align-items: baseline;
}

Example:

https://codepen.io/pujari-basvaraj/pen/RwBOQqd

Align-Self Property

This property works on the child classes. It positions the selected item along the cross-axis.

In total it has 6 values:

• flex-start

• flex-end

• center

• baseline

• stretch

• auto

To create the results, select any .box-* and write the following code:

Use the Below Example for Demo (using flex-end , similarly you can use different attributes):

https://codepen.io/pujari-basvaraj/pen/PoBgQro

flex - grow | shrink | basis properties

The properties will work when we resize the window. Let's dive right in.

flex-grow

This property grows the size of a flex item based on the width of the flex container.

Example:

https://codepen.io/pujari-basvaraj/pen/LYBvdEM

flex-shrink

This property helps a flex item shrink based on the width of the flex container. It's the opposite of flex-grow.

Example:

https://codepen.io/pujari-basvaraj/pen/NWBmYxR

flex-basis

This is similar to adding width to a flex item but only more flexible. flex-basis: 10em, for example, will set the initial size of a flex-item to 10em. Its final size will be based on the available space, flex-grow, and flex-shrink.

Example:

https://codepen.io/pujari-basvaraj/pen/oNMOqzO

Shorthand Flexbox Property

flex shorthand

This is the shorthand for the flex-grow, flex-shrink and flex-basis properties combined.

Let's just see the last property of flexbox with example:

Example:

https://codepen.io/pujari-basvaraj/pen/dyjLmWB

Takeaway

If you have come to this point reading the article then I am sure you will be confident while using flexbox in your projects ahead.

Here's your medal for reading till the end ❤️

That's it for the day see you in the next blog until then...

Keep Writing Code❤️