How to Use FlexBox for Your UI Layouts

Whether you are building an SPA or a multi-faceted app with advanced and dynamic features, you are going to have to have some form of layout organization.

That is where flexboxes come in!

 The Flexbox Layout was designed to provide developers with “flexibility” (truly sorry for that one) for containers and their items. The main idea behind the flex layout is to give the container the ability to alter its items’ width, height, and order of items to best fill the available space. This is mostly used to accommodate all kinds of display devices and screen sizes. A flex container can also expand items to fill available free space or shrink them to prevent overflow. A truly dynamic and powerful tool.

Let’s start with some terminology, shall we? 

main axis – The main axis of a flex container is the primary axis. The primary axis is determined by the direction in which the items of the container are laid out. It is not necessarily always horizontal; it all depends on what the flex-direction property is set to. To help remember just what the main axis, main size, cross size, and cross-axis are related to, think of the main as the x-axis and the cross as the y-axis.

main-start | main-end – The flex items are placed within the container starting from main-start and going to main-end. So the items are just going from the beginning of the main axis to the end.

main size – A flex item’s width or height, whichever is in the main dimension, is the item’s main size. So if the height is the main dimension, that will be the main size and vice-versa.

cross-axis – The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.

cross-start and cross-end – Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.

cross size – The width or height of a flex item, whichever is in the cross dimension, is the item’s cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

Okay, now that the basics are out of the way, let’s jump into some of the properties.

Since there are so many different properties, I am going to keep the list short and only share a few of them. These properties have come in handy on multiple occasions.

Flex-direction: This establishes the main-axis and defines the directions in which the items will be placed. Think of flex items as primarily laying out either in horizontal rows or vertical columns.

1. 1. row (default)
      1. left to right 
   2. row-reverse 
      1. right to left
   3. column: 
      1. same as row but top to bottom
   4. column-reverse: 
      1. same as row-reverse but bottom to top

Justify-content:  This defines the alignment along the main axis. So depending on what your flex-direction is set to, this will determine where your items will be placed.

1. 1. Flex Start and End
      1. Items will be moved to the start or end of the flex-direction respectively.
   2. Center
      1. Items will be centered along the line.
   3. Space-Around
      1. Items are evenly spaced.

 Align-self: This allows the user to take control of each individual item and override their default alignment on the cross axis. At the cross start and cross end respectively. 

1. 1. Flex-start
   2. Flex-end 

Now let’s jump into an example using flexbox!

I am going to use flexbox to center some text.

Here we have a banner with text inside of it.

By default, the text will be aligned to the upper left-hand corner and my CSS looks like this.

  .banner {
    height: 400px;
    max-width: 700px;
    margin: 40px auto 40px auto;
    background-color: #2a2a2a;
  }
​
  .center-me {
    color: #FFF;
    font-size: 50px;
    margin: auto;
  }

Now we can very easily center this text by just setting its CSS display to flex and margin to auto!

  .banner {
    height: 400px;
    max-width: 700px;
    margin: 40px auto 40px auto;
    background-color: #2a2a2a;
    display: flex;
  }
​
  .center-me {
    color: #FFF;
    font-size: 50px;
    margin: auto;
  }

Let’s try another example.

So here we have a container of items and this is the CSS I used.

  .fixed-size-container {
    max-width: 1400px;
    margin: 40px auto 0 auto;
    background-color: #FFF;
    padding: 30px 0;
  }
​
  .fixed-size {
    width: 150px;
    height: 100px;
    background-color: #990b47;
    color: #FFF;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 60px;
    margin-bottom: 20px;
  }

Now I want to make the items appear in a row rather than in a column. This can be done simply by changing the display to flex because the default layout will be a row layout. I also used the ‘align-items: center’ parameter to center the items along the cross axis in the container and the ‘justify-content: space-around’ parameter to evenly distribute leftover space in the container between the items to fill out the remaining space.

  .fixed-size-container {
    max-width: 1400px;
    margin: 40px auto 0 auto;
    background-color: #FFF;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
​
  .fixed-size {
    width: 150px;
    height: 100px;
    background-color: #990b47;
    color: #FFF;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 60px;
    margin-bottom: 20px;
  }

Now, this simple method works great for most sizes of screen real estate. If the window that this container resides in is shrunk to small, then the items will morph together like shown below.

We can fix this issue by adding the ‘flex-wrap: wrap’ parameter which will force the items at the end of the main axis to ‘wrap’ themselves down to the next line.

  .fixed-size-container {
    max-width: 1400px;
    margin: 40px auto 0 auto;
    background-color: #FFF;
    padding: 30px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
  }
​
  .fixed-size {
    width: 150px;
    height: 100px;
    background-color: #990b47;
    color: #FFF;
    line-height: 100px;
    text-align: center;
    font-weight: bold;
    font-size: 60px;
    margin-bottom: 20px;
  }

These are just a few of the many awesome things that you can do with flexbox, so go out there and create!