Используя flex, чтобы выровнять элементы, которые уже имеют flex?

Question

Я пытаюсь создать контейнер со множеством дочерних фрагментов содержимого. Каждая дочерняя плитка содержит данные, которые я хочу центрировать, поэтому flex находится на дочерней плите, чтобы я мог выровнять содержимое плитки.
Я хочу выровнять 3 по строке равномерно, поэтому я поместил flex в родительский класс и хотел space-evenly, но это, похоже, не работает. Есть идеи, что я делаю не так?

<div class="container">
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>  
  <div class="child">
      <img src="">
      <span>TITLE</span>
  </div>

</div>

CSS

.parent {
    display: flex;
    max-width: 1200px;
}

.child {
    display: inline-flex;
    margin-bottom: 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 396px;
    height:396px;
}

Answer 1

У вас пропало несколько ключевых вещей. Во-первых, в родительском контейнере отсутствовал класс parent, поэтому CSS никогда не достигал своей цели. Открывающий тег сейчас:

<div class="container parent">

Затем я добавил важное свойство flex в правило CSS .parent, позволяющее оборачивать элементы, в противном случае невозможно получить 3-х стороннее использование более 3 элементов:

flex-wrap: wrap;

Добавление space-between к .parent гарантирует, что элементы переходят от края к краю независимо от ширины и расстояния между элементами:

justify-content: space-between;

Затем я добавил ширину к элементам .child, которые являются гибкими и создают макет с тремя размерами. Я использовал calc как быстрый способ получить пространство между элементами вместо того, чтобы они касались горизонтально:

width: calc(33.333% - 20px);

Также добавили маленькие изображения, чтобы увидеть больше эффекта внутреннего сгибания. Надеюсь, это поможет!

.parent {
    display: flex;
    max-width: 1200px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.child {
    display: flex;
    margin-bottom: 26px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: calc(33.333% - 20px);
    background-color: #ccc;
}

<div class="container parent">
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 1</span>
  </div>
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 2</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 3</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 4</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 5</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 6</span>
  </div>  
  <div class="child">
      <img src="https://picsum.photos/40">
      <span>TITLE 7</span>
  </div>

</div>