How can I make the text properly validated in an HTML element with display: flex?

Question

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 class to inner1be right. I thought that text-align: rightwould lead to this happening, but it is not.

How can I modify the above HTML and CSS so that the text inner1“Hello” is correctly justified? Why display: flexdoes use affect this behavior?

Answer 1

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

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/

, :

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

---

spec:

justify-content

justify-content .

flex-end

Flex .

---

:

. , , justify-content . () ? , .inner1 div , div ? - @mareoraft

flex , . (, ) , , . , , <span>, <div> .

div .inner1, flex (.outer), . . .inner1 () flex, .

Answer 2

HTML CSS, "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>

Hide result

flex A Complete Guide to Flexbox

Answer 3

Another method would be to set the following CSS:

Set the text alignment property: text-align: justifyand set the direction of reading: direction:rtl. Other answers are also very good answers.

These are CSS2 settings .

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

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

Run codeHide result