Flexboxで子要素を親要素の最下部に揃えたいときのポイントまとめ

ポートフォリオにパーツを追加したので、高さが変わる親要素の中で、子要素を常に一番下に配置したいときの方法をまとめました。

.production__box {
    display: flex;
    flex-direction: column; /* 内部要素を縦並び */
    flex-grow: 1; /* 空いたスペースを埋める */
    min-height: 0;
    height: 100%;
}

flex-direction: column; → テキストとリンクを縦並びにする
flex-grow: 1; → 高さを伸縮させ、子要素に余白を持たせる
height: 100%; → 親要素の高さに適応

.production__txt {
    flex-grow: 1; /* 空いたスペースを埋めて、リンクボックスを押し下げる */
}

flex-grow: 1; → .production__txt が成長して空間を埋める
.production__link__box を押し下げる形で、自然に配置

.production__link__box {
    margin-top: auto; /* 自動で最下部に配置 */
    align-self: flex-end; /* flex の一番下へ */
}

margin-top: auto;

• 空いたスペースをすべて上に使う指定。
• これによって、要素が下に押し下げられる。
• flexコンテナ内で使うと特に効果的

通常、CSSでmarginをautoにすると、余ったスペースを均等に分配する動作になる。
margin-top: auto; を指定すると、「上にあるスペースをすべて使う」という指定になる。

flex-grow: 1;

• 主に上の要素（例：.production__txt）に使う。
• その要素が余ったスペースを埋めるように伸びる。
• 結果として、下の要素が自動的に下へ押される。

align-self: flex-end;

• 子要素を親要素の下端に揃える指定。
• ただし、スペースが足りないと中央や上にくる場合もある。

組み合わせのコツ

1. margin-top: auto; は余白をしっかり活用して、自然に下へ押す。
2. flex-grow: 1; を上の要素に使うと、レイアウトが崩れにくくなる。
3. align-self: flex-end; は補助的に使うとより確実