-1

I would like to have two items aligned horizontally, but I don't know how to use flex to make them responsively separated:

<div class="container">
  <div class="item-left">Left</div>
  <div class="item-right">Right</div>
</div>

.container {
 display: flex
}

The purpose is that no matter how I change the width of screen, they are still be separated (one on the left and another on the right). I can use grid and justify-self to achieve this, but how would I use flex to get this expected result?

Thank you!

achai
  • 199
  • 1
  • 7

3 Answers3

5

By using justify-content: space-between:

.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div class="item-left">Left</div>
  <div class="item-right">Right</div>
</div>
j08691
  • 204,283
  • 31
  • 260
  • 272
3

    .container {
      display: flex;
      justify-content: space-between;
    }
    <div class="container">
      <div class="item-left">Left</div>
      <div class="item-right">Right</div>
    </div>
Muhammad Rizwan
  • 31
  • 4
1

Try using justify-content: space-between; for your container. It will evenly put space between your elements. See MDN Web Docs.

It will probably break once the screen is too small for both elements to fit next to each other so you will probably have to have at least one media query that removes display: flex; or that changes the width of the two elements.

Leander Hass
  • 162
  • 2
  • 3
  • 13