属性名 | align-items |
---|---|
値 | flex-start | flex-end | center | baseline | stretch |
初期値 | stretch |
適用可能要素 | フレックスコンテナ |
継承 | 継承しない |
メディア | visual |
アニメーション | 不可 |
CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
---|---|---|---|---|---|
CSS3 | 10(-ms-flex-align) 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
フレックスアイテムの表示位置を指定します。align-items はフレックスコンテナに対して、align-self は個々のフレックスアイテムに対して指定します。フレキシブルボックスについての概要は flex を参照してください。
値 | 説明 |
---|---|
flex-start | フレックスアイテムの上側を揃えて表示します。flex-direction が column や column-reverse の場合は右側を揃えて表示します。IE10 では start として実装されていました。 |
flex-end | フレックスアイテムの下側を揃えて表示します。flex-direction が column や column-reverse の場合は右側を揃えて表示します。IE10 では end として実装されていました。 |
center | フレックスアイテムの高さの中心を揃えて表示します。flex-direction が column や column-reverse の場合は横幅の中心を揃えて表示します。 |
baseline | フレックスアイテム内の文字のベースラインをそろえて表示します。 |
stretch | フレックスアイテムの高さを揃えて表示します。flex-direction が column や column-reverse の場合は横幅を揃えて表示します。 |
.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: 100px; } .boxA { background-color: #fcc; min-height: 20px; } .boxB { background-color: #cfc; min-height: 60px; } .boxC { background-color: #ccf; min-height: 40px; } .flex-start { -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .flex-end { -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .center { -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .baseline { -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; } .stretch { -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: 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> <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>baseline</h5> <div class="flexbox baseline"> <div class="boxA">A</div> <div class="boxB" style="font-size:18pt;">B</div> <div class="boxC">C</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>