Flexbox is one of the important CSS concepts that every web developer must know these days. It’s a feature that allows us to easily design and structure responsive web layouts.

Flexbox has many properties that we can use to align and offer space between elements. So we don’t have to use tables and floats anymore because flexbox is much easier.

That’s why in this article, I will give you a very useful cheat sheet to help you easily learn CSS flexbox. Let’s get right into it.

Parent Properties

The display property

If you want to use flexbox in CSS, setting the property display to flex is the first thing you have to do.

We use the property display in the parent element that contains one or multiple child elements. When we set the property to flex or inline-flex, all the child elements will be in a row direction by default.

The example below is a parent element that contains 3 child elements:

<div class="parent">
  <div class="child">
    <img src="./images/lco1.png" alt="lco1-image" />
  </div>
  <div class="child">
    <img src="./images/lco2.png" alt="lco2-image" />
  </div>
  <div class="child">
    <img src="./images/lco3.png" alt="lco3-image" />
  </div>
</div>

So we can use flexbox in CSS to work with these. Let’s set the property display to flex in the parent element and see what happens.

The CSS code:

.parent {
  display: flex; /* display flex */
  width: 800px;
  height: 400px;
  background-color: #03203c;
}
.child {
  height: 80px;
  margin: 10px;
}
.child img {
  height: 100%;
}

Output:

As you can see, by setting the property display to flex, all the child elements become flexible items. Now we can use other flexbox properties to center the child elements inside the parent, align them, and much more.

The flex-direction property

The property flex-direction allows us to define in which direction we want to stack child elements inside the parent element(column, row…).

The property flex-direction can take the following values:

• column
• row
• row-reverse
• column-reverse

Have a look at the examples below:

.parent{
  display: flex;
  flex-direction: row; /* row direction */
}

Output:

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

.parent{
  display: flex;
  flex-direction: column-reverse; /* column reverse direction */
}

.parent{
  display: flex;
  flex-direction: row-reverse; /* row reverse direction */
}

The flex-wrap property

The property flex-wrap allows us to define whether to wrap or not to wrap child elements inside the parent when we resize the screen.

The property flex-wrap can take the following values:

• wrap: when you want to wrap elements.
• no-wrap: when you don’t want to wrap elements.
• wrap-reverse: when you want to reverse and wrap elements.

Have a look at the examples below:

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

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

This property is very useful if you want all the child elements to wrap the parent when the width of that parent element changes. It’s important, especially for responsiveness.

The justify-content property

The property justify-content allows us to align child elements inside the parent in the main axis. That means when the child elements are in a row direction, it aligns them horizontally. On the other hand, when they are in a column direction, it aligns them vertically.

The property justify-content can take the following values:

• flex-start: aligns the flex items at the beginning of the container (this is default).
• flex-end: aligns the flex items at the end of the container.
• center: aligns the flex items at the center of the container.
• space-between: displays the flex items with space between the lines.
• space-around: displays the flex items with space before, between, and after the lines.
• space-evenly: displays the flex items with space evenly before, between, and after the lines.

Have a look at the examples below:

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

Output:

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

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

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

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

The align-items property

The property align-items also allows us to align child elements inside the parent but in the cross axis. So when the child elements are in a row direction, it aligns them vertically. On the other hand, when they are in a column direction, it aligns them horizontally.

The property can take the following values:

• flex-start: aligns the flex items at the top of the container.
• flex-end: aligns the flex items at the bottom of the container.
• center: aligns the flex items in the middle of the container.
• baseline: aligns the flex items such as their baselines aligns.
• stretch: stretches the flex items to fill the container (this is default).

Have a look at the examples below:

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

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

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

Child Properties

The order property

The property order is used on child elements to change the order of elements.

HTML:
<div class="parent">
  <div class="child1">
    <img src="./images/lco1.png" alt="lco1" />
  </div>
  <div class="child2">
    <img src="./images/lco2.png" alt="lco2" />
  </div>
  <div class="child3">
    <img src="./images/lco3.png" alt="lco3" />
  </div>
</div>

CSS:
.parent {
  display: flex;
  width: 800px;
  height: 400px;
  background-color: #03203c;
}
.parent div {
  height: 80px;
  margin: 10px;
}
.parent div img {
  height: 100%;
}
.child1 {
  order: 1; /* default is 0 */
}

Output:

The flex-grow property

The property flex-grow allows child elements to grow using the remaining space.

Here is an example:

HTML:
<div class="parent">
  <div class="child1">
    <img src="./images/lco1.png" alt="lco1" />
  </div>
  <div class="child2">
    <img src="./images/lco2.png" alt="lco2" />
  </div>
  <div class="child3">
    <img src="./images/lco3.png" alt="lco3" />
  </div>
</div>

CSS:
.parent {
  display: flex;
  width: 800px;
  height: 400px;
  background-color: #03203c;
}
.parent div {
  height: 100px;
  padding: 10px;
}
.parent div img {
  height: 100%;
}
.child1 {
  flex-grow: 1; /* default is 0 */
  background-color: #3944f7;
}
.child2 {
  background-color: #d82e2f;
}
.child3 {
  background-color: #4dd637;
}

Output:

The property flex-basis

The property flex-basis allows us to give the width size for child elements. It accepts values in px, %, rm, and so on.

Here is an example:

.child2 {
  flex-basis: 250px;
}

Output:

The align-self property

The align-self property specifies the alignment for the selected item inside the flexible container.

Note: The align-self property overrides the flexible container's align-items property.

The property can take the following values:

• auto: Default. The element inherits its parent container's align-items property, or "stretch" if it has no parent container.
• stretch: The element is positioned to fit the container.
• center: The element is positioned at the center of the container.
• flex-start: The element is positioned at the beginning of the container.
• flex-end: The element is positioned at the end of the container.
• baseline: The element is positioned at the baseline of the container.

Have a look at the examples below:

.child3 {
  align-self: center;
}

.child3 {
  align-self: flex-end;
}

Conclusion

As you can see above, we covered the majority of flexbox properties that you will need to use on your projects. So you can consider this article as a cheat sheet to help you easily learn about flexbox.

Thank you for reading the article. I hope you found it useful.