属性名 | align-content |
---|---|
値 | flex-start | flex-end | center | space-between | space-around | stretch |
初期値 | stretch |
適用可能要素 | フレックスコンテナ |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10(-ms-flex-line-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 | フレックスアイテム間と上下に余白を表示します。 |
stretch | フレックスアイテムの高さを伸ばします。 |
.flexbox { display: flex; display: -ms-flexbox; padding: 2px; border: 1px solid #999; background-color: #ddd; flex-wrap: wrap; width: 300px; height: 100px; } .flexbox > * { border: 1px solid #999; text-align: center; width: 100px; background-color: #cfc; } .flex-start { -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; } .flex-end { -webkit-align-content: flex-end; -ms-flex-line-pack: end; align-content: flex-end; } .center { -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; } .space-between { -webkit-align-content: space-between; -ms-flex-line-pack: space-between; align-content: space-between; } .space-around { -webkit-align-content: space-around; -ms-flex-line-pack: space-aroun; align-content: space-around; } .stretch { -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; }
<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 class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</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 class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</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 class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</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 class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</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 class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</div> </div> <h5>stretch</h5> <div class="flexbox stretch"> <div class="boxA">A</div><div class="boxB">B</div> <div class="boxC">C</div><div class="boxD">D</div> <div class="boxE">E</div><div class="boxF">F</div> </div>