P粉354948724 2023-09-17 19:34:16 0 1 188
我有两个包含 现在,我希望每行中的最后一个项目(具有 我如何在计算中包含这个
display: flex;
,每个行中都包含几个子6/3
。在第二行中有4个项目,它们的比例为2/2/2/3
。
flex: 3;
)能够完美对齐,除非我添加一个gap: X px;
。
gap
,以便具有相同宽度的项目根据它们的flex
属性对齐?
或者在下面的代码片段中以图形方式简化:我如何对齐红色边框?.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;
}
P粉154798196 采纳为最佳 2023-09-18 15:15:17 1楼
多种可能的解决方案之一是在另一个弹性div中包裹一些项目。
请参见下面的代码,其中包含类
flex-item
: 赞 +0 添加回复