FlexboxやGridの子要素が個別に縦方向(交差軸)の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。
align-self: auto | flex-start | flex-end | center | baseline | stretch| self-start | align-self: flex-start |
| self-center | align-self: center |
| self-end | align-self: flex-end |
| self-stretch | align-self: stretch |
align-self: flex-start;交差軸の開始位置に配置
align-self: flex-end;交差軸の終了位置に配置
align-self: stretch;交差軸方向に伸縮(デフォルト)
親のalign-itemsを個別の子要素で上書きできる。1つだけ異なる配置にしたい時に便利。
親がFlexboxまたはGridでないと効果がない。align-itemsとの違いを理解する(親 vs 子)。
コンテナのalign-items(全員)に対する個別上書きがalign-self(自分だけ)です。AIは「1つだけ配置を変えたい」場面でコンテナ側をいじる遠回りをすることがあります。flexの交差軸・gridのブロック軸という対象軸の違い、stretchを解除して固有サイズに戻す用途も押さえておくと便利です。
flexの並びの中で1つのボタンだけ下端に揃えたい。align-selfで書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。