Mastering Flexbox: The Lightweight Solution for Responsive Web Design

4 min readJul 25, 2023

Flexbox, also known as CSS3 Flexible Box, offers a lightweight and intuitive approach to arranging UI components on web pages. It not only simplifies the learning process but also ensures seamless responsiveness across different screen sizes. In this article, I will present the concepts to you in terms that will explain them effortlessly.

Flexbox Fundamentals :

For years, web developers struggled to create cross-browser compatible CSS layouts using techniques like floats and positioning. While these methods were reliable, they often posed limitations and complexities. Thankfully, a user-friendly solution emerged in the form of Flexbox — a game-changer in web layout design. In this beginner’s guide, we’ll explore the wonders of Flexbox and how it allows us to effortlessly achieve layouts that were once a hard task.

No more using : display :inline block while creating menu — navbar or other align elements.

flex-direction: Works on main-axis, defining the direction flex items are placed in your container.

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

Using reverse make the box comes first appear at the end.

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

flex-wrap : Imagine you have a bunch of boxes inside a container. When you set “flex-wrap: nowrap” , the boxes will try to squeeze together and fit on one line, no matter how narrow the container becomes. This can sometimes make the boxes overlap.

To make things more user-friendly, you can use “flex-wrap: wrap.” This tells the boxes that when the container’s width decreases and there’s not enough space, they should move to a new line. It’s like arranging books on a shelf — when there’s no space left, you start a new row of books.

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

justify-content: In Flexbox, we have a special way to align and space our boxes inside a container. This is done using this property. Think of it as a tool that helps to align any item in any order for you.

Imagine you have a row of boxes inside a container. By default, the boxes will stick together on the left side of the container. But with justify-content, you can easily change how they spread out along that row.

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

align-items: Imagine you have a row of boxes inside a container. This lets you decide how those boxes should be positioned vertically. For instance, if you set the center the boxes will be centered along the vertical line.