What is Flexbox?

Flexbox is a layout feature that’s helped recreate how web developers build layouts.

CSS methods like floats, inline-blocks, and absolute positioning have certain limitations and were not meant to handle today’s responsive layouts.

Floats, for example, weren’t intended for page layout, they were meant for wrapping text around images. When using floats for layout they require clear fixes to prevent the element from collapsing. With inline-block your always fighting the with the default white space created by the browser. And positioning can be tricky because it requires context and other content on the page behaves as if the positioned elements didn’t even exist.

With the introduction of flexbox, it gives a more flexible way to layout elements. You get the benefits of floats, inline-blocks without any of the strange browser quirks. With flexbox CSS properties you can change the direction, size & order of HTML elements regardless of there original size or order in the dom. This makes building responsive layouts easier than ever before.

Flexbox Basics

The two most important elements in flexbox layout are flex containers and flex items. The first step in using flex box is creating a flex container. The Flex container sets up the flexbox layout and its flex items which are the elements you want to layout using flexbox.

A flex container can be any block-level or inline element like a div, ul or even a span element. Every direct child of a flex container is called a flex item. There can be any number of flex items inside a flex container. For example, if you make an ul tag a flex container the li tags become the flex items. With the children now being flex items, the li tags can be laid out in any direction and have flexible dimensions.

To fully understand how flexbox works you need to understand about the axis in which a browser can place flex items. Flexbox follows an axis that tells the browser the layout direction of flex items. The flex items can be laid out either on the main axis or the cross axis. Everything in a flexbox container is relative to these two axes. The main axis is the primary axis which runs left to right and the cross axis runs top to bottom. But you can easily change the directions for example you can switch a horizontal column layout along the main access to a vertical layout using flexbox direction property.

Creating a Flex Container

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Basics</title>
</head>
<body>
    <div class="container">
        <div class="item-1 item">Item 1</div>
        <div class="item-2 item">Item 2</div>
        <div class="item-3 item">Item 3</div>
        <div class="item-4 item">Item 4</div>
        <div class="item-5 item">Item 5</div>
        <div class="item-6 item">Item 6</div>
    </div>
</body>
</html>

This is a basic HTML page with a div with the class of container child elements with the class of items. Currently, the child divs are in the normal dom flow. When you apply a Flexbox layout to these items you can place them anywhere in the container eg inline or change the order of the items. To apply a flex layout to these items you need to make the container div the flex container.

.container {
 display: flex;
}

Now that the flex container is created every item inside the container div automatically becomes a flex item. If no other propitiates are added the default behavior of flexbox is to layout the flex items horizontally on the main axis left to right.

<!DOCTYPE html>
<html>
<head>
    <title>What is Flexbox?</title>
</head>

<style>
  
* {
    box-sizing: border-box;
}
  
body {
    font-size: 1em;
    font-family: 'Arial', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
}
  
.container {
    display:flex;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    margin: 45px auto;
    box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
    height: 200px;
}
  
.item {
    color: #fff;
    padding: 10px;
    margin: 5px;	
    background: #000;
    border-radius: 3px;
}
   
</style>  
  
<body>
    <div class="container">
        <div class="item-1 item">Item 1</div>
        <div class="item-2 item">Item 2</div>
        <div class="item-3 item">Item 3</div>
        <div class="item-4 item">Item 4</div>
        <div class="item-5 item">Item 5</div>
        <div class="item-6 item">Item 6</div>
    </div>
</body>
</html>

I’ve added some basic styling to the container so we can visualize the flex container at work. One of the extra properties I’ve added is a height to the div container. Since it’s a flex container the flex items stretch to fill the flex container height. When you declare a flex container becomes a block-level element and takes up that entire line. But if you didn’t want it to you can use the display inline-flex to create an inline flex container. It now behaves like an inline element and takes up as much space as its content.

Wrapping Up

This is only the basics of flexbox but you should already see why it is one of the most effective layout solutions in front-end development. There are more advanced flexbox properties to learn so you can control layout direction, order, alignment sizing and more. You should go look at the complete guide to Flexbox on CSS Tricks for a full in-depth guide. Thank you for reading, visiting and being part of this conversation. If you would like to chat or have any questions drop me a message I’m always happy to talk.