Question

我有以下HTML：

<div class="outer">
    <div class="inner1">Hello</div>
    <div class="inner2">World</div>
</div>

使用以下CSS：

.outer {
    display: flex;
}
.inner1 {
    display: flex;
    width: 5em;
    text-align: right;
}
.inner2 {
    display: flex;
    width: 5em
}

我希望inner1类中的文本是正确的。我认为text-align: right会导致这种情况发生，但事实并非如此。

如何修改上述HTML和CSS以使inner1文本“Hello”正确对齐？为什么display: flex会影响此行为？

Answer 1

你快到了。您只需添加justify-content属性。

在CSS中添加一行代码：

.inner1 {
    display: flex;
    width: 5em;
    /* text-align: right; REMOVE; not necessary */
    justify-content: flex-end; /* NEW */
}

DEMO：http://jsfiddle.net/5qLdnk5p/1/

这是一个略微增强的演示，使该功能更加引人注目：

DEMO：http://jsfiddle.net/5qLdnk5p/

来自spec：

<强> justify-content

justify-content属性沿主轴对齐弹性项目   Flex容器的当前行。

<强> flex-end

Flex项目在行尾打包。

更新

从评论部分：

这对我有用。对我来说唯一的困惑是它说的那样 justify-content对齐 flex-items 。从什么时候开始（文字）本身被认为是灵活项目？此外，考虑.inner1 div 一个弹性项目，整个div将沿着轴移动太？ - @mareoraft

Flex容器中的内联内容包含在anonymous flex item中，它可以从父级继承属性。但是，匿名项目（如anonymous block and anonymous inline boxes）无法选择，因此不可设置。因此，如果您想将样式应用于文本，请考虑将其包装在<span>，<div>或其他元素中。

作为弹性容器（div）的子级，.inner1类.outer是一个弹性项。所有弹性项属性均适用。 .inner1也兼作（嵌套）flex容器，因此所有flex容器属性也适用。

Answer 2

如何修改上面的HTML和CSS以使inner1文本“Hello”正确对齐？

我知道这是一个简单的例子，但请检查以下内容是否符合您的需求：

.wrapper {
  border: 1px solid #000;
  display: flex;
  padding: 2px;
  width: 100%;
}
.wrapper > div {
  border: 1px solid #000;
  flex: 1;
  padding: 10px;
}
.left {
  text-align: right;
}
.right {
  text-align: left;
}

<div class="wrapper">
  <div class="left">left (right aligned)</div>
  <div class="right">right (left aligned)</div>
</div>

我建议您详细了解A Complete Guide to Flexbox

中的flex属性

Answer 3

另一种方法是设置以下CSS：

将文本对齐属性设置为：text-align: justify并将阅读方向设置为：direction:rtl。其他答案也是非常好的答案。

这些调整基于CSS2。

＆＃13;

.outer {
  display: flex;
}
.inner1 {
    display: flex;
    width: 5em;
    direction:rtl;
    text-align:justify;
}
.inner2 {
    display: flex;
    width: 5em;
}

＆＃13;

<div class="outer">
  <div class="inner1">Hello</div>
  <div class="inner2">World</div>
</div>

＆＃13;

如何使用display：flex在HTML元素中使文本右对齐？

3 个答案: