justify：右揃えの最後の要素でスペースを挟む

Question

これを達成する方法はありますか（フレックスボックスなどで）？

• 均等に分散テキスト
• が、最初と最後の要素スティック両側に

私は（これは、これはシュリンクラップされるフレックスのアイテムが必要になると仮定しています私は思う）は不可能です。

Answer 1

space-between下の例をチェックアウトワーク・ます：

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>

A Notherの方法は、エンドでのアイテムのautoマージンを使用しているが、それは違うeffect-デモ下記を参照しています

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

flexboxを使用すると、のjustify-contentプロパティを使用して、アイテムの配信動作を定義できます。

justify-content: space-around; 

必要なものは何ですか？ここで

は一例です： http://codepen.io/fazermokeur/pen/WGJpJO

（直接フレキシボックスについては、この完璧なリソースに触発さ：https://css-tricks.com/snippets/css/a-guide-to-flexbox/）