使用 flex 网格（不是 xy 网格）时，基础右对齐列答案

【问题标题】：Foundation align column right when using flex grid (not xy grid)使用 flex 网格（不是 xy 网格）时，基础右对齐列
【发布时间】：2020-02-25 19:07:56
【问题描述】：

<div class="row align-middle">
        <div class="small-4 columns">
            <div></div>
        </div>

        <div class="small-4 columns">
            <div></div>
        </div>

        <div class="small-4 columns">
            <div>I want to be on the right edge of the parent .row</div>
        </div>
    </div>

上面有。

我希望第三个 .columns div 中的 div 向右对齐（这样看起来就像我将 text-align: center 放在第三个 .columns div 上一样） .

我知道这样做的方法 - 通过在该列中放置另一个 .row div 并给 .row 另一个类 align-right 然后在该行内放置另一个 .columns - 但这会导致不必要的 HTML，我认为 Foundation 必须为我提供了一种方法（另一个我在文档中找不到的 CSS 类），无需比上述更多的 HTML 即可实现我的目标。

我该怎么做？还是我必须在第三列中添加另一行和一列？

.columns 没有display: flex，所以我不能将align-right 放在列上 - 不起作用。还是 .columns 意味着有 display:flex 而我只是遇到了一个错误或我可能在某处创建的其他问题？

谢谢

【问题讨论】：

标签： zurb-foundation

【解决方案1】：

如果您使用的是 6.5 版本的基础，那么代码中的以下替换将达到您的预期

<div class="grid-x">
    <div class="small-4 cell">
        <div></div>
    </div>

    <div class="small-4 cell">
        <div></div>
    </div>

    <div class="small-4 cell">
        <div>I want to be on the right edge of the parent .row</div>
    </div>
</div>

但是如果你真的不想使用grid-xy 类，那么你可以保留你的代码并使用foundation 5.5。我希望这有帮助！

【讨论】：