In web design, creating a responsive and dynamic layout can be a challenging task. In my last article Introduction to CSS Positions, I talked about the positioning of the elements. But the problem is while positioning elements can provide some control, it lacks flexibility when it comes to changing orientation, resizing, stretching, shrinking, and more . That's where CSS Flexbox comes in.

Before going ahead, I recommend that you have some prior knowledge of CSS basics. If you're new to CSS, you can check out my article, Introduction to CSS which covers the basics of CSS & its usage in web design. Additionally, I suggest that you read my article Understanding the CSS Box Model to get a better understanding of how CSS layouts work.

In this article will focus on CSS Flexbox layout and its properties for both the parent (the flex container) and child (the flex items) elements. And you'll also learn how CSS Flexbox can help resolve those issues and provide greater flexibility. By the end of this article, you'll have the knowledge and tools to create responsive and dynamic layouts with ease. Don't forget to check out the link to code files related to this article at the end.

What is Flexbox?

The flexible box module is usually referred to as a flexbox. Its one-dimensional layout pattern organizes items either in rows or columns and at the same time controls the spacing and order of the items in the container.

The significance of the flexbox is to give the container capability to adjust or modify its item's sizes (height/width) or order to fill up the available space of the container. It can expand or shrink to avoid overflow. The best advantage flexbox layout has over the regular layouts is that is free from any directional constraints, whereas the existing block is vertically biased and the inline layout is horizontally biased.

---

Properties for the Parent (flex container)

Flex container property is for parent element where we define all parameter for its child elements (flex items) how they will behave within the define container including there direction, space, alignments (both vertically and horizontally), etc.

display: flex;

This property will define the flex container or parent element with the value of flex

Syntax:

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

---

flex-direction:

A property used to define how the flex items will be placed in the flex container. Because the flexbox is a single-direction layout concept it lays out flex items either in the horizontal or vertical direction.

Syntax:

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

• row: (By default) Flex items are put together horizontally from left to right.

• row-reverse: It's opposite to the row where flex items are put horizontally from right to left.

• column: Same as row but vertically top to bottom

• column-reverse: It's opposite to column where flex items are vertically bottom to top.

Have a look at the demonstration in code pen about the flex-direction: property:

---

flex-wrap:

As we know flex items will try to fit into one line. But when we don't want items to compromise their size or alignment then we can use this property to wrap flex items onto multiple lines.

Syntax:

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

• nowrap (default): It will not push the flex items to the next line and try to fit in a single line which may cause the container to overflow and flex items may compromise its size.

• wrap: flex items will wrap onto multiple lines, from top to bottom without compromising the flex items' size and avoid overflowing their container.

• wrap-reverse: It's similar flex-wrap: wrap; but it will wrap the flex items from bottom to top.

Have a look at the demonstration in code pen about the flex-wrap: property:

---

flex-flow:

flex-flow: is a combination of the flex-direction and flex-wrap properties, to avoid multiple lines of code. Using this property we can together define the flex container's axes and flex-wrap . The default value is flex-flow:row nowrap;.

Multiple lines approach:

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

Flex-flow approach:

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

Note: Both approaches will have the same results

---

justify-content:

This property is used to align flex items along the main axis (horizontal axis). It has some controls over the alignment of items.

Syntax:

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

• flex-start (default): items are aligned toward the start of the flex-direction.

• flex-end: items are aligned with the end of the flex-direction.

• center: items are centered along the line.

• space-between: items are evenly distributed in the line; the first item is on the start line, the last item is on the end line.

• space-around: items are evenly distributed in the line with equal space around them.

• space-evenly: items are distributed so that the spacing between any two items (and the space to the edges) is equal.

Have a look at the demonstration in code pen about the justify-content: property:

---

align-items:

It's like justify-content: but it will align items along the cross-axis (vertical axis).

Syntax:

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

• stretch (default): stretch to fill the container (still respect min-width/max-width)

• flex-start: items are placed at the start of the cross-axis.

• flex-end: items are placed at the end of the cross-axis.

• center: items are centered in the cross-axis

• baseline: items are aligned such as their baselines align.

Have a look at the demonstration in code pen about the align-items: property:

---

align-content:

When we are dealing with multiple lines of rows or columns then this property is used to align a flex container’s lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main axis.

Note, this property has no effect when the flexbox has only a single line.

The align-content the property accepts different values:

• stretch (default): lines stretch to take up the remaining space

• flex-start: items packed to the start of the container.

• flex-end: items packed to the end of the container.

• center: items centered in the container

• space-between: items evenly distributed; the first line is at the start of the container while the last one is at the end

• space-around: items evenly distributed with equal space around each line

Have a look at the demonstration in code pen about the align-content: property:

---

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.

Syntax:

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

Have a look at the demonstration in code pen about the gap: property:

---

Properties for the Children (flex items)

align-self:

When we need to align some flex items individually then we use align-self: to set some properties for specified flex items (Please see the align-items explanation to understand the available values.)

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Have a look at the demonstration in code pen about the align-self: property:

---

order:

This property has the power to change the place of the flex items in the flex container. Refer to the following illustration to understand it better:

---

There is one more property you should know

flex:

It's a shorthand property for flex-grow, flex-shrink and flex-basis combined.

• flex-grow: This defines the ability for a flex item to grow if necessary.

• flex-shrink: This defines the ability for a flex item to shrink if necessary.

• flex-basis: This defines the default size of an element before the remaining space is distributed.

The default is, but if you set it with a single number value, like flex: 5; that changes the flex-basis to 0%, so it’s like setting flex-grow: 5; flex-shrink: 1; flex-basis: 0%;.

Syntax:

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

It is recommended that you use this shorthand property rather than set the individual properties.

---

Conclusion:

So far we have covered a powerful Flexbox display: flex; layout and its sub-properties that you need to create dynamic & responsive website layouts in a flexible & eye-catching way. By understanding the flex container and flex item properties, you can create complex and visually appealing designs.

In this article, we have covered the basics of CSS Flexbox and its properties. If you want to practice this topic with a little bit of fun. You should check out Flexbox Froggy Game specially designed to familiarize yourself with the concept.

Link to the Game:-- Flexbox Froggy Game.

If you want to further sweeten your CSS knowledge, I recommend checking out my articles on CSS Positions and CSS Grid layouts:

• Introduction to CSS Positions.

• Introduction to CSS Grid layout.

These articles will provide you with the necessary knowledge to create more complex and dynamic layouts for your web pages. By mastering these concepts, you will be well on your way to creating beautiful and responsive web designs. So stay tuned and keep learning!

---

Here link to code source related to this article:- GitHub.

If you want to learn more about this topic, here are few resources below that you might want to check it out:

• CSS Flexible Box Layout.

• A Complete Guide to Flexbox.

Thanks for taking the time to read this article. I hope this was helpful to you.😇😇