Flexbox unequal width columns

HTML & CSS
1

Hi All,

In my previous thread I was encouraged to use flexbox.
I use flexbox now and it all works well but one thing which I cannot seem to find is how to set unequal column widths. In my case, two columns.

The intention is to create columns like here:- https://bookmygarage.com/checkout/advancedautotechnik/sl37fl/book/?p=1&p=3&vrm=BL64CPO&MotDue=2020-01-11

One big one, one small one.

2

There are many ways to set column widths in flexbox but you do really need to take some time and study the methods as there are hundreds of good resources out there :slight_smile:

As a quick summary you can control widths in many ways:
You could simply give one column a width and the other column flex:1 0 0% and then the second column fills the rest of the available space.

You could set one column to flex:2 0 0% and the other to flex:1 0 0% and that means the first will take up twice as much room as the second assuming that there is no fixed width content.

You can use combinations of min and max width and many variations of the flex shrink and grow properties to achieve the desired result.

I’m on a mobile at the moment so can’t offer code but I suggest you try yourself first and then I’ll be back later this afternoon with full code if needed :slight_smile:

1 Like
3

Just played around did something like this:

4

Something like what ? :slight_smile:

Let us know how you got on :wink:

5

Ah I pressed save by accident!

I was playing with some code in w3schools and I achieved the same effect:

<div class="row">
  <div class="column" style="background-color:#aaa; width: 70%;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb; flex: 1 0 0 %">
    <h2>Column 2</h2>
    <p>Some text..</p>

I still need to learn more about flexbox.

1 Like
6

Keep practicing it’s a little complex at first but worth the effort.

No gap after the last zero. It should be 0%. (Note that i only added the percent after the zero to keep IE11 happy as other browsers are happy with a unitless value of zero).

7

off-topic
Being lazy expedient, that’s only the shorthand ? i.e. As though IE11 has trouble getting the optional values algo right without the unit.

1 Like
8

Yes it seems that if you use flex-grow:flex-shrink and flex-basis then IE11 works with a unitless zero value. However it is generally recommended to use the shorthand for flex so I would rather add the percent on the end :slight_smile:

2 Likes
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.