-1

I have a div that uses flex. I simply want to align the first button on the left, and the rest to the right. HTML:

<div class="container">
  <button class="first-button">Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>

And CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

But all the buttons ends up on the right. enter image description here

How can I align Button 1 on the left? That is:

enter image description here

Codepen is here https://codepen.io/mark-kelly-the-looper/pen/jOpzgVX

Mark
  • 4,428
  • 14
  • 60
  • 116
  • 2
    FYI: The duplicate for this question could be found by typing your question title into Google verbatim. – CBroe Jan 25 '23 at 11:58
  • i actually did google it using a different search term! but ya, certainly a dupe – Mark Jan 25 '23 at 12:07

2 Answers2

1

Easiest solution is to use margin to push it auto to the left

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.first-button {
   margin-right: auto;
}
<div class="container">
  <button class="first-button">Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
0

The style on the button you want left aligned should be:

.first-button {
  margin-right : auto;
}
Matt Saunders
  • 3,538
  • 2
  • 22
  • 30