Close
align-selfプロパティは、コンテナ内の個別アイテムの縦方向（交差軸方向）の揃え位置を指定する際に使用します。
アイテムの縦方向のマージンのいずれかがautoに指定されている場合、align-selfプロパティの指定は無効となります。
コンテナ内のアイテムの横方向の揃え位置を指定する場合は、justify-selfプロパティを使用します。
W3Cのページに掲載されている以下の図が分かりやすいでしょう。
.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;}
<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>
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;
}
<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>
どのカジノが自分に最適か分からないですか?