[CSS] 幅いっぱいに表示される要素にdisplay: inlineを指定しても幅が短くならない時の確認事項

WordPressのテーマなどをカスタマイズしている時に、思い通りの表示にならないことってありますよね。この記事では、幅いっぱいに表示される要素にdisplay: inlineを指定しても幅が短くならない時の確認事項について説明します。

親要素にalign-items: stretchが適用されている？

親要素にalign-items: stretchが適用されていると、子要素にdisplay: inlineを適用しても、幅が親要素の幅に合うように調整されます。子要素にalign-self: flex-startを指定することで、親要素のalign-items: stretchを無効にできます。

.parent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.child {
    align-self: flex-start;
}