CSS Tip #2: Flexbox Fundamentals
CSS Tip #2: Flexbox Fundamentals
Flexbox is a powerful layout method that makes it easy to create flexible, responsive designs. Let's master the fundamentals!
What is Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout method that allows you to distribute space among items in a container, even when their size is unknown or dynamic.
Key Concepts
Flex Container
The parent element with display: flex or display: inline-flex
Flex Items
The direct children of the flex container
Essential Properties
Container Properties
.flex-container {
display: flex;
flex-direction: row; /* row | row-reverse | column | column-reverse */
flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */
gap: 20px; /* Space between items */
}
Item Properties
.flex-item {
flex-grow: 0; /* How much the item should grow */
flex-shrink: 1; /* How much the item should shrink */
flex-basis: auto; /* Initial size before free space is distributed */
flex: 1; /* Shorthand: grow shrink basis */
align-self: auto; /* Override align-items for this item */
order: 0; /* Order in which items appear */
}
Common Patterns
Centering Content
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Equal Height Columns
.columns {
display: flex;
}
.column {
flex: 1; /* Equal width */
}
Navigation Bar
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-item {
flex: 0 0 auto; /* Don't grow or shrink */
}
Card Layout
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Grow, shrink, min-width */
}
Browser Support
Flexbox is supported in all modern browsers. For older browsers, consider using autoprefixer or fallbacks.
Pro Tips
- Use
flex: 1instead offlex-grow: 1for cleaner code gapproperty is cleaner than margins for spacingalign-items: centervertically centers contentjustify-content: space-betweendistributes items evenly
Next Up
In two days, we'll explore CSS Grid - the two-dimensional layout system that works perfectly alongside Flexbox!
Happy coding! 🎯
Struggling with a Flexbox layout? Send me your code and I'll help you solve it!
Add a comment: