Make Your Webpage Responsive Using CSS Flexbox
UI engineers these days are looking to add whole new responsive features and designs to their website. Some of the small, yet important CSS concepts are very helpful in making your website look more beautiful and responsive and one of them is flexbox which not only helps you design your website to make it responsive and beautiful but also gives a whole new amazing UI experience. So, let's get started with learning flexbox.
What is a Flexbox?
Flexbox can be thought of as a one-dimensional layout model that is very helpful in building responsive web pages and organizing page elements more easily. It is been extensively used in creating row-based and column-based axis layouts. By default, it takes a row layout.
Looking into the flexbox in more detail, we can see that for the creation of a flexbox for our website, we will need to think of it as a two-term thing — first being the main axis and the second being the cross axis.
The main axis is mainly described by the flex-direction and the cross-axis runs perpendicular to it.
Now, let’s see how we code it in CSS with an example —
Assume you have to align the three divs horizontally say row-wise. For that write down the below code in index.html as
<link rel="stylesheet" href="style.css">
<div class="list">This is div 1</div>
<div class="list">This is div 2</div>
<div class="list">This is div 3</div>
and our styles.css will look something like this
Now, after running this in your browser you can view the output as
Flexbox is often used for arranging the collection of items out in one direction or another. As you layout your items, you want to control the dimensions of the items in that one dimension or control the spacing between items.
What was the alternative to Flexbox?
Before the use of the flexbox, people used the old box model which was composed of four parts namely content area, padding area, border area, and margin area.
Pros of using flexbox are:
- It can be laid down in any flow direction.
- Can be aligned with respect to their container or each other.
- Can be laid out linearly along a single (main) axis or wrapped into multiple lines along with a secondary (cross) axis.
Cons of flexbox are:
- Some browsers don’t support it.
- In the case of a bigger project, it can increase the page loading time.
Hope you liked the flexbox and will give it a try in your responsive UI project.
Also Read —