コンテンツがコンテナの幅を超える場合、フレックスコンテナ内でテキストを中央に配置するにはどうすればよいですか?

フレックス コンテナでのテキストの配置の問題

フレックス コンテナ (表示: flex) を使用する場合、コンテンツがコンテナの幅を超えると、テキストの配置が困難になる場合があります。この問題を理解するには、フレックス コンテナの HTML 構造を詳しく調べることが重要です。

3 層構造

フレックス コンテナは、次の 3 つの異なる層で構成されます:

• コンテナ: フレックス コンテナ自体
• アイテム: 個々のフレックス アイテム
• コンテンツ: 要素アイテム内

各レイヤーは独立したエンティティを表します。これは、コンテナとアイテムに設定された配置プロパティがコンテンツの配置に直接影響しないことを意味します。

Justify-Content およびText Alignment

justify-content プロパティは、コンテナ内のフレックス項目の配置を制御します。アイテム内のコンテンツの配置を直接制御するわけではありません。

justify-content: center が行方向のコンテナに適用されると、フレックス アイテムはコンテンツの幅に縮小され、水平方向に中央揃えになります。 。ただし、コンテンツがコンテナの幅を超える場合、項目を中央揃えにすることはできません。

このシナリオでは、justify-content 設定に関係なく、コンテンツはデフォルトで左揃えになります。テキストを明示的に中央揃えにするには、text-align: center をフレックス項目またはそのコンテナに適用する必要があります。

デモの例

提供された CSS スニペットでは、フレックス クラスは justify-content を適用します。

p 要素に適用される .center クラスに text-align: center を追加すると、テキストが正しく中央揃えになります。コンテンツの幅が広すぎる場合でも。

以上がコンテンツがコンテナの幅を超える場合、フレックスコンテナ内でテキストを中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。