Welcome, fellow style sorcerers! Today, we're diving into the magical realm of Flexbox, where CSS transforms from a mere styling language into a layout wizard's wand. Ready to wield the power of flex? Let's enchant our layouts! 🪄🌈
Importance of Responsive Design💻📱
With more people glued to their phones than ever, if your website can't shape-shift like a digital Mystique, you're in for a world of hurt. Responsive design is not just a fancy buzzword; it's the cape that turns your website into a superhero, ready to save the day on any device. And with Google giving the cold shoulder to non-responsive sites, it's like having SEO kryptonite in your pocket. This is where CSS Flexbox comes into play and makes things easier for developers.
What is Flexbox🤔??
The flexible box layout module, usually referred to as flexbox, was designed as a one-dimensional layout model. It is a way of arranging things on a web page in a single line, either horizontally or vertically. It can also help you adjust the size and position of those things to make them look nice and neat. Flexbox adapts faster than a chameleon on a disco floor, keeping everything looking sharp and responsive. Flexbox is like a magic wand for web designers, except it doesn’t work on Internet Explorer.😜
Flexbox is not a box. It’s a flex container. And it’s not a container. It’s a display property. And it’s not a property. It’s a layout module. And it’s not a module. It’s a… never mind, just use it.
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools available for creating CSS layouts were features like floats and positioning. These work, but in some ways they're also limiting and frustrating. As you'll see in subsequent sections, Flexbox, the superhero of web design, puts an end to the age-old question: "How do you center a div?" The answer is simple: just flex it! Let's dig in!
Flexbox is a whole CSS module, not a single property, so there’s a lot to cover to master this powerful tool. We’ll try to cover the most important ones as we go.
Basic concepts of flexbox
-
flex-direction: Controls the direction in which the flex-items are laid along the main axis -
main axis: This is the primary axis that flex items are laid out along. It is not always horizontal. -
main-start/main-end: flex items are set within a container starting from themain-starttomain-end -
cross axis: This is the axis that is perpendicular to the main axis.
When working with flexbox you need to think in terms of two axes — the main axis and the cross axis. The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. Everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset.
Both the axes are defined by flex-direction, which has four possible values, namely:
rowrow-reversecolumncolumn-reverse
Ok I won't bore you more with my "boring" words, now let's have some fun playing with the flexbox!!!
HTML code:
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
</div>
</body>
Flexbox properties
- Display
.container {
width: 100%;
height: 100vh;
background: #e76262;
display: flex; //This property converts the container div to flexbox
}
.child {
width: 30px;
height: 30px;
background: #eaf45c;
color: blue;
}
Output:
- Flex-direction:
/* This property is set by default when we initialize flexbox */
.container {
flex-direction: row;
}
/* Like <row>, but reversed */
.container {
flex-direction: row-reverse;
}
/* The direction in which lines of text are stacked */
.container{
flex-direction: column;
}
/* Like <column>, but reversed */
.container{
flex-direction: column-reverse;
}
- justify-content
This property is for alignment along the main-axis i.e. horizontally. The flex items may be aligned across the main-axis however you need. This property takes on any of the values below:
.container{
justify-content: flex-start || flex-end || center || space-between || space-around;
}
flex-start(default):- Items are placed at the start of flex-direction.flex-end:- Items are placed at the end of flex-direction.center:- Items are centred in the container.space-between:- Items are evenly distributed.space-around:- Items are evenly distributed with equal space between and around them.
- align-items align-items defines how your flex-items are laid out on the cross-axis i.e. vertically. It can be set to any of these values:
.container{
align-items: flex-start || flex-end || center || stretch;
}
-
flex-start:- Items placed at the start of the container. -
flex-end:- Items placed at the end of the container. -
center:- Items are centred. -
stretch:- Items are stretched to take up the remaining space of your container.
Resources
Reference to MDN docs - Flexbox
Flexbox froggy - A game for learning CSS flexbox
Ready to take over the steering??
Web development is a fast-changing field, and new technologies emerge every day. Therefore, I cannot cover every aspect of flexbox in this tutorial. There are many other topics, such as flex-grow, order, flex-shrink, flex-basis, and many more, that you can explore on your own. Ultimately, no blog or tutorial can teach you everything; you have to learn how to find and use the information you need.
Conclusion
In the end, whether you're a web design newbie or a seasoned pro, Flexbox is your friend. It's the friendly neighbourhood Spider-Man of CSS, swinging in to save your layout troubles with its one-dimensional awesomeness. So go ahead, give it a whirl, and watch your web designs do the limbo under any screen size bar with ease. Just remember, with the great power (of Flexbox) comes great responsibility (to make responsive websites).
Top comments (0)