May 11
#2 Layout Design
Using Flex
Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.
Intro
In my previous blog, we got to know the importance of layout and how it helps to leverage accessibility and responsiveness.
If you missed it, click here
In this blog, we will learn more about
👉 What FLEX is?
👉 Some of the important properties like flex-direction, and flex-grow.
To begin with, first, let’s understand what flex is?
Flex is a one-dimensional layout model that can only deal with its content solely in one dimension, either row or column. Hence it is content first.
As always, we will take an example to understand it better. Here is a simple layout structure generally followed across many websites.
Problem statement:
- It is a fixed layout and a single page with no scrolling.
- The header, navigation, and footer should have a height of 50px.
Basic structure
Seeing the layout, we have acquired a basic idea of how our HTML code is structured, and navigation, header and footer would contain a height of 50px.
With these things, laying the basic structure would be step 1.
Now that we got our basic structure ready. Let us get into the main topic of our blog, which is FLEX.
So, to enable flex in our HTML code, we need to use display: flex;
And the direction of it would be column level.
flex-direction: column;
flex-direction specifies the direction of the items present in the flex.
This property is only applicable for the elements which contain flex in it.
By default, flex-direction would be row
The wrapper class, which is the parent, would have these properties.
The output remains unchanged.
According to the design,
Section, Article and Aside follow a different layout.
Content (section and article as per code) shares the first half of the row,
and the other one is occupied by Aside.
Aligning Content(Section and Article) and Aside
Note: Content and Aside wrapped in a div with class “main”.
As per the design, they should be in line with each other.
So, to achieve it,
we use flex-direction: row along with display: flex on the main class.
But, the alignment is not correct here,
How to solve this?
No worries, flex provides us with properties wherein we can set
items to grow with flex-grow: 1
flex-grow property specifies how much the item will grow relative to others present in the flex container.
Ex:- flex-grow: 2 indicates that the element will grow two times bigger than other elements.
So, Each item present in the “main” class should have this property set to occupy the entire row.
Great success!!!
We have our content and aside placed in line with each other.
But, we have a problem with the footer which needs to be placed at the bottom and at the same time, our main class should occupy the remaining space.
Aligning Main and Footer
In the earlier section, we already came across the property flex-grow.
The Same property is the solution here 😃.
But, where do we keep this???
The answer is “main”.
Although we didn’t make any change to the footer, it got automatically placed at the bottom, why?
Because we have a fixed height for our page (100vh), flex-grow used the remaining space, leaving the footer at the bottom.
But, now we are left behind with aligning “section” and “article” inside the content class, so the solution here is straightforward and we have solved this in our earlier section. The only change would be flex-direction: column.
This is not the end of the flex but just the beginning.
Flex provides several properties that make our work easier and reduce design issues and leverage consistency across the page.
This blog intended to get some glimpse of what flex can do but, I recommend you to explore the below links and experience the magic of flex.
CSS tricks, flexbox MDN.
Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 ,
and share it with your friend.
For more exciting content on Frontend, Please do follow me 🎯.
Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️
Abhishek Kovuri, UI developer
