❮ Previous Next ❯

CSS Flexbox

  • Learn CSS Flexbox to create flexible and responsive layouts easily.

  • What is CSS Flexbox ?

    CSS Flexbox (Flexible Box Layout) is a modern layout system designed to arrange elements in one direction at a time - either row (horizontal) or column (vertical).

    In simple words

    Flexbox helps you align, space, and arrange elements easily in a single direction.

    It solves problems like:
     Centering elements
     Equal spacing
     Flexible widths
     Vertical alignment

    Why CSS Flexbox is Important ? 

    Before Flexbox

    • Float hacks
    • Clearfix issues
    • Complex positioning
    • Hard-to-maintain layouts

    With Flexbox

    • Clean and readable code
    • Easy alignment
    • Responsive layouts
    • Less CSS, more control

    Real-life comparison:
    People standing in a line - they can stand side by side, stay evenly spaced, or move to the center.
    That’s exactly how Flexbox works.

    One - Dimensional Layout Explained

    Flexbox works in ONE direction at a time:

    • Row → horizontal
    • Column → vertical

    If you need rows + columns together, use CSS Grid, not Flexbox.

    Flexbox Terminology

    • Flex Container → Parent element
    • Flex Items → Child elements

    To activate Flexbox:

    display: flex;

Flexbox Basics

Flexbox is a layout system where the parent becomes a flex container and its children become flex items using display: flex;. 

<!DOCTYPE html>
<html>
<head>
    <title>Basic Flexbox Example</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }

        .box {
            padding: 20px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
    </div>
</body>
</html>

  • Boxes appear in a row by default

    Where Flexbox is Used Most

    Flexbox is commonly used for:

    • Navigation menus
    • Cards & layouts
    • Alignment & centering

    Flexbox for MENUS

    Menus usually need:
     Horizontal layout
     Equal spacing
     Clean alignment

Flexbox Navigation Menu

Horizontal navigation menu using Flexbox, removes bullet points, and adds spacing between menu items for a clean layout. 

.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

  • Menu items appear in one line
    Spacing is consistent

    Real-life comparison:
    Restaurant menu items arranged neatly in a row.

    Flexbox for Cards

    Cards often require:
     Equal height
     Flexible width
     Responsive behavior

Flexbox Card Layout

Creates responsive, equal-width cards using Flexbox with proper spacing between them. 

.cards {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  padding: 20px;
  border: 2px solid #333;
}

  • Cards share space evenly

    Real-life comparison:
    Product boxes arranged evenly on a shelf.

    Flexbox for Alignment

    Main Axis vs Cross Axis

    • Main Axis → Direction of flex items
    • Cross Axis → Perpendicular direction

    By default:
    • Main axis → horizontal
    • Cross axis → vertical

    Horizontal Alignment - justify-content

    Controls alignment along main axis.

    Common values:
     • flex-start
     • center
     • space-between
     • space-around
     • space-evenly

Horizontal Alignment using justify-content

Aligns flex items horizontally along the main axis, centering them inside the container. 

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

  • Items centered horizontally

    Vertical Alignment - align-items

    Controls alignment along cross axis.

    Common values:
     • stretch (default)
     • center
     • flex-start
     • flex-end

Vertical Alignment using align-items

Aligns flex items vertically along the cross axis, centering them inside the container. 

.container {
  display: flex;
  align-items: center;
  height: 200px;
}

  • Items centered vertically

    Perfect Centering

Perfect Centering with Flexbox

Centers content both horizontally and vertically inside the container using Flexbox. 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

  • Horizontally + vertically centered
    Clean and modern solution

    Direction Control - flex-direction

flex-direction

Changes the layout direction of flex items, stacking them vertically instead of the default horizontal row. 

flex-direction: row;    /* default */
flex-direction: column;

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

  • Items stack vertically

    Wrapping Items - flex-wrap

    Items move to next line when space is less

Wrapping Items and Flex Item Growth

flex-wrap allows items to move to the next line when space is limited, and flex: 1 makes each item grow and shrink evenly to fill available space. 

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

.box {
  flex: 1;
}

/* Equivalent to:
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
*/
  • Items grow and shrink automatically

Complete Flexbox Layout

Creates a flexible layout where items are evenly spaced horizontally and vertically centered inside the container. 

.layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

  • Clean alignment
    Equal spacing
    Responsive layout

    Common Mistakes

    Forgetting display: flex
    Confusing main axis & cross axis
    Using margins instead of flex alignment
    Using Flexbox for 2D layouts

    Best Practices for Flexbox

    Use Flexbox for one-dimensional layouts
    Use Grid for two-dimensional layouts
    Combine with media queries
    Keep alignment simple
    Master justify-content & align-items

    Flexbox = single-direction layout
    Easy alignment
    Perfect centering
    Cleaner than float
    Modern CSS essential

    CSS Flexbox is a one-dimensional layout system
    Perfect for menus, cards, and alignment
    Makes centering extremely easy
    Cleaner and more powerful than float
    Very important for interviews and real projects

❮ Previous Next ❯