In recent years the demand for responsive web sites is on the raise naturally. Media queries are great for that, but we still layout with floats and positioning. Both at their core are not tools for structuring web pages. Frameworks like Bootstrap helped a lot, but they still use these tools behind the scenes. Now, that we have flexbox, with good browser support it is time to use it.So, let’s mock a web page with it.

In order to include most of what flexbox offer us, we will build a full web page. You can, obviously, use flexbox just for certain sections, but i think, as we will see, it is really short and easy way to layout a site. The only headache that we still have, is using vendor prefixes, But if you use ( and you should) something like prefixer, you are ok.

In order to understand flexbox properly what you always need to keep in mind is the two axis idea.You have the main axis ( which usually will be the horizontal left to right direction) and you have the cross axis ( which usually will be the vertical tom to bottom direction). On the basis of this it will be easy to understand how to lay and organize the child elements.

In order to start and use flexbox, all we need to do is declare a wrapping element as flex:

#wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}

Since the wrapper element in our example wrap the whole site and we want it to be vertical, we first declare it as flex, and we say the the flex direction will be column ( the default is row – horizontal).

Once we declared a wrapping element as display flex (and whether we declared direction of let the default take place),all it’s children will be organized accordingly. the next section in out html is this:

 <header>
 	<img src="images/hero-header-image.jpg" class="img-responsive img-thumbnail">
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".togglenav").on("click",function(e){
			$("nav ul").slideToggle("slow");
		});
	});	
</script>
	<nav>
	<a href="#" class="togglenav">Menu</a>
		<ul>
			<li><a href="#">one</a></li>
			<li><a href="#">two</a></li>
			<li><a href="#">three</a></li>
			<li><a href="#">four</a></li>
			<li><a href="#">five</a></li>
			<li><a href="#">six</a></li>
		</ul>
	</nav>

 </header>

I want to organize them too with flexbox, but flexbox works on direct children. No problem: we can declare any child element as a wrapper too, just by stating display flex on it. This flexibility of flexbox allow us to create more complex layouts.

header{
	width: 100%;
	display: flex;
	flex-direction: column;
}

header > *{
	order: 9999;
}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	background-color: red;
}

nav ul li{
	flex:1;
	background-color: #ccc;
}

nav ul li a{
	color: white;
	font-weight: 100;
	letter-spacing: 2px;
	text-decoration: none;
	background: rgba(0,0,0,0.2);
	padding: 20px 5px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

Here you can see, that we have turned the ul to a flex wrapper, in order to layout the inner li elements.Notice that the li are getting flex:1, that say that they will be spread across evenly , without the need to calculate it manually. This is a short hand writing. We can use all the aspects like so: flex:1 1 250px.

The first 1 tell how to space the element horizontally, the second 1 tell how to space it vertically, and the third aspect is the basic width we want the element to have. In fact these can be used as three separate rules:

flex-grow:1;

flex-shrink:1;

flex-basis: 250px;

Obviously the short hand writing is way better and efficient . I have also used order, but on this a bit later.

The next stage of my html is the main area, which consist of a horizontal form, and then two vertical sections: a sidebar and the main area which need to present a grid layout. and this is it:

section#thecontent{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background-color: #fff;
	width: 95%;
	margin: 0 auto;
}

#bigsectionone{
	margin: 2em 0;
	padding: 2em 0;
	background-color: #eecc88;
}

#bigsectionone form{
	display: flex;
	justify-content: center;
	align-items: center;

}

Notice, i have used justify-content. That deals with how the children will be organized on the main axis.We have these options:

flex-start – the default, and it just go with the regular flow. usually left to right.

flex-end – the reverse , meaning right to left.

center – center the children.

space-between – space the elements evenly on the main axis. the spacing is calculated automatically for us.

space-around – same but make a gap between the first and last elements and the wrapper edges.

We also have align-items and align-content. they have the same options but they deal with the cross axis, therefore vertically. As you can see i placed the form centered vertically and horizontally:

#bigsectiontwo{
	display: flex;
	justify-content: space-around;
}


aside{
	order: 2;
	flex-basis:350px;
	display: flex;
	flex-direction: column;
	background-color: #eeff88;
}

aside > div{
	border: 1px solid #ccc;
	margin: 10px 0;
}

