Flexbox, short for CSS Flexible Box Layout, is a powerful and efficient layout model introduced in CSS3. Its main purpose is to provide a more consistent and intuitive way to design layouts where items need to adapt to different screen sizes and dynamic content lengths.
Traditional layout methods—like floats, inline-block, or positioning—often require a lot of workarounds and are not ideal for building responsive, flexible UIs. Flexbox solves many of those problems by allowing elements within a container to automatically adjust size, alignment, and spacing depending on the available space.
With Flexbox, developers can:
Align elements vertically and horizontally with ease.
Distribute space evenly between or around items.
Reorder items visually without changing the HTML source.
Build components that automatically adjust to different screen sizes.
This makes it incredibly useful for modern web design needs such as:
Responsive navigation menus that adjust on smaller screens.
Card layouts that realign themselves in rows or columns.
Centering content both horizontally and vertically.
Creating fluid grids or sections without relying on external frameworks.
🚀 Why Use Flexbox?
One-dimensional layout: Works in a row or column
Align items easily horizontally and vertically
Responsive and adaptable to different screen sizes
Less need for floats and complicated positioning
🏗️ Basic Terminology
🔹 Flex Container
An element with display: flex or display: inline-flex.
🔹 Flex Items
The direct children of a flex container.
✅ Getting Started
HTML
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
🎨 CSS
.container {
display: flex;
border: 2px solid #ccc;
padding: 10px;
}
.box {
background: #4caf50;
color: white;
padding: 20px;
margin: 5px;
}
This will display the boxes in a row, side-by-side.
📏 Main Axis vs Cross Axis
Main Axis: The direction flex items are placed (default: row/horizontal).
Cross Axis: Perpendicular to the main axis (default: column/vertical).
🧭 Common Flexbox Properties
🔹 For the Container
Property What It Does
flex-direction Row or column layout
justify-content Align items along the main axis
align-items Align items along the cross axis
flex-wrap Wrap items onto multiple lines
gap Spacing between items
Example:
.container {
display: flex;
flex-direction: row; /* row | column */
justify-content: space-between; /* center | space-around | flex-end etc. */
align-items: center; /* stretch | center | flex-start etc. */
flex-wrap: wrap; /* no-wrap (default) or wrap */
gap: 20px;
}
🔹 For the Items
| Property | What It Does |
|---|---|
flex | Grow, shrink, and base width |
flex-grow | How much to grow relative to siblings |
flex-shrink | How much to shrink |
flex-basis | Default size before growing/shrinking |
align-self | Overrides align-items for one item |
.box {
flex: 1; /* equal width for all boxes */
}
🎯 Real Example: Responsive Navigation Bar html Copy Edit
<nav class="navbar">
<div class="logo">MySite</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: #222;
color: white;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
📱 Flexbox + Responsive Design Flexbox is responsive by default.
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
align-items: flex-start;
}
}