CSS Flexbox is a one-dimensional layout method for arranging items in rows or columns. It provides a more efficient way to distribute space and align items in a container, making responsive design easier and more intuitive.
What is CSS Flexbox?
CSS Flexbox is a one-dimensional layout method for arranging items in rows or columns. It provides a more efficient way to distribute space and align items in a container, making responsive design easier and more intuitive than traditional CSS layout methods.
What Flexbox Does
Flexbox solves common layout problems by providing:
Key Concepts
Flex Container
The parent element that becomes a flex container by setting display: flex or display: inline-flex.
Flex Items
The direct children of a flex container that become flex items automatically.
Main Axis
The primary axis along which flex items are laid out (row or column direction).
Cross Axis
The axis perpendicular to the main axis, used for alignment.
Container Properties
display
.container {
display: flex; /* Block-level flex container */
display: inline-flex; /* Inline-level flex container */
}flex-direction
Controls the direction of the main axis:
.container {
flex-direction: row; /* Left to right (default) */
flex-direction: row-reverse; /* Right to left */
flex-direction: column; /* Top to bottom */
flex-direction: column-reverse; /* Bottom to top */
}flex-wrap
Controls whether items wrap to new lines:
.container {
flex-wrap: nowrap; /* Single line (default) */
flex-wrap: wrap; /* Multiple lines */
flex-wrap: wrap-reverse; /* Multiple lines, reverse */
}justify-content
Aligns items along the main axis:
.container {
justify-content: flex-start; /* Start of main axis (default) */
justify-content: flex-end; /* End of main axis */
justify-content: center; /* Center of main axis */
justify-content: space-between; /* Space between items */
justify-content: space-around; /* Space around items */
justify-content: space-evenly; /* Equal space around items */
}align-items
Aligns items along the cross axis:
.container {
align-items: stretch; /* Stretch to fill container (default) */
align-items: flex-start; /* Start of cross axis */
align-items: flex-end; /* End of cross axis */
align-items: center; /* Center of cross axis */
align-items: baseline; /* Baseline alignment */
}align-content
Aligns multiple lines when flex-wrap is enabled:
.container {
align-content: stretch; /* Stretch lines (default) */
align-content: flex-start; /* Start of cross axis */
align-content: flex-end; /* End of cross axis */
align-content: center; /* Center of cross axis */
align-content: space-between; /* Space between lines */
align-content: space-around; /* Space around lines */
}Item Properties
flex-grow
Controls how much an item can grow relative to other items:
.item {
flex-grow: 0; /* Don't grow (default) */
flex-grow: 1; /* Grow equally with other items */
flex-grow: 2; /* Grow twice as much as items with flex-grow: 1 */
}flex-shrink
Controls how much an item can shrink relative to other items:
.item {
flex-shrink: 1; /* Shrink if needed (default) */
flex-shrink: 0; /* Don't shrink */
flex-shrink: 2; /* Shrink twice as much as items with flex-shrink: 1 */
}flex-basis
Sets the initial main size of an item:
.item {
flex-basis: auto; /* Use content size (default) */
flex-basis: 0; /* Zero size */
flex-basis: 200px; /* Fixed size */
flex-basis: 50%; /* Percentage of container */
}flex (Shorthand)
Combines flex-grow, flex-shrink, and flex-basis:
.item {
flex: 0 1 auto; /* Default values */
flex: 1; /* flex: 1 1 0% */
flex: 1 0 200px; /* Grow, don't shrink, 200px basis */
flex: none; /* flex: 0 0 auto */
}align-self
Overrides the container's align-items for a specific item:
.item {
align-self: auto; /* Use container's align-items (default) */
align-self: flex-start; /* Override to start */
align-self: center; /* Override to center */
align-self: flex-end; /* Override to end */
}order
Changes the visual order of items:
.item {
order: 0; /* Default order */
order: 1; /* Move later in order */
order: -1; /* Move earlier in order */
}Common Use Cases
Navigation Bars: Horizontal or vertical navigation with proper spacing.
Card Layouts: Responsive grid-like layouts that adapt to content.
Form Layouts: Aligning form elements and labels consistently.
Centering Content: Easy centering of items both horizontally and vertically.
Responsive Design: Layouts that adapt to different screen sizes.
Equal Height Columns: Columns that maintain equal height regardless of content.
Browser Support
Flexbox is supported in all modern browsers:
Why It Matters
CSS Flexbox revolutionized web layout because it:
CSS Flexbox has become an essential tool for modern web development, making it possible to create flexible, responsive layouts with clean, maintainable code.