How to align flexbox columns left and right?

Question

With typical CSS I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?

http://jsfiddle.net/1sp9jd32/

#container {
  width: 500px;
  border: solid 1px #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
#a {
  width: 20%;
  border: solid 1px #000;
}
#b {
  width: 20%;
  border: solid 1px #000;
  height: 200px;
}

<div id="container">
  <div id="a">
    a
  </div>
  <div id="b">
    b
  </div>
</div>

score 400 · Accepted Answer · answered Mar 08 '15 at 01:33

You could add justify-content: space-between to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

Updated Example

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#a {
    width: 20%;
    border: solid 1px #000;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

You could also add margin-left: auto to the second element in order to align it to the right.

Updated Example

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
}

#a {
    width: 20%;
    border: solid 1px #000;
    margin-right: auto;
}

#b {
    width: 20%;
    border: solid 1px #000;
    height: 200px;
    margin-left: auto;
}

<div id="container">
    <div id="a">
        a
    </div>
    <div id="b">
        b
    </div>
</div>

Hey, could you please explain how the element gets correctly right aligned by using `margin-left: auto` here? — hulkinBrain, Oct 22 '16 at 17:49
@hulkinBrain, here's the explanation: http://stackoverflow.com/a/33856609/3597276 — Michael Benjamin, May 08 '17 at 11:29
NOTE: `margin-left: auto` and `margin-right: auto` trick is not IE11 compatible, for those who still have to support it. — TetraDev, Dec 27 '17 at 21:04

score 50 · Answer 2 · answered Apr 22 '16 at 17:51

50

I came up with 4 methods to achieve the results. Here is demo

Method 1:

#a {
    margin-right: auto;
}

Method 2:

#a {
    flex-grow: 1;
}

Method 3:

#b {
    margin-left: auto;
}

Method 4:

#container {
    justify-content: space-between;
}

answered Apr 22 '16 at 17:51

geniuscarrier

4,199
2
21
15

11

Method 5: insert an extra empty element with `flex:1;` wherever you want the extra space to be :) – adamdport Oct 06 '16 at 17:07
This would be the best, most complete answer if you embedded the code snippet instead of linking to jsfiddle. – styfle Nov 06 '17 at 19:05
Method 1 and 3 is not compatible with IE 11! – Peter Højlund Palluth Jan 22 '18 at 19:05
Note: method #2 - I think doesn't right align #b, rather it let's #a grow, so that doesn't answer the question - "with gutter space between". – kahlan88 May 25 '21 at 11:03

score 19 · Answer 3 · answered May 22 '19 at 15:19

Another option is to add another tag with flex: auto style in between your tags that you want to fill in the remaining space.

https://jsfiddle.net/tsey5qu4/

The HTML:

<div class="parent">
  <div class="left">Left</div>
  <div class="fill-remaining-space"></div>
  <div class="right">Right</div>
</div>

The CSS:

.fill-remaining-space {
  flex: auto;
}

This is equivalent to flex: 1 1 auto, which absorbs any extra space along the main axis.

score 2 · Answer 4 · answered Aug 16 '17 at 00:37

There are different ways but simplest would be to use the space-between see the example at the end

#container {    
    border: solid 1px #000;
    display: flex;    
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    height: 50px;
}

.item {
    width: 20%;
    border: solid 1px #000;
    text-align: center;
}

see the example

score 2 · Answer 5 · answered May 25 '21 at 10:50

2

In addition to Jost's answer, if you need to align it vertically too, use align-items: center; if needed.

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

answered May 25 '21 at 10:50

Deepak Rajpal

811
1
8
11

How to align flexbox columns left and right?

5 Answers5

Linked

Related