×

- Home
- Interior Pages
  - Using Images
  - Creating Columns
  - Modern Design
- Other Templates
  - Multi Page/Multi
    - Flexbox #501
    - Flexbox #502
    - Flexbox #503
    - Flexbox #504
    - Flexbox #505
    - Flexbox #506
- Download It

# Creating Columns with Flexbox

Flexbox is just another tool that you can add to your web development arsenal.

It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding.

## Two Different Methods

We used two methods for creating columns on this mini site.

The front page and the four columns use a slighlty different method than was used on the interior pages.

## Child Containers

This is the beauty of flexbox.

You can use conventional CSS properties like float and text-align inside child containers.

## The Front Page

The four columns on the front page were quite a bear using conventional CSS. Not so with flexbox.

We have 4 equal columns nested in a container division.

### The CSS

    div.container {
    display: flex;
    flex-wrap : wrap;
    justify-content : space-between;
    padding : 1dvw 10dvw;
    }

    div.container .column-front {
    flex : 25%;
    padding: 0 1dvw
    }

### The HTML

    4 columns front
    <div class="container">
    <div class="column-front"></div>
    <div class="column-front"></div>
    <div class="column-front"></div>
    <div class="column-front"></div>
    </div>

Top

## Interior Pages

The interior pages use different code because the wrap procedure isn't as demanding.

The front page and it's 4 columns needed to wrap to two columns, thus we used a width of 25%.

We then used a media query to change their width to 50% and change the layout to 2 columns.

The width of the interior pages was set using flex: 1; which tells the browser to create columns of equal size and allow them to shrink and grow as needed.

A different method of spacing was also used. The interior pages use gap: and the front pages use padding.

### The CSS

    div.flex-container {
    display: flex;
    flex-wrap : wrap;
    justify-content : space-between;
    gap: 2dvw;
    padding : .5dvw 10dvw;
    }

    div.flex-container .column {
    flex : 1;
    padding: 0
    }

### The HTML

    3 columns modern-design
    <div class="flex-container">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
    </div>