Как на элементе сетки flex расположить несколько других «подэлементов»?

Question

[SenseyJW]

Я начинающий верстальщик, поэтому появляются такие (возможно очевидные) вопросы, буду признателен за ответ или годный ресурс по разрешению похожей проблемы)
У меня есть задача расположить карточки неких проектов с названиями под ними. Проблема в том, что пока получилось только сделать так, чтобы адекватно текст выглядел только в центре карточки, но не снизу нее. Также, есть проблема того, что если текст слишком длинный, то он переносится на следующую строку как новый элемент сетки. Выглядит это так:

Вот сам код:
HTML

<ul class="flex-container">
              <?php foreach($projects as $key): ?>
              <?php $url = 'project.php?=' . http_build_query(['id' => $key['id'] ]); ?>
              <li class="flex-item" style="<?= $key['image']; ?>"><a href="<?= $url; ?>" style="font-size: 10px; color:white;"><?= $key['name']; ?></a></li>
              <?php endforeach; ?>
</ul>

CSS

.flex-container {
  margin-top: 100px;
  padding: 10px;
  margin-left:50%;
  max-width: 1300px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  padding: 10px;
  font-size: 10px;
  margin: 0 -5px;
  list-style: none;
}

.flex-item {
  padding: 5px;
  width: 250px;
  height: 220px;
  margin-top: 10px;
  padding-top: 12%;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 10px;
  text-align: center;
}

Таким образом, вопрос в том, как сделать так, чтобы текст высвечивался под фото нормально (в несколько рядов с одинаковыми отступами) при любой длине текста, т.е. чтобы сетка подстраивалась под текст, а не наоборот.

Answer 1

[Ankhena]

line-height: 150px;

Это зачем вам?
Поставите нормальное значение, будет хорошо.
И line-height желательно указывать коэффициентом, без указания единиц измерения.
https://css-live.ru/css/metriki-shrifta-line-heigh...
https://learn.javascript.ru/font-size-line-height

чтобы сетка подстраивалась под текст, а не наоборот

Не задавайте высоту.

Comments

[SenseyJW]

Понял, спасибо!

[lamer350]

Кто сказал что желательно указывать коэффициентом?) Кто то высказал свое мнение и это становится правилом?) забавно смотреть как шрифт 14px задают lh 1.3) 18.2px по вашему нормальный lh? С каких пор дополнительные вычисления для браузера лучше? lh куратора смутил, а margin: 0 -5px; нет?) padding: 10px; 2 раза не?

[Ankhena]

lamer350, я кому-то обещала полное ревью кода и забыла об этом?

Начать читать про line-height вы можете по ссылкам выше.

[SenseyJW]

lamer350, учел комментарии про margin и padding, спасибо

[lamer350]

Ankhena, этот бред статься ради статьи без какой либо логики)

[Ankhena]

lamer350,
Если вам нравится указывать line-height для каждого элемента отдельно - это дело ваше и того, кому потом поддерживать код.
Если нравится при изменении шрифта каждый раз помнить и о line-height - аналогично.
https://jsfiddle.net/g1p8yf97/

Попробуйте позаботиться о пользователях, меняющих размер шрифта в браузере, чтобы было удобно читать, задайте шрифт в rem и проверьте что будет при увеличении/уменьшении.