css - 如何停止 flex 自动调整，目前基于文本长度自动调整。尽管有任何文本长度，我都希望整个表格大小相同

Question

如何对齐，因为我无法对齐

    <div class="d-flex justify-content-between">
        <span>Total Items: @Model.Count </span>
        <div class="d-flex flex-row align-items-center">
            <span class="text-black-50">Sort by:</span>
            <div class="price ml-2">
                <span class="mr-1">price</span>
                <i class="fa fa-angle-down"></i>
            </div>
        </div>
    </div>

标签： css

Answer 1

如果您想要一个快速的解决方案，请为元素分配特定的百分比宽度并设置flex-grow: 0;.

但是，flexbox 一开始可能不是解决您的问题的正确方法，因为您只能在一个方向上对齐项目。

如果您需要对齐列，请尝试CSS Grid Layout，它类似于 flexbox，但允许您使用行和列来对齐您的项目。

（我知道有些人反对 W3schools，但他们的 CSS Grid 教程有助于入门）