What is the best way to align flexbox columns to the left and right?

Problem

I could float one of two columns to the left and the other to the right with some gutter space in between using standard CSS. How would I accomplish this with flexbox?

http://jsfiddle.net/1sp9jd32/

Asked by archytect

Solution #1

To the parent element, you may add justify-content: space-between. The children’s flexbox elements will be aligned to opposing sides with space between them as a result of this.

Updated Example

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

To position the second element to the right, you may add margin-left: auto to it.

Updated Example

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

Answered by Josh Crozier

Solution #2

To obtain the goals, I devised four strategies. Here’s an example.

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 by geniuscarrier

Solution #3

Another solution is to add a new tag with flex: auto style in between your existing tags to fill up the gaps.

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 the same as flex: 1 1 auto, except that it absorbs any additional space along the main axis.

Answered by konyak

Solution #4

There are other options, but the simplest is to use the gap between (see the sample at the bottom).

#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

Answered by Ali Adravi

Solution #5

If you need to position it vertically as well, use align-items: center; if needed, in addition to Jost’s answer.

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

Answered by Deepak Rajpal

Post is based on https://stackoverflow.com/questions/28922126/how-to-align-flexbox-columns-left-and-right