CSS
9 min read
Complete Guide to CSS Flexbox | Master Modern Layouts
Introduction to Flexbox
David Lee
July 1, 2024
Table of Contents
Introduction to Flexbox
Flexbox is a CSS layout module that provides a more efficient way to lay out, align, and distribute space among items in a container.
1. Introduction to Flexbox
Flexbox is a CSS layout module that provides a more efficient way to lay out, align, and distribute space among items in a container.
2. Flexbox Properties
Container Properties
.container {
display: flex;
flex-direction: row; /* or column */
justify-content: center; /* Main axis alignment */
align-items: center; /* Cross axis alignment */
flex-wrap: wrap; /* Allow items to wrap */
gap: 1rem; /* Space between items */
}
Item Properties
.item {
flex: 1; /* Grow factor */
flex-shrink: 0; /* Shrink factor */
flex-basis: auto; /* Base size */
align-self: flex-start; /* Override alignment */
}
3. Creating Responsive Layouts
Center Content Perfectly
.center-all {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Equal Height Columns
.row {
display: flex;
gap: 1rem;
}
.column {
flex: 1;
}
4. Flexbox vs Grid
Use Flexbox for:
- One-dimensional layouts
- Component-level alignment
- Dynamic content sizing Use Grid for:
- Two-dimensional layouts
- Overall page structure
- Precise row/column control
Need CSS Help? Contact Giopio Related: CSS Grid, Responsive Design
