<div> を含む 2 つの行があり、各行には display: flex; があり、各行には複数の sub<div> ;project が含まれています。以下の例では、最初の行 (「item」というラベルが付いた緑色のボックス) に 2 つのアイテムがあり、それらの比率が 6/3 であることがわかります。 2 行目には 4 つの項目があり、その割合は 2/2/2/3 です。
ここで、gap: X px; を追加しない限り、各行の最後の項目 (flex: 3; を使用) を完全に揃えたいと考えています。
同じ幅の項目が flex プロパティに従って整列するように、この ギャップを計算に含めるにはどうすればよいですか?
または、次のコード スニペットでグラフィカルに簡略化します: 赤い境界線を揃えるにはどうすればよいですか?
リーリー リーリー
P粉1547981962023-09-18 15:15:17
多くの可能な解決策の 1 つは、いくつかの項目を別の flex div でラップすることです。
クラス flex-item を含む以下のコードを参照してください: