FlexBox : Aligning Items In CSS 🛠️
Efficiently Aligning & Distributing Elements On The WebPage
Hello learners!
Ever wondered how does the content look so much aligned on the webpages? How is there a uniformity on the websites? Here comes the concept of FlexBox & Grid in CSS. This article will focus on FlexBox part of it while the Grid part will be discussed in a later on article. This article will be easy to comprehend and will have a FlexBox cheatsheet as well! So let’s dive into it!
What Is FlexBox? 📦
It is a CSS Layout Model which is widely used for aligning and distributing the elements within a parent container. It helps to make the websites more flexible. Hence the name, FlexBox. But why parent container?! Because the properties that we apply using FlexBox is applied to the children elements of some container & hence, there is a need to have a parent container.
The properties applied on the Parent Container will be passed onto each child element.
Container div is the parent element here, having 3 child div elements.
Parent element is being applied the
display: flexproperty.
Flex makes the child elements to come in horizontal line.
But why were the child elements in a vertical column like structure initially? Why not were they by default in horizontal row like structure? That is because, the child elements were <div> elements and they are block level elements.
Block Level & In-Line Level Elements 🧱
Block Level Element → These elements, no matter the length of content inside them, cover the entire row (block) for them. Even if it is a single alphabet inside the <div> tag, it will cover the entire row for it or we should say entire block for it.
| Common Block Level Elements |
<div></div> |
<p></p> |
<h1></h1> → <h6></h6> |
<ul></ul> |
<li></li> |
<ol></ol> |
<table></table> |
<td></td> |
<tr></tr> |
<hr> |
<header></header> |
<nav></nav> |
In-Line Level Element → These elements, cover only upto the extent which is required for them. If there is a single alphabet in the in-line level elements then it won’t occupy the entire block for it like the block level element.
| Common In-Line Level Elements |
<span></span> |
<img> |
<button></button> |
<input> |
<label></label> |
<a></a> |
This diagram describes the concept in easiest visual manner.
Main Axis & Cross Axis 📏
The main axis the horizontal axis while the Cross axis is the vertical axis. Yes, by using flex we can also arrange and aline elements in the vertical (column) direction as well.
When we applied
display: flexin the above code snippet, the child elements went from vertical direction to main axis because that is the default axis that the FlexBox plays on.
To align items on the Main Axis, we use the justify-content property which FlexBox gives us. To align items on the Cross Axis, because we have to align them vertically as well, we use the align-items property given by the FlexBox. For example, if you have to put an image in the centre of the webpage then you will have to use both the properties to ensure it is vertically as well as horizontally centred.
Justify-Content Visuals ↔️
Note → This diagram only showcases the positioning of the elements of the elements on the main-axis only.
justify-content: centerdoesn’t mean that it will directly put the elements onto the centre of the webpage. It is just showcasing the positioning on main-axis. To put on center of the webpage, we have to use align-items as well.
Align-Items Visuals ↕️
Note → The positioning is shown only with respect to the Cross-Axis and does not mean that by using only the
align-items: centerthe elements will directly be placed onto the center of the webpage. For that, we have to usejustify-content: centeras well.
Culmination Of Both Justify-Content & Align-Items ↔️ ↕️
The below diagram will be with respect to using both the justify-content & align-items properties simultaneously.
Note → The above diagram now tells you the exact combination of both the properties that is
justify-content&align-itemsto put your container on the right spot efficiently.One whole purple box depicts one group or one container with any number of child elements inside it. For easy visualisation purpose, I have shown them as one complete box instead of 2 or 3 different boxes for each child element.
Flex-Direction 🧭
By default the direction of FlexBox is row (horizontal direction). However, it can be changed to column direction as well, by using the property flex-direction: column; It interchanges the main axis and cross axis. You can use it when you don’t want the child elements to be aligned in one row altogether but to be aligned in a vertical direction. For example, one child element under other child element.
Note → After applying
flex-direction: column;the container holding these child elements will move collectively across the browser window and the order of the elements (one child under the other child) will remain constant throughout.
CheatSheet 📋
| Property | Values | Description | |||||
display | flex | Defines a flex container. | |||||
flex-direction | row | row-reverse | column | column-reverse | Sets the main axis direction. | ||
justify-content | flex-start | flex-end | center | space-between | space-around | space-evenly | Aligns items along the main axis. |
align-items | flex-start | flex-end | center | Aligns items along the cross axis. | |||
flex-wrap | nowrap | wrap | wrap-reverse | Controls item wrapping when all the elements can’t be contained in a single row they go to the next row. | |||
align-content | flex-start | flex-end | center | space-between | space-around | Aligns multiple rows (when wrapped). |
Spacing 🚀
Space Between ⚖️
Space Around 🔲
Space Evenly 🟰
Conclusion 🏁
Knowing FlexBox Layout Model becomes extremely crucial for aligning and positioning the elements on the webpage easily and efficiently. This article has covered the fundamentals of the concept in-depth and in a way that is easy to comprehend. I would suggest you to code out various possibilities that you can come up with using FlexBox only then you will get a grasp over the concept in a much more better way. Look into the various properties given in the cheatsheet and enjoy the process of learning. Follow for more such articles where I explain complex topics in easiest manner possible!