コンテンツが項目の幅を超えている場合に、Flexbox 項目内でテキストを配置する方法

フレックスボックスでのテキストの配置: Justify-Content と Text-Align について

フレックスボックスでは、justify-content プロパティによりフレックス項目が配置されます。 text-align は、これらの flex アイテム内のテキスト コンテンツを整列させます。フレックス項目内のコンテンツが幅を超えると、配置の不一致が発生する可能性があります。

デフォルトのテキスト配置動作

デフォルトでは、テキストは左揃え (または右から左に記述する言語では右揃えになります)。フレックスボックス コンテナーで justify-content: center を使用すると、フレックス項目はコンテナー内で水平方向の中央に配置されます。ただし、この配置はフレックス アイテム自体にのみ適用され、そのコンテンツには適用されません。

コンテンツの幅がアイテムの幅を超える場合

テキスト コンテンツの幅がフレックス アイテムよりも広い場合の場合、アイテムは利用可能な幅全体を占有しているため、それ以上整列（中央揃えや両端揃えなど）することはできません。その結果、テキストはデフォルトの左揃えスタイルを維持します。

Text-Align による配置の修正

フレックス項目内でテキストを中央揃えにするには、次の操作を行う必要があります。 text-align: center をフレックス項目またはその親コン​​テナのいずれかに明示的に設定します。これにより、デフォルトの左揃え動作がオーバーライドされ、テキスト コンテンツが希望の方法で揃えられます。

例:

<code class="css">.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: center;
}</code>

この例では、フレックス項目クラスtext-align: center が含まれており、項目の幅に関係なく、テキスト コンテンツが各 flex 項目内で中央に配置されるようにします。

以上がコンテンツが項目の幅を超えている場合に、Flexbox 項目内でテキストを配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。