Mastering Flexbox: A Fun Yet Powerful CSS Journey

-by Rakshit Bansal

When I first started learning Flexbox, I had one simple goal — stop struggling with float, position, and unnecessary margin hacks. If you’ve ever spent hours trying to center a div (and failed), welcome to the club! But trust me, once you get the hang of Flexbox, it’s like unlocking a new level in CSS.

I learned Flexbox through Scrimba, took notes on Notion, and now I’m sharing my journey — what I learned, what confused me, and some golden rules to keep in mind. If you’re just starting, consider this your cheat sheet + survival guide.

What is Flexbox? (And Why Should You Care?)

Flexbox (Flexible Box Layout) is a one-dimensional layout method in CSS that lets you design responsive layouts with ease. Whether you’re building a navbar, a dashboard, or a card layout, Flexbox makes things so much smoother.

Before Flexbox, CSS layouts were messy. We had to rely on:

Flexbox solves these issues by letting you align elements effortlessly, control spacing dynamically, and create layouts that adapt to different screen sizes.

Intro

Flexbox (Flexible Box Layout) CSS module makes it easier to design flexible responsive layout structure without using float or positioning. It’s a one-dimensional layout method for arranging items in rows or columns.

As long as the parent element is display: flex, all its children will inherit the flex style properties

It is mainly for layouts in 2D direction (single line), while grid is for 3D layout.

Step 1: Setting up Flex Container

.container {
    display: flex; /* or inline-flex */
    border: 5px solid #ffcc5c;
}

This one line activates Flexbox for all child elements inside “.container”. Now, instead of behaving like block elements, the children will respect Flexbox properties.

Step 2: Understanding The Core Concepts

1. The Two Axes:

• Main Axis → The direction items are arranged (horizontal by default).
• Cross Axis → Perpendicular to the main axis.

2. Flex Container & Flex Items

• Flex Container: The parent that holds the flex items.
• Flex Items: The direct children of the flex container.

Step 3: The Must-Know Flex Properties

flex-direction

Defines direction of main axis

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

Flex-direction: row (its the defalt direction):

Flex-direction: column:

justify-content

Aligns items along main axis (by default, horiontally)

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

Examples:

justify-content: flex-start:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  justify-content: flex-start;
}

justify-content: flex-end:

justify-content: center:

justify-content: space-between:

align-items

Aligns items along cross axis (by default, vertically):

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

align-items: stretch:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: stretch;
}

align-items: flex-start:

align-items: flex-end:

align-items: center:

targeting individual elements:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
}

.logout {
  align-self: flex-start;
}

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

Imp: difference b/w align-items and justify-content

align-items is for aligning vertically, and justify-content is for aligning horizontally, main axis (this is by default, considering flex-direction: row)

justify-content: center:

align-items:center:

Combining them both- Example1:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

Example 2:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  height: 100%;
  align-items: center;
}

.logout {
  align-self: flex-start;
}

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

flex-wrap

Controls wrapping of flex items.

by default it is flex-wrap: nowrap; ⇒ this means you can only have one row/column depending on flex direction.

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

Example: if the container width exceed the width of all elements combined:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
  flex-wrap: no-wrap;
}

.container > div {
  width: 300px;
}

when container is <900px:

when container is >900px:

Example: flex-wrap: wrap:

here, we can see, elements will be placed in row below, if there isn’t enough width of the container.

the flex property

if flex is 1, all flex elements will be equal width (or height in case of column direction). if we increase or decrease it for a certain element, we can size it proportional to other elements, in a responsive manner.

if we dont use flex property at any element, their width remains the same irrespective of screen size.

ex:

<html>
    <head>
        <link rel="stylesheet" href="basic.css">
        <link rel="stylesheet" href="index.css">
        <style>
         .container {
        border: 5px solid #ffcc5c;
        display: flex;
     }

     .container > div {
       flex: 1;
     }
    </style>
    </head>
    <body>
        <div class="container">
            <div class="home">Home</div>
            <div class="search">Search</div>
            <div class="logout">Logout</div>
            
        </div>
    </body>
</html>

if we increase flex for an element:

.container {
  border: 5px solid #ffcc5c;
  display: flex;
}

.container > div {
  flex: 1;
}

.container > .search {
  flex: 2;
}

Flex Item Properties

flex-grow

Defines ability to grow if necessary

.item {
    flex-grow: 0; /* default */
    flex-grow: 1; /* allow growth */
}

flex-shrink

Defines ability to shrink if necessary

.item {
    flex-shrink: 1; /* default */
    flex-shrink: 0; /* prevent shrinking */
}

flex-basis

Sets default size of element

.item {
    flex-basis: auto; /* default */
    flex-basis: 200px; /* specific width */
}

flex shorthand

Combines flex-grow, flex-shrink, and flex-basis

.item {
    flex: 0 1 auto; /* default */
    flex: 1; /* same as flex: 1 1 0% */
}

Note: when we set flex:1 (or any value for that matter), we are setting all 3 flex properties for that element. by default, flex: 1 denotes flex: 1 1 0;

 flex: 1;
 /*
 this means
 flex: 1 1 0;
     OR
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
 */

Common Use Cases

• Centering elements both horizontally and vertically
• Creating responsive navigation bars
• Building card layouts
• Creating equal-height columns

Browser Support

Flexbox is supported in all modern browsers. For older browsers, consider using vendor prefixes or fallback layouts.

Practical Example

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background-color: #f8f9fa;
}

.nav-items {
    display: flex;
    gap: 1rem;
}

.nav-item {
    flex: 0 1 auto;
}