使用 flexbox 将项目向右对齐 [重复]答案

【问题标题】：align items to the right using flexbox [duplicate]使用 flexbox 将项目向右对齐 [重复]
【发布时间】：2020-07-07 14:03:15
【问题描述】：

如何将弹性项目向右对齐？

.row {
    display: flex;
    text-align: right; //nothing happens
}

<div className="row">
    <div className="col">content</div>
</div>

这个输出类似于

| content                   |

我正在寻找

|                   content |

【问题讨论】：

标签： css flexbox

【解决方案1】：

.row {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

首先，您需要将项目的方向（flex-direction）指定为行（水平）或列（垂直）。

然后，如果方向是行，则使用 justify-content 属性与 flex-end 值对齐项目。这将从右到左对齐项目（从行尾到开始）/（oX 轴）

如果方向是列，则使用 align-items 属性对齐项目，该属性与 justify-content 具有几乎相同的值，但配置为垂直对齐（oY 轴）

This post 可以帮忙。

【讨论】：

【解决方案2】：

flex 中的对齐项目需要使用justify-content 或align-items 处理

您需要在代码中使用justify-content：

.row {
    display: flex;
    justify-content: flex-end;
}

当您将display:flex 用于元素时，它的默认flex-direction 值为row。这意味着您的内部元素将被放置在一行中。这个方向（行）是你的主要方向。 justify-content 将指定您的项目在其主要方向上的位置。

justify-content 的值可以是flex-start、flex-end 等。您需要将其设置为flex-end，这在您的情况下表示右侧。

我强烈建议您阅读以下链接以获取更多信息：

调整内容：这定义了沿主轴的对齐方式。当一行上的所有 flex 项目都不灵活，或者是灵活的但已达到最大大小时，它有助于分配额外的可用空间。当项目溢出行时，它还会对项目的对齐方式施加一些控制。 A Complete Guide to Flexbox

【讨论】：

【解决方案3】：

.row {
display: flex;
justify-content: flex-end; 
}

【讨论】：