私は flexbox を使用して、縮小された親コンテナー内に 2 つのコンテナーを表示しています。
div が並んでいる場合、それらをできるだけ離れて表示したいと考えます。 div が縮小し、2 番目の div が折り返されるとき、水平方向の中央に表示されるようにしたいと考えています。 現在、親コンテナで justify-content:space-Between を使用しています。これにより、コンテナができるだけ離れて表示されるようになりますが、2 番目の div がラップされると、それらを中心に置くことはありません。
これは、親 div: で justify-content: space- Between
親 div の幅が広い場合、期待どおりに表示されます
親 div の幅が狭い場合は折り返されますが、両方とも中央揃えではなく左揃えになります
理想的には次のようになります:
親 div の幅が広い場合、親 div 間のスペースが最大化されます
親 div の幅が狭い場合、2 つの div が水平方向に中央に配置されます。
私はさまざまな CSS トリックを試しましたが、この問題の重要な制限は、React のような外部フレームワークを使用せず、純粋な CSS を使用して実行する必要があることです。私は6年前にこれを見つけました、そして、それは同様のことについて話しており、flexboxでは実行できないが、2人の子供を想定したgridを使用して実行できる方法について話していました は固定幅ですが、私の場合、子の width は固定されていません。
これは私のコードの読みやすいバージョンです:
リーリー リーリー
重要な注意: プロパティは HTML オブジェクトに直接指定することしかできません。クラスを作成するための CSS ファイルがありません。そのため、コード スニペットでは ID を使用しています。これが、私ができることの基本的な制限であるためです。バックエンドからフロントエンドに渡され、そこで表示される HTML 文字列を作成しています。これがベスト プラクティスではなく、良いプラクティスでさえないことはわかっていますが、それが問題の技術的な制限です。
P粉3409802432024-02-22 16:46:45
つまり、投稿した画像に基づいて、CSS で @media クエリを使用して、子を小さな画面で折り返すようにしていると考えられます。その場合は、次のことを試してください: