Justify-content 对齐单行文本，但当文本跨越多行时不对齐

Question

我试图更好地理解 flexbox 对齐方式，因此我尝试仅使用 flexbox 功能来对齐内容。我试图通过使用嵌套的 flexbox 来对齐文本，但我不明白为什么 justify-content 居中具有单行文本的项目（flex-item-1 和 flex-item-5），而不是其他 flex 项目。我错过了什么？

这是我的 CSS 示例！ 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>

（我是新手，如果我需要添加更多信息，请告诉我！）

Answer 1

如果我做错了请告诉我，好吧，原因是每个容器 flex-item-1 ... flex-item-6 都有宽度和高度，运行在这种情况下超出宽度，其余的将移动到 Left 如果你想把它对齐到 center 你只需要使用

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>

如果你想将它们全部显示为 one-line 你可以使用 font-size: x-small;

Justify-content 对齐单行文本，但当文本跨越多行时不对齐

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

html

css

flexbox