Left-Middle-Right-Layout with Flexbox and Float

The Problem

I’m a big grid fan. A “left-middle-right”-layout is something I’ve used hundreds of times. But because I’ve mostly just worked with elements of the same width, I’ve never realized before, that it is actually not that easy, to really center the middle element. So when I recently wanted to do the same thing with three buttons, I found out, that I had to figure out a new method.

But a solution was found and that’s what I want to talk about today.

See the Pen WvGdZL by Myri (@mynimi) on CodePen.

As you can see in the example above the problem becomes obvious. The examples float1 and flex1 are written how I’d normally tackle this problem, because it’s fast and easy. But if we increment the length of one of the sides you can see that the middle element is not really centered.

Before the middle element is centered, the width will be reduced on both sides and the element is centered within the space that’s left.

In flexbox this is called space-between. The space between each of the elements is the same. It may be really helpful in some placed, but for this layout the second examples are what we want.

Markup

Okay, for version 1 we need a very basic markup. A container and three subcontainers with the contents

1
    <div class="row"> <!-- here i'm addind the classes "float-1" or "flex-1" for each of the two examples -->
2
        <div class="left">left</div>
3
        <div class="center">center</div>
4
        <div class="right">right</div>
5
    </div>

Then we’ll add our CSS (I’m using Autoprefixer to take care of prefixing, so no prefixes in my CSS). Who wants to see the Sass is very welcome to go look at the CodePen.

Basically we style the container

1
    .row {
2
      position: relative;
3
      margin: 0 auto;
4
      width: 80%;
5
      max-width: 1400px;
6
    }

Then for the float-version which I know a lot of people still would use first.

1
    /* for centering */
2
    .float-1 {
3
      text-align: center;
4
    }
5

6
    /* clearfix */
7
    .float-1:after {
8
      content: "";
9
      display: table;
10
      clear: both;
11
    }
12

13
    .float-1 .left {
14
      float: left;
15
    }
16

17
    .float-1 .right {
18
      float: right;
19
    }
20

21
    .float-1 .center {
22
      margin: 0 auto;
23
      display: inline-block;
24
      position: relative;
25
    }

Alternatively the solution is flexbox is much shorter and less probable to break something else. So that’s the solution I will go for. With a Sass mixin this step only takes me 3 lines.

1
    .flex-1 {
2
      display: flex;
3
      flex-direction: row;
4
      flex-wrap: wrap;
5
      justify-content: space-between;
6
      align-items: center;
7
    }

So you can see that this version breaks. To stabilise it, I had a pretty simple idea.

The Solution

The idea is to take containers of the same size. If all of the elements are the same width, you can align the content within easily. The inner markup needs a little bit of an adjustments then.

1
    <span class="left"><span>left</span></span>
2
    <span class="center"><span>center</span></span>
3
    <span class="right"><span>right</span></span>

And in CSS it looks like that:

float

1
    .float-2 {
2
      text-align: center;
3
    }
4
    /* clearfix */
5
    .float-2:after {
6
      content: "";
7
      display: table;
8
      clear: both;
9
    }
10

11
    /* common width (100% / 3) */
12
    .float-2 span {
13
      width: 33.33333%;
14
    }
15

16
    /* floats */
17
    .float-2 .left {
18
      float: left;
19
    }
20
    .float-2 .right {
21
      float: right;
22
    }
23

24
    /* alignment */
25
    .float-2 span:nth-of-type(1) {
26
      text-align: left;
27
    }
28
    .float-2 span:nth-of-type(2) {
29
      text-align: center;
30
    }
31
    .float-2 span:nth-of-type(3) {
32
      text-align: right;
33
    }

flexbox

1
    .flex-2 {
2
      display: flex;
3
      flex-direction: row;
4
      flex-wrap: wrap;
5
      justify-content: flex-start;
6
      align-items: center;
7
    }
8

9
    /* flex: 1 sais, that each of the elements shall get the same amount of space, ergo the same width */
10
    .flex-2 span {
11
      flex: 1;
12
    }
13

14
    /* alignment */
15
    .flex-2 span:nth-of-type(1) {
16
      text-align: left;
17
    }
18
    .flex-2 span:nth-of-type(2) {
19
      text-align: center;
20
    }
21
    .flex-2 span:nth-of-type(3) {
22
      text-align: right;
23
    }

And that’s it. And the centering looks balanced.