Naomi Bastian Design

Tutorials

Back to the Assignments Archive

Layout with Flexbox

Beginning with Flexbox

The Flexible Box Module, or flexbox, is a one-dimensional layout model, dealing with either a row or a column at a time. Flexbox was created to provide more efficent layouts, by aligning and distributing space among items within a container, especially when the size was unknown or dynamic. Flex layouts allow containers to change the items within, altering width, height, and order. Flex containers can expand items to fill the available free space, or shrink them to keep them from overflowing. Flexbox is different from block and inline layouts because it can handle both vertical and horizontal layouts. Flexbox is simply more flexible (if you'll forgive the word-play), and can change the orientation, size, width, and height of layouts. This is especially helpful when combined with media queries to create responsive designs, because you can simply rearrange items within their containers at different screen sizes.

Flexbox is an entire module, not just one property, so there are more possibilities but also more complications. Some properties are meant to be set on the container (the parent element, known as a "flex container"), while others are meant to be set on the items within the container (the child elements, known as "flex items"). Complete overviews of these properties can be found at CSS-Tricks or the Mozilla Developer's Network, but this tutorial is just meant to get you started!

Creating flexbox layouts will actually begin with your HTML. Since Flexbox deals with flex-containers and flex-items, the HTML elements need to be arranged in the same way. Luckily, HTML already lends itself to creating these flex-containers and flex-items. Think of an unordered list.

<ul>
<li>Home</li>
<li>Contact</li>
<li>About</li>
</ul>

The <ul> tag already contains the <li> tags within it. If we think of a <ul> tag as a container, the <li> tags are naturally the items within it.

To use the CSS Flexbox properties with this piece of HTML code, we are going to define the styling for the <ul>, because it's the flex-container. If we set the style for the <ul> as: ul { display: flex; flex-direction: row; }, the unordered list will rearrange itself to run horizontally instead of vertically by default.

ul {
display: flex;
flex-direction: row;
}

Right now, it doesn't look like much, does it? To make this resemble a navigation bar, we can add some additional CSS to add colors, padding, margins, and text-alignment.

ul {
display: flex;
flex-direction: row;
justify-content: center;
background: midnightblue;
list-style-type: none;
}

li {
background: deepskyblue;
padding: 20px 50px;
margin: 5px;
text-align: center;
}

A few lines of code later, we have a functioning navigation bar! There are other ways to spice it up, but one of the nicest perks to Flexbox is that you can rearrange content from running horizontally to vertically. If you're working with a responsive design, this can be a huge bonus! All you have to do is change flex-direction: row; to flex-direction: column; to change the direction of the flex-items. On mobile or tablet device displays, you often have much more vertical space to spare than horizontal space, so layouts must change accordingly.

ul {
display: flex;
flex-direction: column;
justify-content: center;
background: midnightblue;
list-style-type: none;
}

li {
background: deepskyblue;
padding: 20px 50px;
margin: 5px;
text-align: center;
}

Flexbox is an amazing tool for creating and changing layouts, especially when used hand-in-hand with media queries. However, it's definitely a tool that requires practice! You can begin practicing by taking layouts from magazines, websites, or any other medium, and grouping content together into boxes. Get used to thinking with boxes and considering how you can change the layout with those. You can also use the resources below to find new examples or to develop your new skills!

Be forewarned: CSS Grid and Flexbox may not be implemented in all browsers. If you are designing for a wide audience, especially one still using Internet Explorer, make sure to test new pages and layouts in other browsers or check CSS selectors at "Can I use" to ensure proper layout display across all browsers. Good luck!