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

问题描述

我有一个 MVC 项目，其中有两列。在左列，我有一个按钮网格，我希望每行最多有两个按钮。目前，它是每行 4 个按钮，我尝试过flex: 0 1 50%，但没有奏效。目前，它看起来像这样：

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

网格.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>

网格.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;
            }
        }
    }
   
}

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

标签： c#asp.net-mvcrazorsassflexbox

解决方案

首先，如果您在max-width上设置 a .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;
        }
    }
}