Flexbox is a CSS layout style that lines up items in a single direction — either side-by-side in a row or stacked in a column.
When you create a website, it helps you align elements like buttons, tabs, menus, or cards in an organized manner, and they intelligently adjust to look great on any screen size.
The following key points of flexbox:
- It’s perfect for placing items in one clean line — either next to each other in a row or stacked neatly in a column.
- It makes spacing and alignment between items easy.
- It works great for responsive design, so your layout looks perfect on any screen size.
Syntax:
.parent { display: flex; /* Enables Flexbox */
flex-direction: row; /* or column */
justify-content:space-between; /* Horizontal alignment */
align-items: center; /* Vertical alignment */ }
Example:
CSS:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 100px;
background: #f0f0f0;
}
.box {
background: #4CAF50;
color: white;
padding: 20px;
margin: 10px;
}
HTML:
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
Output:
You will see three green boxes (Box 1, Box 2, Box 3) arranged side by side with equal space around them.
They are centered vertically inside a light grey bar.