如何在ASP中使用flexbox将项目限制为每行两个项目？ Grid.cshtml Grid.scss 如何在使按钮保持相同大小和对齐方式的同时使其每行两个项目？

如何解决如何在ASP中使用flexbox将项目限制为每行两个项目？ Grid.cshtml Grid.scss 如何在使按钮保持相同大小和对齐方式的同时使其每行两个项目？

我有一个MVC项目，其中有两列。在左列上，我有一个按钮网格，并且我想使其最大数量为每行两个按钮。当前，它是每行4个按钮，我尝试了flex: 0 1 50%，但是没有用。当前，它看起来像这样：

这是左列内的按钮视图和样式的代码：

Grid.cshtml

<div class="linkContainer">
    <div class="linkContainer-grid">
        @foreach (var link in Model.Links)
        {
            <div class="linkContainer-gridItem">
                <a class="linkContainer-gridItem-link" href="@link.Url">
                    @if (!string.IsNullOrEmpty(link.Icon))
                    {
                        <div><i class="icon @link.Icon"></i></div>
                    }
                    @link.Label
                </a>
            </div>
        }
    </div>

Grid.scss

.linkContainer {
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dddfe2;

    .linkContainer-title {
        color: #fff;
        background: $colorBrandDarkBlue;
        padding: 1rem;
        border-radius: 5px;
        margin: -.5rem -.5rem 1rem -.5rem;
    }

    .linkContainer-list {
        list-style: none;
        padding: 0;
        margin-bottom: 0;
        font-family: "Montserrat",sans-serif;

        .linkContainer-item {
            position: relative;

            .linkContainer-link {
                display: -webkit-Box;
                display: -ms-flexBox;
                display: flex;
                padding: .75rem .5rem;
                color: $colorBrandBlue;
                font-weight: 400;
                font-size: 18px;
                -webkit-Box-align: center;
                -ms-flex-align: center;
                align-items: center;
                text-decoration: none;
                background-color: transparent;
                font-family: "Montserrat",sans-serif;
            }

            .icon:before {
                font-size: 30px;
                margin-right: 1rem;
            }
        }

        .linkContainer-item:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            border-top: 1px dotted;
            opacity: .25;
        }
    }

    .linkContainer-grid {
        padding: 0;
        margin-bottom: 0;
        font-family: "Montserrat",sans-serif;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: stretch;
        text-align: center;
        flex-wrap: wrap;

        .linkContainer-gridItem {
            flex: 0 1 50%;
            padding: 20px 10px;
            background-color: $colorBrandBlue;
            border-radius: 25px;
            align-items: center;
            justify-content: center;
            width: calc(50% - 20px);
            margin: 10px 0;
            min-width: 100px;
            max-width: 130px;

            .linkContainer-gridItem-link {
                color: white;
                text-decoration: none;
            }

            .icon {
                font-size: 30px;
                margin-bottom: 0.25rem;
            }
        }
    }

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

            .linkContainer-gridItem {
                margin: 10px;
            }
        }
    }
   
}

如何在使按钮保持相同大小和对齐方式的同时使其每行两个项目？

解决方法

首先，如果您在max-width上设置了.linkContainer-gridItem，则它将连续显示所有4个项目，这是因为flex box试图连续放置尽可能多的项目，在必须包装之前。

为了每行放置2个项目，第一步是删除min-width和max-width。实际上，您也可以删除width，因为可以通过flex:对其进行控制。

演示： https://jsfiddle.net/davidliang2008/zv5tsrd1/22/

现在，为了每行显示2个项目，您需要将项目总宽度设置为50%。但是属性flex-basis:和width:仅表示内容宽度。现在可能是检查框模型的好时机：https://www.w3schools.com/css/css_boxmodel.asp

我们需要找出正确的内容宽度，以使项目总宽度（包括边框，边距和边距）为50％：

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

在小于1024px的断点处，您左右有10px的空白，因此项目的内容宽度应该为

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

在断点1024px或更高处，您左右有10px的空白，因此该项目的内容宽度应该是

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

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

演示： https://jsfiddle.net/davidliang2008/zv5tsrd1/27/