Flexbox (Flexible Box Layout) is a powerful layout module in CSS that makes it easier to design flexible, responsive layout structures without using floats or positioning hacks. Whether you're building complex web UIs or just aligning items on a single row, Flexbox makes layout more intuitive.
What is Flexbox?
Flexbox is a one-dimensional layout system — it deals with either rows or columns, not both at the same time like CSS Grid.
You use Flexbox by applying `display: flex;` or `display: inline-flex;` to a container element. Then, its children become flex items, and you can control their alignment, spacing, order, and more.
Flexbox Container Properties
These are the main properties you can apply to the flex container:
display: flex;
Activates Flexbox on the container.
flex-direction
Defines the direction of the main axis.
justify-content
Controls horizontal alignment (main axis).
align-items
Controls vertical alignment (cross axis).
flex-wrap
Lets items wrap onto multiple lines.
align-content
Controls space between lines when items wrap.
Flex Item Properties
These are the main properties you apply to individual flex items inside the container:
flex-grow
Defines how much a flex item can grow relative to others.
flex-shrink
Defines how much an item can shrink relative to others.
flex-basis
Sets the initial size of the item before space is distributed.
flex
Shorthand for flex-grow, flex-shrink, and flex-basis.
align-self
Overrides align-items for a single item.
Visual Example
Here’s a quick visual using Flexbox:
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 100px;
height: 100px;
background: lightblue;
margin: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
Why Use Flexbox?
- Makes responsive design easier
- Eliminates float & clearfix hacks
- Perfect for navbars, cards, toolbars, footers
- Great fallback for older browsers vs. Grid
Final Thoughts
Flexbox is an essential tool in every frontend developer’s toolkit. It’s simple, powerful, and widely supported. Once you understand the main vs cross axis, the rest becomes much easier.
No comments:
Post a Comment