I have two rows containing Now I want the last item in each row (with How do I include this, each row has
display: flex;, each row contains several sub ;project. In the example below, you can see that there are 2 items in the first row (the green box labeled "item") and their ratio is
6/3. In the second row there are 4 items and their proportion is2/2/2/3.
flex: 3;) to be perfectly aligned unless I add agap: X px;.
gapin the calculation so that items with the same width align according to theirflexproperty? Or simplify it graphically in the following code snippet: How do I align the red border?.flex { height: 50px; display: flex; gap: 20px; // <- 破坏我的布局的罪魁祸首 } .item { background-color: green; outline: 1px solid black; display: flex; justify-content: center; align-items: center; } .item-2 { flex: 2; } .item-3 { flex: 3; } .item-6 { flex: 6; }
item item item item item item
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
One of the many possible solutions is to wrap some items in another flex div.
See the code below, which contains class
flex-item:.flex { height: 50px; display: flex; gap: 20px; // <- 破坏我的布局的罪魁祸首 } .item { background-color: green; outline: 1px solid black; display: flex; justify-content: center; align-items: center; } .item-2 { flex: 2; } .item-3 { flex: 3; } .item-6 { flex: 6; } .flex-item { display: flex; gap: 20px; justify-content: center; }