title: What do "flex" and "justify-content" achieve that "text-align" doesn't?
body: <p>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 <code>flex</code> works to align content to the right where <code>text-align</code> might not suffice?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    text-align: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;&lt;button&gt;Awesome button!&lt;/button&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.parent {
    display: flex;
    justify-content: flex-end;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="parent"&gt;&lt;button&gt;Awesome button!&lt;/button&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm curious because I noticed that Bootstrap changed from <code>text-align: right</code> to <code>flex</code> between versions 3 and 4 for aligning buttons in a modal's footer section.</p>
  
  <p>To illustrate further:</p>
  
  <p><a href="https://i.stack.imgur.com/UvmOD.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UvmOD.png" alt="Modal in Bootstrap 3"></a>
  <a href="https://i.stack.imgur.com/9KRHg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9KRHg.png" alt="Modal in Bootstrap 4"></a></p>