CSS Flexboxで文字数が異なる要素を同じ幅・高さに揃える方法

CSSのFlexboxを使って縦長の長方形を並べると、文字数が異なる場合に幅がずれてしまうことがあります。この記事では、文字数にかかわらず要素の幅と高さを揃える方法を具体例付きで解説します。

Flexboxの基本設定

まず、親コンテナにdisplay: flexを指定して、子要素を並べます。flex-directionをcolumnにすることで縦長の配置に対応できます。

例：
.container { display: flex; flex-direction: row; gap: 10px; }

幅を揃える方法

幅を揃えるには、子要素にflex: 1やwidthの固定値を指定します。flex: 1を使うと、親コンテナの幅に応じて自動で均等に分配されます。

例：
.box { flex: 1; }

高さを揃える方法

高さを揃えるには、align-items: stretchを親要素に指定します。これにより、文字数が異なっても高さが均一になります。

例：
.container { display: flex; align-items: stretch; }

文字数による影響を軽減するテクニック

文字が多くて幅が広がる場合は、word-break: break-wordやoverflow-wrap: break-wordを使い、テキストが折り返されるようにします。また、paddingやmin-widthを調整すると見栄えが安定します。

例：
.box { word-break: break-word; padding: 10px; }

まとめ

Flexboxでは、親要素にdisplay: flexとalign-items: stretchを指定し、子要素にflex: 1を設定することで、文字数が異なる場合でも幅と高さを揃えた縦長の長方形を作ることができます。テキスト折り返しやpaddingの調整も併用すると、デザインが崩れずに整ったレイアウトが可能です。