2

I'm using Flexbox to make a responsive site (first time I've done either of those, bear in mind) and it was all going well until I realised at some point that flex items with the same properties weren't behaving the same way.

Have a look at this, I had some issues with the page in Chrome even though I ran the CSS through Autoprefixer, but that's another issue. If you have issues with this, it might be an idea to open it in Safari, which I started testing it in. You'll have to narrow the JS window to make the left-hand side visible. https://jsfiddle.net/5p7fcmxb/1/

It's ugly as sin, since I made everything different colours to differentiate them and switched everything to default fonts for the purposes of this thread. Anyway, the basic problem is that the #headerleft, #blueleft and #footerleft should line up perfectly, since they have the same flex properties, as shown below:

#headerleft {
    background-color: red;
    height: 75px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

#blueleft {
    background-color: yellow;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

#footerleft {
    background-color: red;
    height: auto;
    padding: 0px;
    margin: 0px;
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
    -webkit-box-flex: 1;
        -ms-flex: 1 2 250px;
            flex: 1 2 250px;
}

But if you expand that JSfiddle window out, you can see that they're all different widths. At first I thought since they're in separate header, middle, and footer divs, which are themselves children of the overall #container div, they might be wrapping slightly to the left of the screen for some reason. I set everything 10px from the left and they all lined up at that side, so this seems to be an issue with the growth. If I shrink the page as narrow as it will go, the #blueleft and #footerleft elements are invisble, yet the #headerleft div still can still be seen. You might have noticed the middle and right-hand divs don't line up either, but the answer to the problem of the left-hand divs should apply to them too.

The idea was that the text in #headermiddle and #footermiddle would line up perfectly with the #contentbox div, and I'm sure I remember everything lining up at different viewport sizes when I was working on this yesterday, so I'm not sure if I've done something to break it along the way.

(If you're wondering why I have three flex containers in the first place, as opposed to having one flex container with just three main columns, it's so I could get the header, content box and footer text aligning, as well as having the content box expand according to how much text is inside. I suspect there is an easier way to achieve all of that that I'm not aware of (again, I've been properly doing this for about five or six weeks now) and having those three flex containers was where I went wrong at the first step.)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Evan
  • 95
  • 1
  • 9

2 Answers2

3

You've got a padding: 10px in #contentbox (middle row) which doesn't exist in other rows.

Add box-sizing: border-box to #contentbox to factor in that extra space.

Also, just because the flex rule is the same for multiple elements, doesn't mean the size of each box will be the same in each row.

The flex-grow and flex-shrink properties work by distributing free space in the container. In other words, they use the space which the content is not using. Because your content is different in each row, the available space will be different and, therefore, the size of each box can be different.

If you simply focus on the flex-basis component of the flex shorthand (and add the box-sizing: border-box as I mentioned above), the columns will align.

Revised Fiddle

As to why your layout disappears to the right when you re-size the window smaller, bear in mind that flex items, by default, cannot be smaller than the size of their content (regardless of any flex-shrink value). You'll need to override this initial setting with min-width: 0 (see reference below).

References:

Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
1

You've set a different flex-basis for the columns, while specifying their flex property. In order to keep the items perfectly aligned, you'll have to make sure that you use the same value across separate rows.

Since you're already using autoprefixer, you already have access to a modern CSS processor. I would suggest that you extract the measurements into a variable that you can reuse for the specific items.

Filip Dupanović
  • 32,650
  • 13
  • 84
  • 114