HTML では、1 つの要素を中央に配置し、他のフレックスボックス要素を右/左に配置します。

P、Q、R、S、T が Web ページの中央に配置されているとしましょう −

リーリー

右端のコンテンツ、つまり T が次のように右に移動することを除いて、上記のコンテンツは同じままにしておきたいです −

リーリー

次に、上で見たものを実装するための例をいくつか見てみましょう。

自動マージンを使用して 1 つを中央に配置し、他のフレックスボックス要素を右/左に揃えます

Example

の中国語訳は次のとおりです:

Example

上記のレイアウトは、自動マージンと新しい非表示のフレックス項目を使用することで Web ページ上で実現できます。 −

リーリー

1 つを中央に配置し、他のフレックスボックス要素を擬似要素と右/左に揃えます

この例では、T と同じ幅の疑似要素を使用します。 ::before を使用してコンテナの先頭に配置します。

Example

の中国語訳は次のとおりです:

Example

次に例を見てみましょう −

リーリー

1 つを中央に配置し、他のフレックスボックス要素をグリッド レイアウトに合わせて右/左に配置します

この例では、複数の列を持つグリッドを作成します。次に、項目を中央と最後の列に配置します。

の中国語訳は次のとおりです:

例

例を見てみましょう −

ああああ

以上がHTML では、1 つの要素を中央に配置し、他のフレックスボックス要素を右/左に配置します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。