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    x000D   x000D   container   x000D    width  500px  x000D    border  solid 1px  000  x000D    display  -webkit-flex  x000D    display  -ms-flexbox  x000D    display  flex  x000D    x000D   a   x000D    width  20   x000D    border  solid 1px  000  x000D    x000D   b   x000D    width  20   x000D    border  solid 1px  000  x000D    height  200px  x000D    x000D   lt div id  container  gt  x000D     lt div id  a  gt  x000D      a x000D     lt  div gt  x000D     lt div id  b  gt  x000D      b x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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.

User · Answer

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       x000D   x000D   container   x000D      width  500px  x000D      border  solid 1px  000  x000D      display  flex  x000D      justify-content  space-between  x000D    x000D   x000D   a   x000D      width  20   x000D      border  solid 1px  000  x000D    x000D   x000D   b   x000D      width  20   x000D      border  solid 1px  000  x000D      height  200px  x000D    x000D   lt div id  container  gt  x000D       lt div id  a  gt  x000D          a x000D       lt  div gt  x000D       lt div id  b  gt  x000D          b x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D      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       x000D   x000D   container   x000D      width  500px  x000D      border  solid 1px  000  x000D      display  flex  x000D    x000D   x000D   a   x000D      width  20   x000D      border  solid 1px  000  x000D      margin-right  auto  x000D    x000D   x000D   b   x000D      width  20   x000D      border  solid 1px  000  x000D      height  200px  x000D      margin-left  auto  x000D    x000D   lt div id  container  gt  x000D       lt div id  a  gt  x000D          a x000D       lt  div gt  x000D       lt div id  b  gt  x000D          b x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

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

[html] How to align flexbox columns left and right?

Examples related to html

Examples related to css

Examples related to flexbox