How to align flexbox columns left and right?

by

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>

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. How do I keep two side-by-side div elements the same height?
  3. How to disable equal height columns in Flexbox?
  4. Proper use of flex properties when nesting flex containers
  5. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  6. Remove space (gaps) between multiple lines of flex items when they wrap
  7. Equal height columns with CSS
  8. Absolutely positioned flex item is not removed from the normal flow in IE11
  9. Make flex items take content width, not width of parent container
  10. Using flex order property to re-arrange items for desktop and mobile views
  11. Properly sizing and aligning the flex item(s) on the last row
  12. Flexbox fill available space vertically
  13. Flexbox not giving equal width to elements
  14. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  15. Equal space between flex items
  16. How can I make a display:flex container expand horizontally with its wrapped contents?
  17. flex-grow not working in column layout
  18. How to center-align one flex item and right-align another using Flexbox [duplicate]
  19. How to make a sticky footer using flexbox in IE11?
  20. Height of flex container not working properly in Safari
  21. Why is there vertical scroll on the main container?
  22. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  23. How can I create a row-based masonry layout using CSS?
  24. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  25. How do I make flex box work in safari?
  26. Zebra striping a flexbox table with wrapping items
  27. Element with “display: inline-flex” has a strange top margin
  28. How to make a flex item not fill the height of the flex container? [duplicate]
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment