What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T

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

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;
}

<div class="parent-flex">some text here  <button>Awesome button!</button></div>

<div class="parent-normal">some text here  <button>Awesome button!</button></div>

Text not centered with justify-content: center

The HTML structure of a flex container has three levels:

the container
the item
the content

Each level represents a separate, independent element.

The justify-content property, which is set on flex containers, controls flex items. It has no direct control over the children of the item (the text, in this case).

When you set justify-content: center on a row-direction container the item shrinks to the content width (i.e., shrink-to-fit) and is horizontally centered. The content, being inside the item, goes along for the ride.

Everything is centered nicely, when the content is narrower than the flex container.

On the other hand, when the content is wider than the flex container, the flex item can no longer be centered. In fact, the item cannot be aligned at all (start, end, center) because there is no free space – the item is consuming the full width of the container.

In such cases, the text can wrap. But justify-content: center doesn't apply to the text. It never did. The text was always subject to the default text-align: start (left in LTR / right in RTL).

Therefore, to center the text directly, add text-align: center to the flex item (or the flex container, it doesn't really matter due to inheritance).

article {  display: flex;  align-items: center;  justify-content: center;}
.center {  text-align: center;}
/* demo styles only */article {  width: 100px;  height: 100px;  margin: 10px;    background-color: lightgreen;}

<article>  <p>some long text here</p></article>
<article>  <p class="center">some long text here</p></article>

justify content won't align left

If both of your items inside the container are each 50% width, they won't move horizontally—they're spanning across the entire container; there's no free space (and justify-content works by distributing free space).

Remove the width: 50% rule and work on each item individually (using width, margin and/or flex properties).

Also, the justify-content property doesn't take left and right values. They're invalid. Here are the values that work.

Finally, when you're ready to pin both items to the left, consider flex auto margins.

Flex-box justify-content not working whilst align-items does

After reading @paulie_D's comments I realised it had to do with the fix-flex class which had a style of width: 100%; set and was wrapped around the content I was trying to justify and hence it really couldn't move it.

This was also pointed out by Adrian Eufracio's answer; however removing the div altogether would cause the issue I was trying to prevent; so I had to leave the div in the code but just remove the width: 100%; from the styles and I can now justify the content and the text doesn't wrap.

CodePen: http://codepen.io/gutterboy/pen/jbeOrP

HTML:

<div id="main-slider" class="carousel">
  <div class="container">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-10">
        <div class="carousel-inner" role="listbox">
          <div class="item item1 active">
            <img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>
          <div class="item item2">
            <img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
            <div class="details flex-row">
              <div class="fix-flex">
                <h2>I'm a header title</h2>
                <p class="sub-title">
                  I'm a little sub-title
                </p>
              </div>
            </div>
          </div>          
        </div>
      </div>
    </div>
  </div>
</div>

<ol class="carousel-indicators">
  <li data-target="#main-slider" data-slide-to="0" class="active"></li>
  <li data-target="#main-slider" data-slide-to="1"></li>
</ol>

CSS:

.item {

  position: relative;

  .details {

    position: absolute;
    top: 0;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 25px;
    color: #fff;
    z-index: 2;
    align-items: flex-end;
    justify-content: center;

    h2 {
      margin-top: 0;
    }

  }

  &.item2 {

    .details {
      align-items: flex-start;
      justify-content: flex-start;      
    }

  }

}

.flex-row {
  display: flex;
  flex-flow: row nowrap;
}

Text doesn't get right aligned in display flex

In order to understand how flex works, we should do some testing. Therefore I will build some example.

First its important to know that the default behaviour of a flex container direction is set to row. That means that all child elements inside a flex container will be placed next to each other as long as possible.
Also we don't think in left or right anymore when using flexbox. We no think in main axis and cross axis.

The main axis is the direction, the child elements are layed out. So per default it would be from left to right.

The cross axis would then be from top to bottom.

Next it is important to know, that by default the child elements inside the flex container only take as much space as needed.

/* just for some nice looking */
* {
  font-family: sans-serif;
  box-sizing: border-box;
  }

.flex-container {
  display: flex;
  width: 100%;
  padding: 1rem;
  background: #666;
}

.flex-item {
  padding: 0.5rem;
  font-weight: bold;
  color: white;
}

.r {
  background: red;
}

.g {
  background: darkgreen;
}

.b {
  background: blue;
}

<div class="flex-container">
  <div class="flex-item r">blue</div>
  <div class="flex-item g">red</div>
  <div class="flex-item b">green</div>
</div>

bootstrap justify-content-center doesn't work with row flex

Ideally you should use div tags intended of hr tags. But as per your code just add text-center class in p tag.

 <div class="container my-5">
  <div class="row jusitfy-content-center">
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
    <p class="col-4 text-center">Skills and Abilities</p>
    <hr class="col-4 border-2 mt-2 border-top border-danger" />
  </div>
</div>

This is the final output

And if you want to achieve the above result. Then your approach is not recommend, you can try this:

 <div class="position-relative">
  <hr class="border border-danger" />
  <p class="position-absolute top-50 start-50 translate-middle bg-white fw-bold 
    text-black-50 px-4">
    Skills and Abilities
  </p>
</div>

What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T