Understanding Flexbox to make things easy 👏
If you are not willing to learn, no one can help you. If you are determined to learn no one can stop you
Hey everyone, I have decided to start the article with this quote to let you know that once you start to learn, there is nothing that can stop you because you always learn something new and will grow. (Every one of us needs a small motivation sometimes isn’t it? 😉 )
With that let us get on to this topic. Some of you might have and some of you might not have heard the term called flexbox in CSS. Do not worry, this is an article for everyone who learns it for the first time and for the ones who already know but came here to read the article to sharpen their knowledge.
Therefore this article will first walk you through the introduction to flexbox in CSS, then moves to the flexbox model. Once you get a clear idea about what is meant by flexbox, we’ll be moving to flexbox properties.
HOPE YOU ARE READY TO BEGIN… 💥
As promised let us begin this with an Introduction.
What is Flexbox?
Flexbox is a one-dimensional layout method for arranging items in rows or columns. It has a flexible and efficient layout with distributed spaces among items to control its alignment structure. Flexbox can be useful for creating small-scale layouts & is responsive and mobile-friendly.
Why do we use Flexbox?
We choose to use flexbox is because you want to lay a collection of items out in one direction or another.
For an instance following simple layout designs are either challengeable or impossible to achieve with any tool in a flexible way BUT flexbox makes a lot of layout tasks much easier.
- vertically centring a block of content inside its parent.
- Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
- Make all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
Features of flexbox?
When you talk about the features of flexbox, It gives a lot of flexibility where you would able to arrange, order and align the items with proper spacing.
When you get into more details on it for better understanding, there are 5 notable features in flexbox layout such as
- Direction − You can arrange the items on a web page in any direction such as left to right, right to left, top to bottom, and bottom to top.
- Order − Using Flexbox, you can rearrange the order of the contents of a web page.
- Wrap − In case of inconsistent space for the contents of a web page (in a single line), you can wrap them in multiple lines (both horizontally) and vertically.
- Alignment − Using Flexbox, you can align the contents of the webpage with respect to their container.
- Resize − Using Flexbox, you can increase or decrease the size of the items on the page to fit in available space.
When to use flexbox?
You can use flexbox to build a whole web page. But when you looking at a better CSS approach it is a more straightforward, well-written, and maintainable application in the long term, to create and fit your layout perfectly, when you consider using the flexbox in the following scenarios
- When you have a small design to implement — Flexbox is ideal when you have a small layout design to implement, with a few rows or a few columns
- When you need to align elements — Flexbox is perfect for that, the only thing we should do is create a flex container using display: flex and then define the flex-direction that we want
- When you need a content-first design — Flexbox is the ideal layout system to create web pages if you don’t know exactly how your content is going to look, so if you want everything just to fit in, Flexbox is perfect for that.
Difference between flexbox and grid?
The basic difference between CSS flexbox and CSS grid is that CSS flexbox is used for the alignment, while CSS grid is used for the layout.
What is the Flexbox model?
- When elements are laid out as flex items, they are laid out along two axes. Such as the main axis and cross axis.
- The main axis is the axis running in the direction the flex items are laid out.
- The cross axis is the axis running perpendicular to the direction the flex items are laid out in.
- The parent element that has a display: flex set on it is called the flex container.
- The items laid out as flexible boxes inside the flex container are called flex items
With all this knowledge, I hope now you do have thorough knowledge about what is meant by flexbox, with that knowledge let’s get ready to move on to flexbox properties.
LET’S DIG DEEP… 💥
Flex Container Properties
There are six types of flex container properties as follows
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
🔴flex-direction
The Flex-direction property controls the direction in which the flex items are laid along the main axis. In simpler terms, it means that the flex-direction defines in which direction the container wants to stack the flex items.
There are 4 methods that you’ll be able to use as the flex-direction.
Type 01:- column
/* When you want to stack the flex items vertically (from top to bottom)*/
.flex-container {
display: flex;
flex-direction: column;
}Type 02:- column-reverse
/* When you want to stack the flex items vertically (but from bottom to top)*/
.flex-container {
display: flex;
flex-direction: column-reverse;
}Type 03:- row
/* When you want to stack the flex items horizontally (from left to right)*/
.flex-container {
display: flex;
flex-direction: row;
}Type 04:- row-reverse
/* When you want to stack the flex items horizontally (but from right to left)*/
.flex-container {
display: flex;
flex-direction: row-reverse;
}
🔴flex-wrap
One issue that arises when you have a fixed width or height in your layout is that eventually, your flexbox children will overflow their container, breaking the layout. As a solution for this matter, we use the flex-wrap property which specifies whether the flex items should wrap or not.
Wrap the item (wrap)
/*Specifies to wrap the flex items if necessary*/
.flex-container {
display: flex;
flex-wrap: wrap;
}Not to wrap the item (nowrap)
/*Specifies that the flex items will not wrap (this is default)*/
.flex-container {
display: flex;
flex-wrap: nowrap;
}Wrap the items in reverse order (wrap-reverse)
/*Specifies that the flexible items will wrap if necessary, in reverse order*/
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
🔴flex-flow
It is a shorthand property for setting both the flex-direction and flex-wrap properties.
flex-direction: row;
flex-wrap: wrap;with👇
flex-flow: row wrap;🔴justify-content
justify-content controls where the flex items sit on the main axis. In simpler terms used to align the flex items.
Type 01:- center
/*Aligns the flex items at the center of the container*/
.flex-container {
display: flex;
justify-content: center;
}Type 02:- flex-start
/*Aligns the flex items at the beginning of the container (this is default)*/
.flex-container {
display: flex;
justify-content: flex-start;
}Type 03:- flex-end
/*Aligns the flex items at the end of the container*/
.flex-container {
display: flex;
justify-content: flex-end;
}Type 04:- space-around
/*Distributes all the items evenly along the main axis with a bit of space left at either end. which means displays the flex items with space before, between, and after the lines*/
.flex-container {
display: flex;
justify-content: space-around;
}Type 05:- space-between
/*Similar to space-around except the fact that it doesn't leave any space at either end*/
.flex-container {
display: flex;
justify-content: space-between;
}
🔴align-items
align-items used to align the items vertically inside the flex-container.
Type 01:- center
/*Aligns the flex items in the middle of the container*/
.flex-container {
display: flex;
height: 200px;
align-items: center;
}Type 02:- flex-start
/*Aligns the flex items at the top of the container*/
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}Type 03:- flex-end
/*Aligns the flex items at the bottom of the container*/
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}Type 04:- stretch
/*Stretches the flex items to fill the container (this is default)*/
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}Type 05:- baseline
/*Aligns the flex items such as their baselines aligns*/
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
🔴align-content
align-content used to align the flex lines. This is a bit similar to justify-content where justify-content aligns the items on the main axis and align-content aligns the flex rows in the container.
Type 01:- center
/*Display the flex lines in the middle of the container*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}Type 02:- flex-start
/*Displays the flex lines at the start of the container*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}Type 03:- flex-end
/*Displays the flex lines at the end of the container*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}Type 04:- stretch
/*Stretches the flex lines to take up the remaining space (this is default)*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}Type 05:- space-around
/*Displays the flex lines with space before, between, and after them*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}Type 06:- space-between
/*Displays the flex lines with equal space between them*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Flex Item Properties
There are mainly four types of flex container properties as follows
- order
- flex-grow
- flex-shrink
- flex-basis
🟠order
By default, all the items inside the flex container are displayed in the source order. Therefore this property specifies the order of the flex items.
Note:- The order value must be a number and the default value is 0
<div class="flex-container">
<div style="order: 5">D</div>
<div style="order: 4">B</div>
<div style="order: 2">A</div>
<div style="order: 3">C</div>
<div style="order: 1">E</div>
</div>
🟠flex-grow
This property specifies how a flex-item should grow concerning the other items in the container.
Note:- The value must be a number and the default value is 0
<div class="flex-container">
<div style="flex-grow: 1">A</div>
<div style="flex-grow: 1">B</div>
<div style="flex-grow: 1">C</div>
<div style="flex-grow: 1">D</div>
<div style="flex-grow: 8">E</div>
</div>
🟠flex-shirink
This property specifies how a flex item will shrink concerning the other items in the container.
Note:- The order value must be a number and the default value is 1
<div class="flex-container">
<div>A</div>
<div>B</div>
<div>C</div>
<div style="flex-shrink: 0">D</div>
<div>E</div>
</div>
🟠flex-basis
This property defines the initial/default value of a flex-item. Where we used when we don’t want a particular item to change its width in flex-container.
Note:- It can be in px, em, %
<div class="flex-container">
<div>A</div>
<div style="flex-basis:200px">B</div>
<div>C</div>
<div>D</div>
</div>
Learning Fundamentals is fun, but what’s cooler is applying them to real-world apps. I hope now you are ready to apply them to build real apps. With this knowledge transfer let me end this article with a final thought.
Final Thought
Since the flexbox is a huge topic that contains a lot of things to learn. Here I have mainly focused on the fundamentals of flexbox which starts with the introduction and walks you through the properties of flexbox which would give you a heads up to apply them to build real apps.
If you are interested to learn more about CSS check out my article Learn the Fundamentals of CSS within a few minutes.
Hit a clap if you like this, and feel free to leave your thoughts and feedback in the comment section.
Thank you for checking this out, feel free to checkout my other articles by clicking the following link 👇
