justify: space-between with right aligned last element

Question

Is there a way to accomplish this (with flexbox, or other)?

• evenly distributed text
• but first and last element sticks to the sides

I'm assuming this would need the flex items to be shrinkwrapped, which (I think) isn't possible.

Answer 1

space-between will work- check out the example below:

 body { margin: 0; } * { box-sizing: border-box; } .wrapper { display: flex; justify-content: space-between; } .wrapper > * { border: 1px solid; }

 <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div>

Another way is using auto margins for the items at the end- but it has a different effect- see demo below:

 body { margin: 0; } * { box-sizing: border-box; } .wrapper { display: flex; justify-content: space-around; } .wrapper > * { border: 1px solid; } .wrapper div:first-child { margin-right: auto; } .wrapper div:last-child { margin-left: auto; }

 <div class="wrapper"> <div>one</div> <div>two</div> <div>three</div> <div>four</div> <div>five</div> </div>

Answer 2

With flexbox you could use the justify-content property to define the item's distribution behavior.

justify-content: space-around;

is what you need is what you need.

Here is a example: http://codepen.io/fazermokeur/pen/WGJpJO

(directly inspired by this perfect resource about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ )