Introduction

The Flexbox CSS Layout method uses the CSS Flexbox layout module to organize content either horizontally or vertically depending on one’s needs or the kind of layout to be designed. The module is one dimensional, arranging items in rows and columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces. The module consists of the flex container (the parent element) and the flex items (the child elements). The flex items can be organized as a row or as a column, and the available free space can be distributed between them in various ways.

This tutorial is basically a primer to the flex-box module. We shall basically take a walk through a few properties (display, flex-direction, flex-wrap and flex-flow) of the flexbox scheme explaining in detail what each property does. More properties will be explained in further tutorials.

    <div class="flex-container">
        <div class="flex-item">
            <p>1</p>
        </div>
        <div class="flex-item">
            <p>2</p>
        </div>
        <div class="flex-item">
            <p>3</p>
        </div>
    </div>

Why Use Flexbox

Flexbox is actually a modern reality that was created as a result of the limitations encountered when using the old css layout methods to position content. These old methods relied on using floats and positioning. The methods could work but were somewhat limiting or even frustrating in creating simple designs especially in situations such as:

• Vertically centering a block of content inside its parent.
• Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
• Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.

As we shall see, Flexbox is particularly very helpful in the following situations:

• Automatically scaling elements (alter height or width) so that they fill the available space
• Automatically shrinking or growing elements to make them fit into the container and prevent overflow
  
• Changing the order of the items
  
• Solving the problem of horizontal and vertical centering
  
• Creating columns of the same height
  
• Creating a footer sticking to the bottom of the page
  
• Designing navigation panels

Flexbox Properties

The Flexbox module features a number of useful properties. Some of these properties apply only to the flex container (parent element) and other apply only to the flex items (child elements). By child elements, we mean the immediate children of the parent element.

Properties that apply to the flex container:

• align-content
• align-items
  
• display
  
• flex-direction
  
• flex-flow
  
• flex-wrap
  
• justify-content
  

Properties that apply to the flex items:

• align-self
• flex
  
• flex-basis
  
• flex-grow
  
• flex-shrink
  
• order

How to create a Flex Container

The display: flex; property applies to the container, makes the container a block element, and enables the flex layout for all its direct children.

.flex-container { 
    display: flex;
}

The display: inline-flex; works in the same way. Only it creates a container as an inline element.

.flex-container { 
    display: inline-flex;
}

How to organize flex items horizontally or vertically

If you want to arrange the flex items to look like a row (horizontally) or a column (vertically), apply the flex-direction property to the container.

The flex-direction: row; property will make a horizontal row, stacking the items from left to right. The row is the default value. To stack the flex items from right to left, use flex-direction: row-reverse;

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

If you have more items that can fit in one row and you still want a horizontal layout, the flex-wrap: wrap;property will come in handy. This way, the flex items will wrap onto multiple lines inside the flex container. The default value is flex-wrap: nowrap;.

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

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

Similarly, The flex-direction: column; property will make a vertical column, stacking the items from top to bottom. To stack the flex items from bottom to top, use flex-direction: column-reverse;

.flex-container { 
    flex-direction: column;
}

There’s a shorthand for  the flex-direction and flex-wrap properties – flex-flow.The default value is row nowrap;

.flex-container { 
    flex-flow: row wrap; // flex-direction + flex wrap
}