What do “flex” and “justify-content” achieve that “text-align” doesn't?

Question

These two ways to move a button to the right of its parent seem completely equivalent to me. Is there a reason to choose one over the other? Are there circumstances in which

Answer 1

Yes there is a big difference. Flexbox is about boxes and block level element whearas text-align is about text and inline level element.

When having one element we won't notice the difference but when it comes to multiple element we can see a clear difference.

Here is a basic example where we have text and button inside a container:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

some text here  Awesome button!

some text here  Awesome button!

Note how in the flex container we no more have white space between the text and the button because the text will become a block element¹ and the button too which is not the case in the second example where both are inline element. Until now, it's ok because we can rectify this with margin.

Let's put more text and see the difference again:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

some text here some text here some text here some text here some text here some text here some text here some text here some text here some text hereAwesome button!

some text here some text here some text here some text here some text here some text here some text here some text here some text here some text hereAwesome button!

Now we have a clear difference and we can see that the flex container consider all the text as a block element and the button will not follow the text like in the second container. In some case it can be an intended result but not in all the cases.

Let's add a link inside our text:

.parent-flex {
  display: flex;
  justify-content: flex-end;
  margin-bottom:10px;
}
.parent-normal {
  text-align:right;
}

some text here some text here some text here some text here some text here some text here some text link here some text here some text here some text hereAwesome button!

some text here some text here some text here some text here some text here some text here some text link here some text here some text here some text hereAwesome button!

The flexbox container is getting worse! because the link is also blockified¹ and now we have 4 block elements. The text before the link, the link, the text after and the button. We can clearly see that this behavior is not intended at all.

---

Basically flexbox is useful when it comes to align element that we can consider as block element or container or boxes, etc but not when it comes to text container. text-align is more useful to align text inside the previous block/box/container element.

In other words, text-align should be used at text level to align text, images, etc and flexbox should be considered at an upper level to align block element and create layouts.

---

In your case, there is no big difference since we can consider button as boxes or inline-element. the only difference will be the whitespace between the button that you will face if you consider them as inline element when using text-align.

¹ Loosely speaking, the flex items of a flex container are boxes representing its in-flow contents.

Each in-flow child of a flex container becomes a flex item, and each contiguous sequence of child text runs is wrapped in an anonymous block container flex item. However, if the entire sequence of child text runs contains only white space (i.e. characters that can be affected by the white-space property) it is instead not rendered

The display value of a flex item is blockified

https://www.w3.org/TR/css-flexbox-1/#flex-items