Исключение дочернего элемента из flex-контейнера

Question

<div class="container">
  <div class="image"><img /></div>
  <div class="image"><img /></div>
  <div class="text"></div>
</div>

У меня такая ситуация.Мне нужно центрировать два изображения в контейнере, но мне нужно отобразить «текст» в новой строке под двумя изображениями.Я сделал это с помощью css

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flexwrap: wrap;
}

.image {
  display: inline-block
}

Текст переходит на новую строку, но до определенного разрешения.Как можно исключить текст из гибкого потока?

Answer 1

Установите ширину текста на 100% и выровняйте текст по центру:

.container {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
}

.text {
  width: 100%;
  text-align: center;
}

<div class="container">
  <div class="image"><img src="https://picsum.photos/120/80?1"></div>
  <div class="image"><img src="https://picsum.photos/120/80?2"></div>
  <div class="text">Text</div>
</div>