Lecture 14: Flexbox – The Modern Way to Align and Distribute Space
Hey there! Ready to dive into one of the coolest and most powerful tools in CSS? Today, we’re going to explore Flexbox. If you’ve ever struggled with aligning items or distributing space in a neat and responsive way, Flexbox is your new best friend.
1. What is Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout system that allows you to control the alignment, spacing, and distribution of elements inside a container—even when the size of those elements is unknown or dynamic.
Think of Flexbox as a toolbox to create layouts that can stretch, shrink, or align depending on the available space.
2. The Magic Begins with display: flex
To start using Flexbox, you only need to set display: flex
on a container. Once you do that, all the direct children of that container become flex items, and they’ll immediately start behaving differently.
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.flex-container {
display: flex;
}
Now, all the items inside .flex-container
are flex items and can be easily manipulated.
3. Flex Direction – Which Way Should We Go?
By default, Flexbox arranges items in a row (horizontally), but what if you want them in a column (vertically)? Flexbox gives you total control with the flex-direction
property.
-
row
: Align items in a horizontal row (this is the default). -
column
: Stack items in a vertical column. -
row-reverse
: Same asrow
, but the order of items is reversed. -
column-reverse
: Same ascolumn
, but items are stacked in reverse order.
.flex-container {
display: flex;
flex-direction: column;
}
Now, the items will stack vertically!
4. Justifying Content – Spreading Things Out
Let’s say you have three items, and you want to spread them out evenly in your container. This is where justify-content
comes in handy.
-
flex-start
: Items align to the start of the container (default). -
center
: Items are centered. -
space-between
: Items are evenly spaced, with the first item at the start and the last item at the end. -
space-around
: Items are spaced with equal padding around each item.
.flex-container {
display: flex;
justify-content: space-between;
}
Now, the items will be evenly spaced within the container.
5. Aligning Items – Vertical Magic
While justify-content
controls horizontal alignment, align-items
takes care of vertical alignment (or along the cross-axis). Here are your options:
-
stretch
: Items stretch to fill the container (default). -
flex-start
: Items align to the top. -
flex-end
: Items align to the bottom. -
center
: Items are vertically centered.
.flex-container {
display: flex;
align-items: center;
}
Now, all the items will be vertically centered within the container.
6. Flex-Grow, Flex-Shrink, and Flex-Basis – Fine-Tuning the Flex Items
Sometimes, you want certain items to grow, shrink, or have a fixed starting size. The flex-grow
, flex-shrink
, and flex-basis
properties let you control that behavior:
-
flex-grow
: Controls how much an item should grow relative to the other items. -
flex-shrink
: Controls how much an item should shrink relative to the other items. -
flex-basis
: Sets the initial size of the item before it grows or shrinks.
Example:
.item {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 100px;
}
This ensures that the item starts at 100px, but it can grow to fill extra space if needed, without shrinking.
7. Flexbox Example in Action
Let’s put all this together with an example!
<div class="flex-container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
height: 300px;
background-color: #f0f0f0;
}
.item {
background-color: #4CAF50;
padding: 20px;
color: white;
flex-grow: 1;
}
In this example:
- Items are arranged in a row.
- They are evenly spaced out with
justify-content: space-around
. - All items are vertically centered in the container with
align-items: center
. - Each item grows to fill the available space equally, thanks to
flex-grow: 1
.
8. Why Flexbox Rocks
Flexbox takes away much of the complexity of layout design that we used to struggle with in CSS. No more floats, no more worrying about clearing, and much easier responsive design!
Key Takeaways:
- Use
display: flex
to turn a container into a flex container. - Use
flex-direction
to set the flow direction (row or column). - Use
justify-content
andalign-items
to control spacing and alignment. - Fine-tune your flex items with
flex-grow
,flex-shrink
, andflex-basis
.
Top comments (2)
Nice article! Great for getting started with
display: flex
. For a deep-dive check out this article on CSS-Tricks.Yeah I have checked it, it's nicely organized and understandable .