CSS - 3 Links - Left Align 1, Right Align 2 - html

Question

Suppose I have three buttons
<div class='button-wrap>
<a class='button'>First Button</a>
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
What is the best way to left align the first, and right align the second two? Preferably without using float.
I have tried wrapping the second two in a seperate div and using text-align:right but the extra div causes the buttons to go out of alignment with one another.

Answer 1

Try this.
.buttons {
display: flex;
justify-content: space-around;
}
.buttons .button:first-child {
flex-grow: 1;
}
<div class="buttons">
<div class="button">
<button>First button</button>
</div>
<div class="button">
<button>Second button</button>
</div>
<div class="button">
<button>Third button</button>
</div>
</div>

Answer 2

You can achieve it with display:flex - no need to change your markup
.button-wrap {
display: flex;
}
.button:nth-child(2) {
/* margin left the second button */
margin-left: auto;
}
<div class="button-wrap">
<a class="button">First Button</a>
<a class="button">Second Button</a>
<a class="button">Third Button</a>
</div>

Answer 3

With float, you have to wrap your links into divs like this :
.left {
float: left;
}
.right {
float: right;
}
<div class='button-wrap'>
<div class="left">
<a class='button'>First Button</a>
</div>
<div class="right">
<a class='button'>Second Button</a>
<a class='button'>Third Button</a>
</div>
</div>

Answer 4

Use flexbox with justify-content: space-between on the wrapper, plus put margin-left: auto on the second button. This will align everything from there on to the right, while everything before that stys left-aligned.
EDIT: I simplyfied the previous code - less is more efficient...
.wrap {
display: flex;
justify-content: space-between;
}
button:nth-child(2) {
margin-left: auto;
}
<div class="wrap">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>