Flex コンテナ内でテキストを折り返すときに「justify-content: center」テキストが中央に配置されないのはなぜですか?

テキストが justify-content: center で中央に配置されない

この問題は、フレックス コンテナ内のコンテンツが過度に長くなり、折り返しが発生する場合に発生します。 。コンテンツは justify-content: center で水平方向に中央揃えされますが、折り返し中に配置が乱れます。

Flexbox の 3 つのレベルを理解する

フレックス コンテナの構造は、次の 3 つのレベルで構成されます。

• コンテナ
• アイテム
• コンテンツ

各レベルは独立した要素を表します。

フレックス コンテナでの位置調整

justify-content はコンテナ内のフレックス項目の配置を制御しますが、項目の子 (この場合はテキスト) には直接影響しません。

フレックス コンテナの幅がコンテンツの幅を超えている場合、フレックス アイテムはコンテンツに合わせて縮小し (縮小してフィット)、水平方向に中央揃えになります。アイテム内のコンテンツは、自動的にこの配置に従います。

コンテンツがフレックス コンテナを超えるときの配置

ただし、コンテンツがフレックス コンテナよりも広くなると、フレックス アイテムはもう整列しません。項目がコンテナーの幅全体を占有しているため、整列のための空き領域が不十分です。

テキストの整列

整列がずれているにもかかわらず、text-align: center が適用されることはありませんでした。デフォルトではテキスト。直接中央に配置するには、text-align: center をフレックス項目またはフレックス コンテナーのいずれかに明示的に追加する必要があります。

コード例

<code class="css">article {
  display: flex;
  align-items: center;
  justify-content: center;
}

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

<code class="html"><article>
  <p>some long text here</p>
</article>

<article>
  <p class="center">some long text here</p>
</article></code>

以上がFlex コンテナ内でテキストを折り返すときに「justify-content: center」テキストが中央に配置されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。