【Flexbox】align-selfで特定の子要素だけ位置を変える

チャッピー

Flexbox（フレックスボックス）を使っているときに「個別にこの子要素だけ位置を変えたい！」というときはどうするの？

こばゆた

そんなときに活躍するのが、今回紹介するalign-selfプロパティです。

この記事では、初心者の方でもわかりやすいようにalign-selfの役割や使い方、よくある間違いなどを丁寧に解説していきます。

1.align-selfとは？

align-selfはFlexboxで並んでいる子要素を個別に交差軸方向への指定ができます。

また子要素の幅(または高さ)を指定しないと親要素いっぱいに伸びます。

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  align-self: 値;
}

例：

<div class="container">
  <div class="item boxa">aaa</div>
  <div class="item boxb">bbb</div>
  <div class="item boxc">ccc</div>
  <div class="item boxd">ddd</div>
</div>

.boxb{
  align-self: flex-end; /* 交差軸方向の終点に配置する */
}

こばゆた

boxbにalign-self: flex-end;を指定したところ個別に動きが出ていますね。

では他の値ではどうなるか動かして遊んでみましょう。
またflex-directionで軸を変えたときの動きも注目です。

きなこ

プロパティに入る値はいつもとあまり変わらないんだね

2.align-selfでよく使う値

See the Pen Untitled by kbyt (@kbo58) on CodePen.

3.よくある間違い

3-1.親要素にdisplay: flex;をつけ忘れる

align-self は Flexboxの文脈でしか効かないので、親要素にdisplay: flex;を指定していないと効果がありません。

3-2.align-itemsと混同する

align-itemsは親要素に指定し、子要素全てを並べ替えます。
一方でalign-selfは子要素のみに効果があります。

まとめ

.container{
  display: flex; /* 親要素にdisplay: flex;を指定 */
}

セレクター{
  align-self: 値;
}