我如何使文本右对齐在一个HTML元素与显示：flex？ [英] How can I make text right justified in a HTML element with display: flex?

问题描述

我有以下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 
} 
  

c $ c> inner1 类右对齐。我认为 text-align：right 会导致这种情况发生，但它不会。

修改上面的HTML和CSS，使 inner1 文本，Hello，右对齐？为什么有显示：flex 会影响此行为？

解决方案

差不多了。您只需要添加 justify-content 属性。

在CSS中添加一行代码：

  .inner1 {
 display：flex; 
 width：5em; 
 / * text-align：right;去掉;不必要* / 
 justify-content：flex-end; / * NEW * / 
} 
  

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

这里有一点点增强演示让功能更显眼：

演示： http：/ /jsfiddle.net/5qLdnk5p/

---

从 spec ：

justify-content

$ c> justify-content 属性沿弹性容器当前行的主轴
对齐弹性项。

flex-end

---

UPDATE

从评论部分：

为我工作。对我唯一的困惑是，它说
justify-content aligns flex-items 。因为什么时候的内容（文本）
本身考虑了flex项目？此外， .inner1 div认为
是一个flex项目，整个div也会沿着轴
移动？ - @mareoraft

Flex容器中的内联内容会包含在匿名flex项目，它能够从父项继承属性。但是，匿名项目（例如匿名封锁和匿名内嵌框）是不可选的，因此不能修改。因此，如果你想对文本应用样式，考虑将它包装在< span> ，< div> 或其他元素。

div 与类 .inner1 作为flex容器（ .outer ）的子代，是一个flex项。所有flex项属性都适用。 .inner1 也可以作为（嵌套）flex容器，因此所有flex容器属性也适用。

I have the following HTML:

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

With the following CSS:

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

I would like the text inside the inner1 class to be right justified. I thought the text-align: right would cause this to happen, but it does not.

How can I modify the above HTML and CSS to make the inner1 text, "Hello", be right justified? Why does having display: flex affect this behavior?

解决方案

You were almost there. You just needed to add the justify-content property.

Add one line of code to your CSS:

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

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

Here's a slightly enhanced demo to make the feature more noticeable:

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

---

From the spec:

justify-content

The justify-content property aligns flex items along the main axis of the current line of the flex container.

flex-end

Flex items are packed toward the end of the line.

---

UPDATE

From the comment section:

This is working for me. The only confusion for me is that it says that justify-content aligns flex-items. Since when is the content (text) itself considered a flex item? Moreover, is the .inner1 div considered a flex item, and will the entire div be moved around along the axis too? – @mareoraft

The inline content in a flex container gets wrapped in an anonymous flex item, which is able to inherit properties from the parent. However, anonymous items (like anonymous block and anonymous inline boxes) are unselectable and therefore unstyleable. So if you want to apply styles to the text consider wrapping it in a <span>, <div> or other element.

The div with class .inner1, as a child of the flex container (.outer), is a flex item. All flex item properties apply. .inner1 also doubles as a (nested) flex container, so all flex container properties apply, as well.

这篇关于我如何使文本右对齐在一个HTML元素与显示：flex？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！