align-self …… コンテナ内の個別アイテムの縦方向の揃え位置を指定する
広告
align-selfプロパティは、コンテナ内の個別アイテムの縦方向（交差軸方向）の揃え位置を指定する際に使用します。
アイテムの縦方向のマージンのいずれかがautoに指定されている場合、align-selfプロパティの指定は無効となります。
コンテナ内のアイテムの横方向の揃え位置を指定する場合は、justify-selfプロパティを使用します。
■値
- auto
- 親ボックスのalign-itemプロパティの値に合わせる（初期値）
- flex-start
- 開始位置揃え、通常は上端揃え
- flex-end
- 終了位置揃え、通常は下端揃え
- center
- センター揃え
- baseline
- ベースライン揃え
- stretch
- フレックスアイテムが伸ばされて揃えられる
W3Cのページに掲載されている以下の図が分かりやすいでしょう。
■初期値・適用対象・値の継承
- 初期値
- stretch
- 適用対象
- フレックスアイテム
- 値の継承
- しない
■使用例１
CSSソース
.sample {
display:grid;
grid-template-columns:auto 1fr auto;
grid-template-rows:50px;
width:300px; background-color:white; border:1px solid black;
}
.hidari {grid-column:1; width:50px; background-color:yellow;}
.naka {grid-column:2; width:50px; background-color: orange;}
.migi {grid-column:3; width:50px; background-color:pink;}
HTMLソース
<h5>中ボックスにalign-self:flex-start;を指定。</h5> <div class="sample"> <div class="hidari">左</div> <div class="naka" style="align-self:flex-start;">中</div> <div class="migi">右</div> </div> <h5>中ボックスにalign-self:center;を指定。</h5> <div class="sample"> <div class="hidari">左</div> <div class="naka" style="align-self:center;">中</div> <div class="migi">右</div> </div> <h5>中ボックスにalign-self:flex-end;を指定。</h5> <div class="sample"> <div class="hidari">左</div> <div class="naka" style="align-self:flex-end;">中</div> <div class="migi">右</div> </div>
↓↓↓
ブラウザ上の表示
中ボックスにalign-self:flex-start;を指定。
左
中
右
中ボックスにalign-self:center;を指定。
左
中
右
中ボックスにalign-self:flex-end;を指定。
左
中
右
■使用例２
CSSソース
ul.sample_menu {
display:-webkit-flex;
display:flex;
width:100%;
height:100px;
background-color:#ffeeaa;
list-style-type:none;
margin:0; padding:0;
}
ul.sample_menu a {
display:block;
margin:2px; padding:10px; font-size:10px;
background-color:#66cc99; color:#ffffff;
text-align:center;
text-decoration:none;
}
HTMLソース
<h5>メニュー2だけalign-self:flex-end;と個別指定</h5> <ul class="sample_menu"> <li><a href="#">メニュー1</a></li> <li style="align-self:flex-end;"><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> <li><a href="#">メニュー4</a></li> </ul>
↓↓↓
ブラウザ上の表示
メニュー2だけalign-self:flex-end;と個別指定
広告