How To Get Started With CSS Flexbox

In this tutorial we are going to look at the CSS flexbox property and how we can use this to improve layouts of our websites. The CSS flexbox property is created to be flexible so it can provide you with a more intelligent layout than the older ways of using floats or display: inline-block. The advantage you get by using the flexbox model is that it can provide you with a much greater efficient way of displaying your layouts, alignments or space between the different containers inside the flexbox. The flexbox will make it's children flexible enough in terms of width and height to try and fit the children inside the containing box. This makes responsive layout a lot easier to manage and how they are displayed and resized depending on your screen.

How To Use Flexbox

The basic use of flexbox is to have a parent container defined as flex and the child elements will be the flexible elements in relation to the parent. In the below example we use flexbox to evenly create the margins in the child elements.


<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

To create even margin child elements using flex box you first need to define the parent container as flex.

.container
{
  display: flex;
}

Next we can set the size of the child elements to anything we want, then using margin of auto flexbox will automatically set the margins of the child elements to fit the size of the parent.

.box
{
  width: 200px;
  height: 200px;
  margin: auto;
}

See the Pen ogzPOX by Paul (@paulund) on CodePen.

Flexbox Parent Properties

Now we are going to look at the different properties you can use with flexbox, there's different types of properties that you can apply to get the different design layouts you want, some go on the container and others go onto the child elements. ### Container Flexbox Properties

Display

As we saw in the above example display properties allows you to define if a div is a flexbox container.

.container
{
  display: flex;
}

Flex-direction

Flex-direction allows you to define the direction in which the child elements are going to flow, you have 4 choices.


.container
{
  display: flex;
  flex-direction: row;
}

row - left to right
row-reverse - right to left
column - top to bottom
column-reverse - bottom to top

See the Pen ogzPOX by Paul (@paulund) on CodePen.

See the Pen pvEOmZ by Paul (@paulund) on CodePen.

See the Pen ZYpMNV by Paul (@paulund) on CodePen.

See the Pen XJjPwQ by Paul (@paulund) on CodePen.

flex-wrap

By default flexbox will try to fit all child elements on to one line, but changing the flex-wrap setting will allow you to wrap the child elements onto the next line.


.container
{
  display: flex;
  flex-wrap: nowrap;
}

nowrap - Single line, left to right
wrap - Multi line, left to right
wrap-reverse - Multi line, right to left

See the Pen ByLOgw by Paul (@paulund) on CodePen.

See the Pen emdLwx by Paul (@paulund) on CodePen.

flex-flow

Flex-flow allows you to join the two above properties together, so it's a shorthand way of defining the flex-direction and the flex-wrap.


.container
{
  display: flex;
  flex-flow: row nowrap;
}

justify-content

Justify-center allows you to define what position inside the container div to place the child elements. You have 5 different options to use with this property.

flex-start - aligns the items to the start of the container
flex-end - aligns the items to the end of the container
center - centers the items
space-between - items have even margins, first element at the start of the container, last element at the end of the container
space-around - items aligned with even margins

See the Pen myrzbR by Paul (@paulund) on CodePen.

See the Pen NPROKy by Paul (@paulund) on CodePen.

See the Pen QwKZLr by Paul (@paulund) on CodePen.

See the Pen jEMeNK by Paul (@paulund) on CodePen.

See the Pen yyaRBR by Paul (@paulund) on CodePen.

align-items

Align items allows you to align the items on the vertical axis. You have 5 different options to use on this property.

flex-start - aligns the items to the top
flex-end - aligns the items to the bottom
center - center align the items vertically
baseline - aligns the items to their baseline
stretch - Stretch the items to fit the container

See the Pen vEXVOy by Paul (@paulund) on CodePen.

See the Pen GgjYoE by Paul (@paulund) on CodePen.

See the Pen gbwBPx by Paul (@paulund) on CodePen.

See the Pen OPRBMO by Paul (@paulund) on CodePen.

See the Pen pvExgQ by Paul (@paulund) on CodePen.

align-content

Align content and space between the margins when content is moved onto multiple lines, with this property you have 6 options.

flex-start - Multi lines will be packed to the start of the container
flex-end - Multi lines will be packed to the end of the container
center - Multi lines will be packed to the center
space-between - Multi line will have even spacing in between
space-around - Multi lines will have even spacing around
stretch - Multi lines will stretch to take up the remaining space

Flexbox Children Properties

Along with the parent properties you can also add different child properties to change the behaviour of how they react inside the parent container.

order

By default the child element will be in the same order as they are place in the DOM, but using the order property you can change the order of the boxes.


.box:nth-child(1)
{
  order:2;
}

.box:nth-child(2)
{
  order:3;
}

.box:nth-child(1)
{
  order:1;
}

See the Pen bNBbBv by Paul (@paulund) on CodePen.

flex-grow

By default all the items in the flexbox will try to be place at the same width, using the flex-grow property you can make a certain item to grow in proportion to the other elements. For example if you have all items to start with a flex-grow of 1 then set one item to be flex-grow 2 then this will be double the size as the other items.


.box
{
  background: red;
  color: white;
  font-size: 60px;
  text-align: center;
  line-height: 200px;
  
  width: 200px;
  height: 200px;
  margin: auto 10px;
  
  flex-grow:1;
}

.box:nth-child(1)
{
  flex-grow:3;
}

See the Pen GgNKrv by Paul (@paulund) on CodePen.

flex-shrink

