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

Question

我有一个 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;
            }
        }
    }
   
}

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

Answer 1

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

为了每行放置 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/