The Flexible Box Layout module (Flexbox) introduces a one-dimensional layout system that handles space distribution and item alignment effectively. It works seamlessly for horizontal (row) or vertical (column) arrangements, making it a go-to solution for modern, responsive designs.
Before Flexbox, web layouts heavily relied on properties like block, inline, table, and float, which were often clunky and difficult to use for complex responsive designs.
Why use Flexbox?
To start using Flexbox, you must define a container element as a flex container by setting its display property to flex.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f4f4f9;
padding: 10px;
border: 2px solid navy;
}
.flex-item {
background-color: lightblue;
color: navy;
margin: 5px;
padding: 20px;
text-align: center;
border: 1px solid navy;
flex: 1; /* Makes all items equal width */
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>
</html>
In this example:
.flex-container class applies display: flex;, designating the div as a flex container..flex-item is styled with flex: 1; to have an equal width within the container.To master Flexbox, you must understand its components and how it calculates space along its axes.
<div>) that has display: flex applied to it.Flexbox operates strictly on two axes. How items are aligned depends entirely on which axis you are targeting.
The main axis is the primary axis along which flex items are laid out. By default, this is horizontal (left to right).
The cross axis is always perpendicular (at a 90-degree angle) to the main axis. By default, this is vertical (top to bottom).
The flex-direction property defines the direction of the Main Axis, dictating how items are placed in the container.
| Property Value | Description |
|---|---|
row |
(Default) Left to Right. Main axis is horizontal. |
row-reverse |
Right to Left. Main axis is horizontal, but items start from the right. |
column |
Top to Bottom. Main axis is vertical. |
column-reverse |
Bottom to Top. Main axis is vertical, but items start from the bottom. |
Flexbox provides powerful properties applied to the Container for aligning its inner items.
justify-content (Main Axis Alignment)Aligns items along the Main Axis.
flex-start: Items pack to the start of the line.flex-end: Items pack to the end of the line.center: Items are centered along the line.space-between: Items are evenly distributed (first item at the start, last at the end).space-around: Items are evenly distributed with equal space around them.align-items (Cross Axis Alignment)Aligns items along the Cross Axis.
stretch: (Default) Items stretch to fill the container vertically.flex-start: Items align to the top of the cross axis.flex-end: Items align to the bottom of the cross axis.center: Items are centered vertically.align-content (Multi-line Alignment)Aligns entire rows within a flex container when there is extra space on the cross axis. (Note: This only works if flex-wrap: wrap is applied and there are multiple lines of content).
Flexbox excels at creating responsive designs by adjusting items to fit various screen sizes. You can use flex-wrap and media queries to ensure your layout adapts seamlessly to mobile devices.
<!DOCTYPE html>
<html>
<head>
<style>
.responsive-container {
display: flex;
flex-wrap: wrap; /* Allows items to drop to the next line */
justify-content: space-around;
background-color: navy;
padding: 10px;
}
.responsive-container div {
background-color: lightblue;
color: navy;
font-weight: bold;
margin: 10px;
padding: 20px;
text-align: center;
/* Grow/shrink as needed, base width 200px */
flex: 1 1 200px;
}
/* Mobile view: Stack items vertically */
@media (max-width: 600px) {
.responsive-container {
flex-direction: column;
}
}
</style>
</head>
<body>
<h3>Resize the browser window!</h3>
<div class="responsive-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
flex-wrap: wrap allows items to flow onto a new line if the screen is too small.flex-direction: column for narrow mobile screens.Flexbox is the modern standard for creating clean, perfectly aligned navigation bars.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
display: flex;
justify-content: space-between; /* Spreads items evenly */
align-items: center; /* Vertically centers the text */
background-color: navy;
padding: 10px 20px;
font-family: sans-serif;
}
.nav-brand {
color: white;
font-size: 24px;
font-weight: bold;
}
.nav-links {
display: flex; /* Nested flex container! */
gap: 15px; /* Adds space between links */
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
border-radius: 4px;
transition: background 0.3s;
}
.navbar a:hover {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<div class="navbar">
<div class="nav-brand">IntricateDevo</div>
<div class="nav-links">
<a href="#home">Home</a>
<a href="#courses">Courses</a>
<a href="#contact">Contact</a>
</div>
</div>
</body>
</html>
.navbar uses justify-content: space-between to push the brand logo to the far left and the links to the far right..nav-links div acts as a nested flex container to easily align the individual anchor tags side-by-side.Which Flexbox property is used to align items horizontally along the main axis (e.g., centering them or spacing them out)?