C# 如何在asp中使用flexbox将项目限制为每行两个项目？

我有一个MVC项目，我有两个专栏。在左边的列中，我有一个按钮网格，我希望每行最多有两个按钮。目前，它是每行4个按钮，我尝试了

flex:0150%

，但没有成功。目前看起来是这样的：

以下是左列中按钮视图的代码和样式：

Grid.cshtml

@foreach（Model.Links中的var-link）
{
}

Grid.scss

.linkContainer{
填充：1rem；
边缘底部：2rem；
位置：相对位置；
背景：#fff；
边界半径：8px；
边框：1px实心#dddfe2；
.linkContainer标题{
颜色：#fff；
背景：$colorBrandDarkBlue；
填充：1rem；
边界半径：5px；
保证金：-.5rem-.5rem 1rem-.5rem；
}
.linkContainer列表{
列表样式：无；
填充：0；
页边距底部：0；
字体系列：“蒙特塞拉特”，无衬线；
.linkContainer项目{
位置：相对位置；
.linkContainer链接{
显示：-网络工具包盒；
显示：-ms flexbox；
显示器：flex；
填充物：75雷姆。5雷姆；
颜色：$colorBrandBlue；
字体大小：400；
字号：18px；
-webkit框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
文字装饰：无；
背景色：透明；
字体系列：“蒙特塞拉特”，无衬线；
}
.图标：之前{
字体大小：30px；
右边距：1rem；
}
}
.linkContainer项目：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
左：0；
边框顶部：1个点；
不透明度：.25；
}
}
.linkContainer网格{
填充：0；
页边距底部：0；
字体系列：“蒙特塞拉特”，无衬线；
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：拉伸；
文本对齐：居中；
柔性包装：包装；
.linkContainer网格项{
弹性：01 50%；
填充：20px 10px；
背景色：$colorBrandBlue；
边界半径：25px；
对齐项目：居中；
证明内容：中心；
宽度：计算（50%-20px）；
利润率：10px0；
最小宽度：100px；
最大宽度：130像素；
.linkContainer gridItem链接{
颜色：白色；
文字装饰：无；
}
.图标{
字体大小：30px；
边缘底部：0.25雷姆；
}
}
}
@介质（最小宽度：1024px）{
.linkContainer网格{
证明内容：中心；
.linkContainer网格项{
利润率：10px；
}
}
}
}

---

如何在保持按钮大小和对齐方式相同的情况下使其每行显示两个项目？首先，如果在

.linkContainer gridItem

上设置一个

max width

，它将在一行中显示所有4个项目，因为flex box试图在包装之前将尽可能多的项目放入一行

为了每行放置2个项目，第一步是删除

min width

和

max width

。事实上，您也可以删除

宽度

，因为您可以通过

flex:

控制它

演示：

现在，为了每行显示2个项目，您需要将项目总宽度设置为

50%

。但是属性

flex basis:

以及

width:

只是指内容宽度。现在可能是查看长方体模型的好时机：

我们需要计算出正确的内容宽度，以便项目总宽度，包括边框、填充和边距，将为50%：

内容宽度=50%-边框-填充-边距

在小于1024px的断点上，左右各有10px的填充，因此项目的内容宽度应为

.linkContainer-gridItem {
    flex: 0 1 calc(50% - 2*10px);
}

@media (min-width: 1024px) {
    .linkContainer-grid {
        justify-content: center;

        .linkContainer-gridItem {
            flex-basis: calc(50% - 2*10px - 2*10px);
            margin: 10px;
        }
    }
}

在断点1024px及以上，您的左右两侧都有额外的10px边距，因此项目的内容宽度应为

.linkContainer-gridItem {
    flex: 0 1 calc(50% - 2*10px);
}

@media (min-width: 1024px) {
    .linkContainer-grid {
        justify-content: center;

        .linkContainer-gridItem {
            flex-basis: calc(50% - 2*10px - 2*10px);
            margin: 10px;
        }
    }
}

---

演示：

我们可以保持按钮的宽度和高度相同吗？例如，按钮正在拉伸以填充整个宽度，有没有一种方法可以使其在响应的同时始终成为正方形？