Let’s get Flexy: CSS Flex-Box Explained
While learning and using CSS can be a tricky one, I find it to be a fun tech language. I love learning about all the slight/minute adjustments that can be made with CSS to make your page pop and look just the way you want. To me, it’s a way of painting with code.
With that being said, I thought I’d focus on one of the most integral CSS skills to learn and that is a Flex-box.
What’s a Flex Box?
There’s a flex box property, with a syntax written like this:
section {
display: flex;
}A flex box, also known as Flexible Box Layout, allows you to stretch, shrink elements and distribute space in your DOM. A flex box will allow you to make your code design responsive. There are CSS Layout properties like floats, inline blocks, and absolute positioning that can most certainly work towards implementing a design, the issue is that those properties on their own won’t provide enough flexibility for the complex responsive web designs that are built today.
What’s excellent about using a flex box is that you can evenly distribute space inside of a container so that all columns are of equal width. (see example a little below)
Flex items on Two Axis’s
The MDN docs in regards to flexbox show us that when elements are laid out as flex items they are laid out along two axes: main axis & cross axis.
Two important things to know to utilize flexbox. You need:
- a container to hold the elements you want to evenly align
- the elements to put inside of your container
Let’s look at a simple example.
Here’s three div’s before using flexbox. They are simply three divs inside of a div container without using the ‘display: flex;’ property.
index.html file:
<body><div class="flexbox-container"><div class="flexbox-item flexbox-item-1"></div><div class="flexbox-item flexbox-item-2"></div><div class="flexbox-item flexbox-item-3"></div></div>
css file:
.flexbox-item {width: 200px;margin: 10px;border: 3px solid #333;background-color: #dfdfdf;}.flexbox-item-1{min-height: 100px;}.flexbox-item-2 {min-height: 200px;}.flexbox-item-3 {min-height: 300px;}
Here’s what happens when we add our ‘display: flex;’ property is added to the parent div container! Voila, all three divs are evenly spaced are the same height and all show up in one row!
.flexbox-container{display: flex;}
There are a couple of properties you can add to the flex box to get more specific. In the example above the divs are showing up in a row as opposed to a column. Here’s an example of changing the layout to column:
.flexbox-container{display: flex;flex-direction: column;}
This will render the divs as they look in the Example 1-Column photo from above.
How to Align items on the Main-axis(horizontal axis)
To Align items on the main axis you can add the property ‘justify-content:center;’:
.flexbox-container{display: flex;justify-content: center;}
This will evenly space our three divs in the center of our app.
One last property I will add to the mix is creating even space between the divs based on the size of the webpage. Now we change ‘justify-content: center;’ to ‘justify-content:space-between;’
.flexbox-container{display: flex;justify-content: space-between;}
This will render like this:
Conclusion
There are quite a bit of properties to play with just within flex box itself, and still more to learn I didn’t cover here. Check out the MDN docs for more of these properties and I would recommend going and practicing some of my examples from here. For more practice there is also this fun flex box froggy game . Also! Check out this MDN Docs-related Skills Test for testing your Flex box knowledge. Thanks for reading and happy hacking to you! =)
