Flexible Box Layout - Exercise

Contact Us or call 1-877-932-8228
Flexible Box Layout - Exercise

Flexible Box Layout

Duration: 20 to 30 minutes.

In this exercise, you will style a typical blog listing page, using flexible box layout to position and order elements. Before any user interaction, the finished page should look like this:

Flexbox Exercise screenshot - before click

The left navigation column remains fixed in width while the main content is fluid, expanding as the browser width changes. As you'll see, the markup code for the navigation elements comes after the markup code for the article listing.

The articles shown in the browser in date-ascending order (earlier to later); you'll note, as you work with the code, that the markup code lists the articles in date-descending order.

When the user clicks an article, it should show its (initially hidden) body content and, move to the top of the list, and show with some background color and padding:

Flexbox Exercise screenshot - after click

  1. Open ClassFiles/CssPageLayout/Exercises/flex/index.html in a code editor and in a browser to view the results.
  2. Style section#articlelisting and nav as flexible children of section#maincontent; use an appropriate value for flex-flow on #maincontent to ensure that the navigation (the second item, in terms of source-code order) appears on the left. This is a common need: one tactic for better search engine optimization is to keep the markup source for important content as high on the page as possible. Style the navigation elements as shown in the screenshot.
  3. Use appropriate values for flex for the nav and #articlelisting elements, so that nav appears on the left with a fixed width and #articlelisting appears on the right with a fluid width.
  4. Style #articlelisting to be a flex container, with each of the <article>s as a flexible child. Reverse the order of the <article>s: show them in the browser in the opposite of the order in which they appear in the code.
  5. Use the :target pseudo-class to style the user-selected <article>: use the order property to move the selected article (that is, the one the user has clicked on, whose id matches that of the fragment at the end of the page's URL) to the top. Remember that the default value for order is 0 - and be sure, when ordering <article>s, to account for the fact that we are showing them in reverse order. Unhide the body content for the targeted <article>and give it some formatting to set it off from the other articles. Display the contents of the displayed post in two columns.


* {
	margin: 0;
	padding: 0;
	border: 0;
body {
	background: #ccc;
#main {
	width: 80%;
	margin: 1em auto;
	padding: 2%;
	background: #fff;
#maincontent {
	display: -webkit-flex;
	-webkit-flex-flow: row-reverse wrap;
	-webkit-justify-content: flex-end;

	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: flex-end;
#articlelisting {
	-webkit-flex: 1 1 0;
	flex: 1 1 0;

	display: -webkit-flex;
	-webkit-flex-flow: column-reverse wrap;

	display: flex;
	flex-flow: column-reverse wrap;
article {
	padding: 0 5em 1.2em 0;
article h3 {
	margin: 0;
article time {
	font-size: 0.8em;
article div {
	display: none;
	-moz-columns: auto  2;
	-webkit-columns: auto 2;
	columns:auto 2;
article:target {
	-webkit-order: 1;
	order: 1;
	background-color: Linen;
	margin-bottom: 1em;
	padding: 1em;
article:target div {
	display: block;
nav {
	width: 180px;
	padding: 0 1em 0 0;
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
nav ul li a {
	display: block;
	margin: 0;
	padding: 0.25em;
	border-bottom: 1px solid lightGray;
nav ul li a.current {
	color: black;
	margin-left: 0.5em;

Code Explanation

We use the -webkit- prefix throughout in our solution; for brevity, we won't state it here in the review of the code.

We style #maincontent as a flex container with display: flex, present the child elements in reverse order with flex-flow: row-reverse wrap, and align the elements against the left edge with justify-content: flex-end (flex-end, rather than flex-start, because we have reversed the order.)

We style #articlelisting with flex: 1 1 0 and nav with no flex rules - thus #articlelisting has a flex-grow value (the first value of the flex shorthand) of 1 and nav has a fixed width. This fact, coupled with the fact that both elements have a flex-basis (the third value of the flex shorthand) value of 0 and that nav has a fixed width, means that, when the browser width is changed, the left-side navigation will stay fixed in width and the wider right column will be fluid.

#articlelisting acts both as a flex child element, as discussed above, and as a flex container element. We style #articlelisting with flex-flow: column-reverse wrap, which displays its several <article>s in reverse order, as desired.

We style article: target to format it slightly differently than its siblings and also, with order: 1, move it to the top of the list: since we list the children of #articlelisting in reverse column order, the highest order element will be shown first. We unhide the body content for the :targeted <article> with display:block.

We use columns: auto 2 to display the text contents in the targeted article in two columns.

Last, we add some formatting styles to the unordered lists items that make up the navigation element.