Flexbox application

As mentioned earlier, flexbox relies on the concepts of rows and columns for laying out your site.
Why not create a simple menubar?
Let's start off with a simple unordered list with few list items:

<ul>
	<li>Home</li>
	<li>Blog</li>
	<li>Downloads</li>
	<li>About</li>
</ul>

Let's remove the bullet points from the list by adding the CSS rule to the ul:

list-style: none;

Now remove the spacing on the left side by adding the CSS rule to the ul:

padding: 0px;

Wouldn't it be nice to have the items placed horizontally in a single row?
Voilà! Flexbox is here to arrange the list items (li) into a single row.

Let's add the CSS rule to the ulto turn it into a flexbox container:

display: flex;

And when that's done, the html elements inside it, all the list items (li) in this case, will become flexbox items automatically.
Then we can control the behavior of the items and put them in a single row or column.
However, by default, flexbox items are packed inside a single row. Like this:

Let's add background color to the menu.
To do this, add the CSS rule to the ul:

background: #4286f4;

The color can be anything you desire. I picked a nice variant of blue.

Maybe some padding would be cool! Add the CSS rule to the ul:

padding: 1em;

How about boxifying the list items?
Simply set the CSS rules to the li in the ul:

background: #F0F0F0;
padding: 0.5em;

A little space to the right side of each menu item wouldn't be bad.
Add the CSS rule to the li in ul:

margin-right: 0.3em;

Maybe some roundness to the edges?
Applying the CSS rule to the li in ul would do the job:

border-radius: 3px;

You can add anchor tags in the li to turn the menu items into links.
HTML code would look something like this:

<ul>
	<li>
		<a href='#'>Home</a>
	</li>
	<li>
		<a href='#'>Blog</a>
	</li>
	<li>
		<a href='#'>Downloads</a>
	</li>
	<li>
		<a href='#'>About</a>
	</li>
</ul>