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