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

Question

如何将弹性项向右对齐？

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

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

它的输出类似于

| content                   |

我正在寻找

|                   content |

Answer 1

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

Answer 2

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

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

然后，如果方向是行，请将项目与flex-end值对齐。这将对齐项目从右到左（从行的结束到开始）/（oX轴）

如果方向为“列”，则使用“对齐项目”属性对齐项目，该属性的值与“对齐内容”几乎相同，但配置为“垂直对齐”（oY轴）

这篇文章可以有所帮助。

Answer 3

在flex中对齐项目需要使用justify content或align items

你需要在你的代码中使用证明内容：

css prettyprint-override">.row {
    display: flex;
    justify-content: flex-end;
}

当您对元素使用display:flex时，它有一个默认的flex方向，值为行。这意味着您的内部元素将被放置在一行中。此方向（行）是您的主要方向<代码>对齐内容将指定项目在其主方向上的位置。

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

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

对齐内容：定义沿主轴的对齐方式。当一行中的所有flex项都不灵活或灵活但已达到最大尺寸时，它有助于分配剩余的额外可用空间。当项目溢出行时，它还对项目的对齐进行一些控制。Flexbox完整指南