CSS - проблемы выравнивания при использовании свойства Flex

Question

Я создаю div, используя свойство flex. В каждом ряду три сетки. Первая и третья сетки должны быть выровнены слева и справа соответственно. Но центральная сетка должна выровнять центр. Я пытался, но не работал. Также я прикрепил свой код выше.

.outer {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: space-between;
}

.outer-grid {
  max-width: 150px;
  padding: 20px;
  background: #ff4040;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

Answer 1

Надеюсь, это поможет вам. спасибо

.outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-content: center;
    width: 260px;
    margin: 0 auto;
}

.outer-grid {
    width: 30px;
    padding: 20px;
    background: #ff4040;
    color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

Answer 2

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.outer-grid {
  max-width: 150px;
  padding: 20px;
  background: #ff4040;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

Answer 3

Так как вы не можете редактировать HTML, еще одним решением будет сделать так, чтобы блок занимал относительную ширину контейнера.

---

.outer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.outer-grid {
  display: flex;
  flex: 0 25%;
  padding: 20px;
  margin-top: 20px;
  background: #ff4040;
  justify-content: center;
  color: #fff;
}

<div class="outer">
  <div class="outer-grid"> One </div>
  <div class="outer-grid"> two </div>
  <div class="outer-grid"> three </div>
  <div class="outer-grid"> four </div>
  <div class="outer-grid"> five </div>
  <div class="outer-grid"> six </div>
</div>

---

Если это то, что вы ищете, я напишу объяснение здесь позже.