Justify-content aligns single line text but not when the text spans multiple lines

Question

I'm trying to understand flexbox alignment better, so I tried to align content with only flexbox features. I tried to align the text by using nested flexbox, but I don't understand why justify-content centers items that have single line of text (flex-item-1 and flex-item-5), but not the other flex items. What am I missing?

Here's my CSS example! https://codepen.io/altroboy/pen/NWXNBxZ

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 50vh;
  background: hsl(120, 0%, 80%);
  justify-content: center;
}

.flex-item {
  flex: 0 1 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-item-1 {
  background: hsl(0, 80%, 50%);
}

.flex-item-2 {
  background: hsl(60, 80%, 50%);
}

.flex-item-3 {
  background: hsl(120, 80%, 50%);
}

.flex-item-4 {
  background: hsl(180, 80%, 50%);
}

.flex-item-5 {
  background: hsl(240, 80%, 50%);
}

.flex-item-6 {
  background: hsl(300, 80%, 50%);
}

<div class="flex-container">
  <div class="flex-item flex-item-1">11111 11111 11111 11111</div>
  <div class="flex-item flex-item-2">22222 22222 33333 22222 22222 22222 22222</div>
  <div class="flex-item flex-item-3">33333 33333 33333 33333 33333 33333 33333 33333 33333 33333</div>
  <div class="flex-item flex-item-4">44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 </div>
  <div class="flex-item flex-item-5">55555 55555 55555 55555 </div>
  <div class="flex-item flex-item-6">66666 66666 66666 66666 66666 66666 66666 66666 66666 66666 </div>
</div>

(I'm new to this, let me know if I should add any more info!)

Answer 1

Let me know if I am doing it wrong, well, the reason for that is each of your container flex-item-1 ... flex-item-6 has a width and height and run out of width in this case, the remaining will move to Left here if you want to align that to center you just need to use

text-align: center !important;

.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  height: 50vh;
  background: hsl(120, 0%, 80%);
  justify-content: center;
}

.flex-item {
  flex: 0 1 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-item-1 {
  background: hsl(0, 80%, 50%);
}

.flex-item-2 {
  background: hsl(60, 80%, 50%);
  text-align: center !important;
}

.flex-item-3 {
  background: hsl(120, 80%, 50%);
  text-align: right !important;
}

.flex-item-4 {
  background: hsl(180, 80%, 50%);
}

.flex-item-5 {
  background: hsl(240, 80%, 50%);
}

.flex-item-6 {
  background: hsl(300, 80%, 50%);
  text-align: center !important;
}

<div class="flex-container">
  <div class="flex-item flex-item-1">11111 11111 11111 11111</div>
  <div class="flex-item flex-item-2">22222 22222 33333 22222 22222 22222 22222</div>
  <div class="flex-item flex-item-3">33333 33333 33333 33333 33333 33333 33333 33333 33333 33333</div>
  <div class="flex-item flex-item-4"><span style="text-align: justify">44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 44444 </span></div>
  <div class="flex-item flex-item-5">55555 55555 55555 55555 </div>
  <div class="flex-item flex-item-6">66666 66666 66666 66666 66666 66666 66666 66666 66666 66666 </div>
</div>

if you want to display them all as one-line you can apply it with font-size: x-small;