私は flexbox を使用して、縮小された親コンテナー内に 2 つのコンテナーを表示しています。

• 親コンテナが十分に大きく、2 つの div が並んでいる場合、それらをできるだけ離れて表示したいと考えます。
• 親の div が縮小し、2 番目の div が折り返されるとき、水平方向の中央に表示されるようにしたいと考えています。

現在、親コンテナで justify-content:space-Between を使用しています。これにより、コンテナができるだけ離れて表示されるようになりますが、2 番目の div がラップされると、それらを中心に置くことはありません。

これは、親 div: で justify-content: space- Between

親 div の幅が広い場合、期待どおりに表示されます

親 div の幅が狭い場合は折り返されますが、両方とも中央揃えではなく左揃えになります

理想的には次のようになります:

親 div の幅が広い場合、親 div 間のスペースが最大化されます

親 div の幅が狭い場合、2 つの div が水平方向に中央に配置されます。

flexboxでは実行できないが、2人の子供を想定したgridを使用して実行できる方法について話していました は固定幅ですが、私の場合、子の width は固定されていません。 これは私のコードの読みやすいバージョンです:

リーリー リーリー

: プロパティは HTML オブジェクトに直接指定することしかできません。クラスを作成するための CSS ファイルがありません。そのため、コード スニペットでは ID を使用しています。これが、私ができることの基本的な制限であるためです。バックエンドからフロントエンドに渡され、そこで表示される HTML 文字列を作成しています。これがベスト プラクティスではなく、良いプラクティスでさえないことはわかっていますが、それが問題の技術的な制限です。