article{
	order: 1;
	flex-basis: 800px;
	background-color: #22ee77;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

article #sectionone{
	background-color: yellow;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
article #sectionone > div{
	border: 1px solid red;
	flex:0 0 43.33%;
	margin: 1em;
}




article #sectiontwo{
	background-color: #33ffee;
	display: flex;
}

article #sectiontwo > div{
	background-color: green;
	border: 1px solid white;
	flex:1;
}

Notice that i have used the order rule to change the appearance of the sidebar and the main area, since my page is right to left. so the sidebar will be shown on the left even though in my html it is written first. so the order rule is very flexible and prevent tons of headaches. We must remember, as a default every child element have order:0. that means that we can use positive and negative numbers to change to oder of appearance. Like in mobile break point i put the nav before the hero image, and the reverse on tablets and desktops.

Also notice that i have achieved the grid with only two rules: flex-wrap: wrap; justify-content: space-around. Once you stated wrap, you have a grid, and the justify-content makes it easy to control the grid.

Since i have reused same rules again and again, and we touched on their meanings and utilizing , now i will give the full css i wrote to achieve the full layout:

body{
	background-image: linear-gradient(260deg,#2376ae 0%,#c16ecf 100%);
}
h4{
	text-align: center;
	border-bottom: 1px dashed #FFF;
	color: #333;
}

p{
	padding: 1em;
}


#wrapper{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
}

#wrapper > *{
	order:9999;
}

header{
	width: 100%;
	display: flex;
	flex-direction: column;
}

header > *{
	order: 9999;
}

nav{

}

nav ul{
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	background-color: red;
}

nav ul li{
	flex:1;
	background-color: #ccc;
}

nav ul li a{
	color: white;
	font-weight: 100;
	letter-spacing: 2px;
	text-decoration: none;
	background: rgba(0,0,0,0.2);
	padding: 20px 5px;
	display: inline-block;
	width: 100%;
	text-align: center;
}

.togglenav{
	display: none;
}

section#thecontent{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	background-color: #fff;
	width: 95%;
	margin: 0 auto;
}

#bigsectionone{
	margin: 2em 0;
	padding: 2em 0;
	background-color: #eecc88;
}

#bigsectionone form{
	display: flex;
	justify-content: center;
	align-items: center;

}

#bigsectionone form > * {
	padding: 0.5em;
}

#inputtext{
	order: 2;
	flex-basis: 350px;
}
#formbtn{
	order: 1;
}

#bigsectiontwo{
	display: flex;
	justify-content: space-around;

}


aside{
	order: 2;
	flex-basis:350px;
	display: flex;
	flex-direction: column;
	background-color: #eeff88;
}

aside > div{
	border: 1px solid #ccc;
	margin: 10px 0;
}

article{
	order: 1;
	flex-basis: 800px;
	background-color: #22ee77;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

article #sectionone{
	background-color: yellow;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
article #sectionone > div{
	border: 1px solid red;
	flex:0 0 43.33%;
	margin: 1em;
}




article #sectiontwo{
	background-color: #33ffee;
	display: flex;
}

article #sectiontwo > div{
	background-color: green;
	border: 1px solid white;
	flex:1;
}


section#therfooter{
	display: flex;
	justify-content: space-around;
	background-color: #666;
	width: 95%;
	margin: 0 auto;
}

section#therfooter > div{
	flex-basis: 300px;
}


@media all and (max-width:1000px) {

	#inputtext{
		flex: 1;
	}

	article #sectionone > div{
		flex:1;

	}

}

@media all and (max-width:500px) {

	#wrapper{
		width: 95%;
	}

	header img{
		order: 2;
	}

	header nav{
		order: 1;
	}

	nav ul{
		flex-wrap: wrap;
		display: none;
	}
	

	nav ul li{
		flex-basis: 100%;
	}

	.togglenav{
		display: block;
	}

	section#thecontent{
		flex-direction: column;
	}

	article #sectionone,article #sectiontwo,section#therfooter{
		flex-direction: column;
	}

	article #sectionone > div{
		margin: 0.2em;
	}

	#bigsectiontwo{
		flex-direction: column;
	}



	#bigsectionone form{
		flex-direction: column;
		justify-content: unset;
		align-items: unset;
	}

	#inputtext{
		order: 1;
		flex-basis: 100%;
	}
	#formbtn{
		order: 2;
		flex-basis: 100%;
	}


}

View Demo

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.