CSSフレックスモデルにおける個別要素の整列
次に学ぶプロパティは、
フレックス要素の親ではなく、
要素自体に設定されます。
個別のブロックを交差軸に沿って整列させる
プロパティalign-selfを見ていきましょう。
行に並べられたフレックスブロックがあるとします。
align-itemsをcenterに設定して
垂直方向に中央揃えにし、
2番目の要素には追加のクラスelemを与えて、
別の整列、例えば上端に寄せる設定をします。
これには、クラスelemを持つ要素の
align-selfプロパティを
flex-startに設定します：
<div class="parent">
<div class="child">1</div>
<div class="child elem">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
align-items: center;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child {
width: 50px;
height: 50px;
border: 1px solid green;
}
.elem {
align-self: flex-start;
}
:
