ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。