Essential Flexbox properties and values with practical examples
Defines the element as a flex container
display: flex;
Defines the direction of flex items
flex-direction: row;
Defines whether flex items wrap to new lines
flex-wrap: wrap;
Shorthand for flex-direction and flex-wrap
flex-flow: row wrap;
Aligns flex items along the main axis
justify-content: center;
Aligns flex items along the cross axis
align-items: center;
Aligns flex lines when there is extra space
align-content: space-between;
Controls the order of flex items
order: 1;
Defines how much a flex item can grow
flex-grow: 1;
Defines how much a flex item can shrink
flex-shrink: 1;
Defines the initial size of a flex item
flex-basis: 200px;
Shorthand for flex-grow, flex-shrink, and flex-basis
flex: 1 1 auto;
Overrides align-items for individual items
align-self: center;
Perfect centering with flexbox
.centered {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Horizontal navigation with space-between
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.nav-links {
display: flex;
gap: 2rem;
}
Responsive card grid with flexbox
.card-container {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.card {
flex: 1 1 300px;
min-width: 0;
}
Footer that sticks to bottom
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
margin-top: auto;
}
Use flex: 1
for equal-width items
Combine justify-content
and align-items
for perfect centering
Use flex-wrap: wrap
for responsive layouts
Prefer gap
over margins for spacing between flex items