0
0
CSSmarkup~5 mins

Why flexbox is needed in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Flexbox helps arrange items neatly in a row or column. It makes layouts easy and flexible on different screen sizes.

When you want items to line up horizontally or vertically without extra space issues.
When you need items to adjust their size automatically to fit the screen.
When you want to center items easily both horizontally and vertically.
When you want to create responsive menus or toolbars that adapt to screen width.
When you want to control spacing between items without using complicated margins.
Syntax
CSS
container {
  display: flex;
  flex-direction: row; /* or column */
  justify-content: flex-start; /* or center, space-between, space-around */
  align-items: flex-start; /* or center, stretch */
}

display: flex; turns the container into a flexible box.

flex-direction sets the main axis direction (row or column).

Examples
This makes a navigation bar with items spaced evenly and centered vertically.
CSS
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
This stacks sidebar items vertically and stretches them to fill the container width.
CSS
sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
Sample Program

This example shows three boxes arranged in a row with equal space around them. They are centered vertically in the browser window. You can tab through each box for accessibility.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;
    }
    .box {
      background-color: #4CAF50;
      color: white;
      padding: 2rem;
      font-size: 1.5rem;
      border-radius: 0.5rem;
      width: 10rem;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container" role="main" aria-label="Flexbox container">
    <div class="box" tabindex="0">Box 1</div>
    <div class="box" tabindex="0">Box 2</div>
    <div class="box" tabindex="0">Box 3</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Flexbox works well for one-dimensional layouts (row or column).

It helps avoid tricky float or positioning hacks from older CSS methods.

Always use semantic HTML and ARIA roles for better accessibility with flexbox layouts.

Summary

Flexbox makes arranging items in a row or column simple and flexible.

It helps create responsive designs that adjust to different screen sizes.

Flexbox improves layout control without complicated CSS tricks.