Flexbox for beginners: How i finally understood it.

Hey there!

I'm just starting in web development, and this is my very first blog post.

I’ve been learning about Flexbox lately, and wanted to share what I’ve understood so far— If you’ve ever struggled to align elements on a web page or make your layout adapt gracefully to different screen sizes, don’t worry — I’ve got you!

In this blog, I’ll walk you through the basics of Flexbox, explain its core concepts, and share practical examples you can try right away. Let’s get started!

What is Flexbox?

Flexbox, or Flexible Box Layout, is a powerful CSS one-dimensional module that mainly focuses on arranging items in one direction — either in a row or a column. It makes it easier to design flexible and efficient layouts. Whether you want to center a button perfectly, create a responsive navbar, or build an entire section that adapts to screen sizes, Flexbox has your back.

Why use Flexbox?

Earlier, creating layouts in CSS often meant using floats, positioning, or complex hacks—which weren’t always responsive or easy to manage.

• Easy Alignment: Center items horizontally and vertically with just a few lines of code.

• Responsive by Nature: Flex items automatically adjust to screen size, making layouts mobile-friendly.

• Flexible Ordering: Can change the visual order of elements without touching the HTML.

• Cleaner Code: Layouts became easier to read, write, and maintain.

Core Flexbox Concepts

To use Flexbox, you need to understand two things: Flex container(parent) and Flex items(direct children). When you define a container (like a div) display: flex, it becomes a flex container and all the direct children inside the container become flex items. Now Flexbox properties can be applied to control layout behavior.

The Two Axes of Flexbox

Main Axis: This is the primary direction in which the flex items are laid out. It depends on the flex-direction property, which we’ll understand later. For example, in flex-direction: row, the main axis is horizontal(left to right).

Cross Axis: This is perpendicular to the main axis. If the main axis is horizontal, the cross axis is vertical.

Let’s understand which properties apply to flex containers and which to flex items.

Flex Container Properties

1. display: flex: This is the starting point. Apply it to a parent element to make it a flex container.

• See the screenshot below to understand how the elements inside the container become flex items and arrange themselves in a row by default.

  

2. flex-direction: It defines the direction of the main axis:

• row (default): left to right

• row-reverse: right to left

• column: top to bottom

• column-reverse: bottom to top

• check the screenshot of the above explanation:

  

3. justify-content: It is used to align items along the main axis(horizontal by default):

• flex-start(default): aligns items across the main axis.

• center: aligns items at the center across the main axis.

• flex-end: aligns items at the end across the main axis.

• space-between: it distributes the space between items evenly across the main axis; the first item at the start and the other at the end.

• space-around: it distributes the space between items equally on all sides. This means extra space is added on both sides of each element.

• space-evenly: it distributes equal space between and around items.

• here is the visual representation of the above explanation:

  

4. align-items: Aligns items along the cross axis(vertical by default):

• stretch(default)

• flex-start: aligns items at the top.

• center: aligns items at the center vertically.

• flex-end: aligns items at the bottom.

• baseline: aligns items so that their text starts from the same horizontal line, rather than aligning them by their tops, centers, or bottoms.

• see the example below:

  

5. flex-wrap: Controls whether flex items should wrap onto multiple lines:

• nowrap(default): keeps all the items on a single line.

• wrap: it allows items to move to the next line if there’s not enough space in one row.

• wrap-reverse: it allows items to wrap in an opposite direction than a normal wrap.

• check the example below:

  

Flex Item Properties

1. order: it changes the order of items regardless of the HTML source

2. flex-grow: it changes how much a flex item grows relative to others with the default value of 0.

3. flex-shrink: it determines how much an item shrinks when space is tight with the default value of 1.

4. align-self: it sets the alignment of an individual item.

Common Use Cases for Flexbox:

• Horizontal or vertical navigation menus that adjust to different screen sizes.

• Centering elements vertically and horizontally inside a container.

• Building cards and lists where items need equal spacing or alignment.

• Can be used in footers to make it responsive on big screen and small screen as well.

Now, that we have come to the end of our blog, let’s have a brief comparison between Flexbox and Grid!

Flexbox vs Grid

we use flexbox for one-dimensional layouts and grid for two-dimensional layouts. flexbox is for simpler, linear layouts and alignments like navbars and footers. Whereas, a grid is for complex 2D layouts with rows and columns both like dashboards.

Conclusion

Flexbox is a powerful layout model that can significantly improve your website and design. I highly recommend beginners to learn Flexbox and Grid thoroughly, it will make them stand out and will help them create better websites.

If you found this helpful, feel free to share it or drop your thoughts/questions in the comments below!