Flex Shrink works in a similar way to grow but it defines if an element is allowed to shrink. ## Real World Examples

The above just goes the theory of the different flex box properties used in different combinations you can create some useful layouts in your website. So lets have a look at some of the real world examples you can use the flex box system and how it will improve your CSS and the responsive design.

A navigation menu is something that every website uses, when you create a navigation menu there are a few things that flexbox can help with. It makes it very easy to create navigation items of the space size, with even spacing between the items. The main advantage you get with flexbox is the way it reacts to responsive layouts, when the screen is resized you can see how flexbox changes the width of the margin to fit the parent container. It's basically using percentage value in relation to it's parent, making it very easy to adapt to the screen size.

This makes it very easy to go full width on responsive devices just by changing the way that the flexbox reacts. See the Pen MYbgrd by Paul (@paulund) on CodePen.

Look at the above demo and see how it reacts to different screen sizes, below is the HTML and CSS used to easily create a responsive navigation menu using flexbox.


<nav class="site-navigation">
  <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Products</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>


.site-navigation ul {
  background: #eee;
  list-style: none;
  margin: 0;
  padding: 0;

  /**
   * Flexbox properties
   */
  display: flex;
  justify-content: space-around;
}
.site-navigation a {
  color: #333;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1rem;
}

.site-navigation a:hover {
  background: #d4d4d4;
}

@media all and (max-width: 600px) {
  .site-navigation ul {
    /**
     * Full width navigation items
     */
    flex-flow: column wrap;
    padding: 0;
  }
}

Equal Length Columns

Equal length columns is something that has always been tricky when working with float layouts. If you have a main content column and a sidebar column you can get to the situation where your main content column becomes larger than your sidebar column which can cause design problems if you have a background colour on the sidebar. Here is an old tutorial I wrote about how you can get equal column sizes using older techniques.

Equal Height Columns Now view below the flexbox way of creating equal column lengths. See the Pen PwbYRR by Paul (@paulund) on CodePen.

Below is the HTML and CSS of how you will create this for the demo purposes I have left out the content from the HTML.


<div class="column-container">
  <div class="column">
    <p></p>

  <p></p>
  </div>

  <div class="column">
      <p></p>
  </div>

  <div class="column">
      <p></p>
  </div>
</div>

<br></br>
.column-container {
  display: flex;
  align-items: stretch;
}
<br></br>
.column {
  width: 33%;
  padding: 2rem;
}

.column:nth-child(1) {
  background: red;
}

.column:nth-child(2) {
  background: blue;
}

.column:nth-child(3) {
  background: green;
}

As you can see from this CSS the only properties you will need to make these equal columns is align-items: stretch; on the parent item.


.column-container {
  display: flex;
  align-items: stretch;
}

Vertical Centring

Having something that is vertical centered inside it's parent element used to be an annoying task, it has been made easier with the technique of using translate and absolute positioning.


.vertically-align-center-child
{
    top: 50%; 
    transform: translateY(-50%);
}

But using flexbox it makes it even easier and responsive by using 2 flexbox properties, justify-content and align-items. See the Pen yyVBKW by Paul (@paulund) on CodePen.


<div class="vertical-container">
  <div class="vertical-content">Look I'm Vertically Aligned</div>
</div>


.vertical-container
{
  background:#eee;
  height: 500px;
  
  /** make it flex */
  display: flex;

  /** Vertically center */
  align-items: center;

  /** Horizontally center */
  justify-content: center;
}

.vertical-content
{
  background: #FFF;
  padding: 3rem;
  width: 20%;
  
  text-align: center;
}

Reorder Page Items With Media Queries

If you have a page layout with a header, left sidebar, content, right sidebar and footer. When most developers who make this site responsive on a mobile will make all the sections of the website full width. If we did this then the left sidebar will appear above the content section which isn't very good for your visitors. A benefit of using flexbox is that we can actually change the order of the different sections using CSS, so in media queries we can change the order of the content to be pushed into 1st position and place the sidebars under the content. To change the order of the child items you just have to add a CSS property of order to the element and select what position you want this content to appear.


@media only screen and (max-width: 320px) 
{
  .site-header
  {
    order: 2;
  }
  .main-content
  {
    order: 1;
    width: 100%;
  }
  .left-sidebar
  {
    order: 4;
    width: 100%;
  }
  .right-sidebar
  {
    order: 3;
    width: 100%;
  }
  .site-footer
  {
    order: 5;
  }
}

This will change the orders to be: - Main Content

Header
Right Sidebar
Left Sidebar
Footer

View the demo below and resize the browser to see the content area move above the page header. See the Pen xZeqYa by Paul (@paulund) on CodePen.

Browser Support

So can you use flexbox now? Yes according to caniuse.com flexbox is supported by 88.45% of all browsers. - Chrome 21+ supports unprefixed flexbox

Firefox 22+ supports unprefixed flexbox
Safari supports -webkit prefix flexbox
Opera 12.1+ supports unprefixed flexbox
IE 10 supports -ms prefix flexbox, but IE11 supports unprefixed flexbox.

Flexbox Bugs

There is a Github Project with a list of Flexbox bugs and workarounds of how you can fix them in the time-being until the browser engines have fixed the problems. If you have noticed any problems with Flexbox please contribute to the Github Project, with your problem and workaround. Flexbugs So that's the basics of how to use flexbox, leave comments below with layouts or cool things you've been able to create with flexbox.