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