Front end development is getting more advance day by day. So the number of increasing columns in layout can make the task much more difficult. While css grids are good but css flex is even better. It makes the task of positioning much easy. So let’s learn step by step what is css flex and how to use flexbox grid.

What is css flex?

First of all css flex or flexbox is a part of css 3. Its an approach towards responsiveness. It provides an easy way to position elements over the screen. It has around 12 properties. We are not going to learn all of in this guide instead we will focus on the important ones. Finally at the end we will create a blog layout. Learn by examples are far better than long descriptions. So lets create our html and css file.

How to use flexbox?

First of all open your html file and add the following code.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Flexbox</title>

	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<!-- To show the use of order and flex property -->
	<div class="container-1">
		<div class="box-1">
			<h3>One</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
		<div class="box-2">
			<h3>Two</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
		<div class="box-3">
			<h3>Three</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
	</div>
</body>
</html>

So the above code is our markup it has a container and 3 boxes(div). Lets add the code of our style sheet.

.container-1 {
	display:flex;
}

.container-1 div {
	border:1px solid #ddd;
	padding:10px;
}

We have just added a border to our boxes and make the container flex. So now open your browser you will see all the boxes are floated to left. Its because by default flex-direction property is set to row. If you want full width boxes you have to set it the property value to column. So now lets add some styles to our boxes. Open your style sheet and add the following code after the last line.

.box-1 {
	flex:2;
	order:2;
}

.box-2 {
	flex:1;
	order:3;
}

.box-3 {
	flex:1;
	order:1;
}

First of all suppose you are dividing the container into 4 equal width columns. Then by using flex property box one is taking 2 columns and others are taking 1 column each. While the order property is changing the order of boxes.

Align items vertically and horizontally with flexbox

Vertical alignment is one of the critical task. Which flexbox made this easy by creating some properties. First of all add some markup after container one in our html.

<!-- To show vertical alignment of items by using align-items property -->
	<div class="container-2">
		<div class="box">
			<h3>Four</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
		<div class="box">
			<h3>Five</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
		<div class="box">
			<h3>Six</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, accusamus?</p>
		</div>
	</div>

So now open your style sheet and add the following lines of code.

.container-2 {
	display:flex;
	height:300px;
	align-items:center;
}
.container-2 div {
	border:1px solid #ddd;
	padding:10px;
}

So in the above code we have added we have set the height of container to 300px. Next we have added the align-items property to vertically set the boxes to center. We can set 3 different values to this property. The flex-start is for top positioning and flex-end for bottom. So if you want to individually place one box use the align-self property to that particular box. So its all about vertical positioning. Flexbox has almost solution for everything. In addition to rest of the properties it has a property called justify-content. Hence we can also set 3 different values to it. So they are flex-start,flex-end,center. Finally we have covered many important flexbox properties.

* Note : use flex-basis instead of width for setting the width of boxes.

Responsive flexbox grid layout

First of all we have learned the basics of flexbox. So let’s create some flexbox grid layout with it. Create 2 files a html and a css file. Now open the html file and add the following markup.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Layout</title>
	<link rel="stylesheet" href="css/layout.css">
</head>
<body>
	<div class="header">
		Header
	</div>
	<div class="container">
		<div class="left">
			Left Sidebar
		</div>

		<div class="center">
			Content
		</div>

		<div class="right">
			Right Sideber
		</div>
	</div>
	<div class="footer">
		Footer
	</div>
</body>
</html>

So in the above code we have just created a header,footer and a container. While the container has 3 boxes(div). Now let’s add some styles to our markup.

html,body {
	margin:0;
	font-family:"Century Gothic";
	font-size:20px;
	font-weight:bold;
	text-align:center;
}
.header,.footer,.container div {
	padding:20px;
}
.header {
	background:#05668d;
}
.footer {
	background:#f0f3bd;
}
@media(min-width:568px) {
	.container {
		display:flex;
		height:80vh;
	}
}
.left {
	background:#028090;
	flex:1;
}
.center {
	background:#00a896;
	flex:4;
}
.right {
	background:#02c39a;
	flex:1;
}

Finally in the above code we have just added different background colors to our header,footer and boxes. Notice that i have added a media query for container. Because we don’t want a 3 column flexbox grid layout for mobile devices. So now open the browser and run it. Therefore it will look like the picture below.

css flex finalFinally if you want to learn more about flexbox you can follow this. So if you learn from this guide share with friends and let them also know about this.


Subham Mitra

Subham Mitra is a full-stack developer as well as well as an aspiring entrepreneur who is pursuing MCA and providing brilliant stuff for a great range of people's through Coders Diaries.

https://codersdiaries.com


2 Comments

Bootstrap modal - basics to customization – Coders dairy · October 8, 2017 at 6:39 pm

[…] i have used flexbox to make things easy so if you don’t know about it read it here. So now we have positioned 2 blocks now its time to add styles to […]

CSS slider with pure CSS and vanilla javascript – Coders dairy · October 27, 2017 at 4:00 pm

[…] make the task much easier. If you are not familiar with flexbox you can check my flexbox guide. So finally our slides and the contents are ready its time to style the […]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

WhatsApp WhatsApp us