CSS3 flexbox examples

Flexbox layout is a new way of laying out items in CSS3 where items are laid out in a direction, flexing to take up the available space. It is designed to make stretchy, flexible layouts simple. Quite complex layouts can be built up by nesting flexbox containers.

For more information on how flexbox works, check out using the CSS3 flexbox layout.

CSS has always been pretty great for applying formatting styles like backgrounds, fonts, colours and borders to HTML elements. I think it’s been pretty weak at putting all of these items together in a page layout, forcing front end developers to create fragile code based mostly on clever floating tricks.

I think when flexbox is available cross browser, it is going to revolutionise the way we do CSS layout because it is simpler and more robust than similar layouts built on floats. It also makes it easy to do things that are pretty much impossible with current CSS like aligning boxes horizontally and vertically without knowing the exact proportions of the entire layout ahead of time.

The best thing is that it’s not the only new option for doing page layout in CSS. Other tools like the CSS grid layout module will work better for some types of layouts, giving front end developers lots of new options for creating pages.

Here are some simple examples of reasons to demonstrate why web developers should be excited by flexbox.

Creating a three column layout

Flexbox will make common layouts like the three column layout really simple to implement.

Here’s an example where the content div is 60% wide and the navigation divs use the flex property to be sized according the space left in the container:

  1. <div class="container">
  2.   <nav class="nav left">…</nav>
  3.  
  4.   <section class="main">
  5.     …
  6.   </section>
  7.  
  8.   <nav class="nav right">…</nav>
  9. </div>
  1. .container {
  2.   display: flex;
  3.   flex-flow: row;
  4. }
  5. .main {
  6.   width: 60%;
  7. }
  8. .left {
  9.   flex: 1;
  10. }
  11. .right {
  12.   flex: 2;
  13. }

See the complete example.

Laying out a form with multi-line flex containers

Flexbox supports wrapping flex items onto multiple lines. This can be switched on by adding “wrap” to the flex-flow property. Flex items that do not fit in the remaining space of the flex container will then be wrapped to the next line inside the container.

You could use a multi-line flexbox to lay out a really simple form:

  1. <form>
  2.   <label for="name">Name:</label>
  3.   <input id="name" type="text" />
  4.  
  5.   <label for="email">Email:</label>
  6.   <input id="email" type="email" />
  7.   …
  8. </form>
  1. form{
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.  
  5.   width: 408px;
  6. }
  7. label {
  8.   display: block;
  9.   width: 150px;
  10. }
  11. input, textarea {
  12.   width: 250px;
  13.   margin-bottom: 7px;
  14. }

using flexbox to layout a form over multiple lines

See complete example.

Displaying a results grid with nested flex containers

It’s possible to nest flex containers to create fairly sophisticated grid layouts.

It’s quite difficult to create a grid of boxes using CSS2.1 if the size of the content isn’t known ahead of time because some boxes might end up taller than others. One way to do it is to set a max-height that’s big enough to accomodate all items, which ends up looking slightly strange if none of the items in the row have overly tall content.

Flexbox layouts solve this problem for you. The height of the lines can be automatically worked out based on the content in the boxes if you don’t set an explicit height on the flex container or flex items.

Here’s an example of a grid of search results. The outer container has a row flex-flow and the inner containers have a column flow. The height of the flex containers is worked out based on size of the content:

  1. <div class="latest-items">
  2.   <div class="latest-item">
  3.     <img src="img/news.jpg">
  4.     <h2>Article title</h2>
  5.     <div class="summary">…</div>
  6.   </div>
  7.   <div class="latest-item">
  8.     <img src="img/logo.png">
  9.     <h2>Article title</h2>
  10.     <div class="summary">…</div>
  11.   </div>
  12.   …
  13. </div>
  1. .latest-items {
  2.   display: flex;
  3.   flex-flow: row wrap;
  4.  
  5.   width: 650px;
  6. }
  7.  
  8. .latest-item {
  9.   display: flex;
  10.   flex-flow: column;
  11.  
  12.   padding: 14px;
  13.   width: 255px;
  14. }

the nested flex containers automatically line up in a grid

See complete example.

Centering an element on the page

Flexbox layout has alignment options that give a lot of control over how flex items are positioned in the flex container.

These can be used to do horizontal and vertical positioning that isn’t possible with CSS2.1. For example, you could use the justify-content and align-content properties to center a single item in the middle of the page:

  1. <body>
  2.   <div class="content">
  3.     <p>It is extremely difficult…</p>
  4.   </div>
  5. </body>
  1. body {
  2.   display: flex;
  3.   flex-flow: column;
  4.   align-items: center;
  5.   justify-content: center;
  6.  
  7.   width: 100%;
  8.   height: 100%;
  9. }
  10.  
  11. .content {
  12.   display: flex;
  13.   flex-flow: column;
  14.  
  15.   justify-content: center;
  16.   text-align: center;
  17.  
  18.   width: 250px;
  19.   height: 250px;
  20. }

justify-content and align-items can be used to do vertical and horizontal box alignment not possible in CSS2.1

See complete example.

Posted on 29 Mar 13 by Helen Emerson (last updated on 29 Mar 13).
Filed under Uncategorized