指定された間隔を使用してフレックス項目を行に整列します

Question

<div> を含む 2 つの行があり、各行には display: flex; があり、各行には複数の sub<div> ;project が含まれています。以下の例では、最初の行 (「item」というラベルが付いた緑色のボックス) に 2 つのアイテムがあり、それらの比率が 6/3 であることがわかります。 2 行目には 4 つの項目があり、その割合は 2/2/2/3 です。

ここで、gap: X px; を追加しない限り、各行の最後の項目 (flex: 3; を使用) を完全に揃えたいと考えています。

---

同じ幅の項目が flex プロパティに従って整列するように、この ギャップを計算に含めるにはどうすればよいですか? または、次のコード スニペットでグラフィカルに簡略化します: 赤い境界線を揃えるにはどうすればよいですか?

リーリー リーリー

Answer 1

多くの可能な解決策の 1 つは、いくつかの項目を別の flex div でラップすることです。
クラス flex-item を含む以下のコードを参照してください:

リーリー リーリー