Alisen Hazzard

the Blog

Simple Flexbox Website

Posted on August 8th, 2014

View Flexbox Demo Page

Using Flexbox to structure the layout of a website includes two parts: a parent element that acts as a flex container, and one or more child elements which receive the flex properties of the parent. First, the parent element receives the flex property display: flex, and then it’s fast and easy to style the child elements. With a few quick media queries to adjust for different screen sizes, your layout is ready to go!

As a quick note, Flexbox does require vendor prefixes for most browsers where it is supported. Be sure to check Can I Use for browser support, known issues, and other resources.

Here is a quick webpage I made using Flexbox on the navigation, content, and footer, with a non-flex Primary Column. It’s quick to implement, and each part uses the same flex properties to dynamically position elements without needing a grid layout or specified widths.

Felxbox Demo Website

View Flexbox Demo Page

Navigation

It worked well for me to use a list structure for my flex navigation, making the containing <ul> element the flex parent. By default, the flex container element has flex-direction: row, which is perfect for navigation at larger screen sizes. This is the only necessary property to give the parent <ul> element, so now the <li> items are all flex items!

Felxbox Demo Website Navigation

To make the link styles more attractive, I gave them a few flex properties. First, align-self: center. This property aligns the elements to the center of the containing element. (Other values for align-self include flex-start and flex-end, baseline, stretch, and auto.)

Next was a property for the size of each list item: flex-grow: 1. This will allow all of the <li> elements to take up the same amount of space to fill the containing element. The first link, an <h1> with the name of the website, will take up more space due to the font size. To have an element take up twice as much space, give it a flex-grow: 2, and increment up depending on how large you want it to be. Here's the complete code for styling the navigation.

.flex-nav {
    display: flex;
}
.flex-nav li {
	align-self: center;
	background: #AAAAAA;
	color: #FFFFFF;
	flex-grow: 1;
	font-size: 1.2em;
	letter-spacing: 1px;
	margin-right: 10px;
	padding: 8px;
	text-align: center;
}
.flex-nav li:first-child {
	background: #000000;
	margin-right: 100px;
}

Column Layout

Like the navigation, all you need to do is wrap your content in a containing element and give it display: flex. If each element contains the same amount of content, the columns will take up equal space. For example, here are the columns with roughly the same amount of text and image content.

.content-wrapper {
    display: flex;
    margin-bottom: 50px;
    padding: 0 20px;
}
.column {
	padding: 0 25px;
}
.col-image {
	width: 100%;
}
.primary {
	margin: 50px auto;
	max-width: 800px;
	padding: 0 20px;
}
.site-wrapper {
	min-height: 100%;
}
Felxbox Demo Website

However, if one column contains less, it will automatically scale down to take up space proportional to its content. Here are the columns with the Third Column containing less content than the other two columns. The code stays the same, but flex allows the columns to adjust proportionally to their content.

Felxbox Demo Website

Images that are child elements of a flex parent will also inherit the flex properties. To give my images some breathing room, I gave them 90% width, but you can also adjust this when you set your margin and padding for the columns.

(I used LoremPixel for the images, which gives you filler images similar to Lorem Ipsum for text.)

Ordering Elements

You can change the order of elements in a flex container without adjusting them in your HTML, starting with at the left side of the screen at order: 0. Here I gave First Column order: 1, Second Column order: 0, and Third Column order: 2. This is great if you want to rearrange content for larger screen sizes.

Felxbox Demo Website

Flex Footer

Like the navigation, this footer also uses a list structure. In addition to making the parent element the flex container, I also gave it the flex property justify-content: center, as well as max-width: 700px, and margin: 0 auto. This brought the elements to the center of the footer with equal margins on either side.

Also like the navigation, these <li> elements have the flex property align-self: center and flex-grow: 1.

footer {
    background: #AAAAAA;
    bottom: 0;
}
.flex-footer {
	display: flex;
	justify-content: center;
	max-width: 700px;
	margin: 0 auto;
}
.flex-footer li {
	align-self: center;
	flex-grow: 1;
	padding: 5px;
}

Media Queries

For smaller screen sizes, give the parent container of the navigation and content flex-direction: column. This will make the containers and all the inner elements aligned as columns instead of rows. For the navigation, you can also adjust the margins of the list elements to suit the website.

It can be nice to have the columns in a different order for mobile sizes, which is easy to do in a media query with the order property. With smaller screen sizes, I also set the images to display: none so they don’t take up valuable screen real-estate at smaller resolutions.

There’s nothing you need to change to style the footer for mobile (yay!). You could easily structure it like the main navigation, add social media icons, website information, and other elements, which could appear only on larger screen sizes (like the image elements).

Here is the complete code for adjusting the webpage to smaller screen resolutions.

@media screen and (max-width: 767px) {
	.flex-nav { 
	    flex-direction: column;
	}
	.flex-nav li {
		margin: 1px 0;
		width: 10%;
	}
	.flex-nav li:first-child {
		margin: 0;
	}
	.content-wrapper {
		flex-direction: column;
	}
	.column {
		padding: 0;
	}
	.col-image {
		display: none;
	}
	.first {
		order: 0;
	}
	.second {
		order: 1;
	}
	.third {
		order: 2;
	}
}

What have you made with Flexbox, and how do you handle the browser support?

Tagged in: Web Design Flexbox CSS HTML