属性名 | justify-content |
---|---|
値 | flex-start | flex-end | center | space-between | space-around |
初期値 | flex-start |
適用可能要素 | フレックスアイテム |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10(-ms-flex-pack) 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
フレックスアイテムの横幅の合計が、フレックスコンテナの横幅に満たない場合の余白の表示方法を指定します。フレキシブルボックスについての概要は flex を参照してください。
値 | 説明 |
---|---|
flex-start | フレックスアイテムを最初に寄せて、後ろに余白を表示します。IE10 では start として実装されていました。 |
flex-end | フレックスアイテムを後ろに寄せて、先頭に余白を表示します。IE10 では end として実装されていました。 |
center | フレックスアイテムを中心に表示して、前後に余白を表示します。 |
space-between | フレックスアイテム間に均等に余白を表示します。 |
space-around | フレックスアイテム間と前後に余白を表示します。 |
.flexbox { display: flex; display: -ms-flexbox; padding: 10px; border: 1px solid #999; background-color: #ddd; } .boxA, .boxB, .boxC { border: 1px solid #999; text-align: center; width: 200px; } .boxA { background-color: #fcc; } .boxB { background-color: #cfc; } .boxC { background-color: #ccf; } .flex-start { -webkit-justify-content: flex-start; justify-content: flex-start; -ms-flex-pack: start; } .flex-end { -webkit-justify-content: flex-end; justify-content: flex-end; -ms-flex-pack: end; } .center { -webkit-justify-content: center; justify-content: center; -ms-flex-pack: center; } .space-between { -webkit-justify-content: space-between; justify-content: space-between; -ms-flex-pack: space-between; } .space-around { -webkit-justify-content: space-around; justify-content: space-around; -ms-flex-pack: space-around; }
<h5>flex-start</h5> <div class="flexbox flex-start"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>flex-end</h5> <div class="flexbox flex-end"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>center</h5> <div class="flexbox center"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>space-between</h5> <div class="flexbox space-between"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div> <h5>space-around</h5> <div class="flexbox space-around"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div>