Плохо ли делать изгибаемый элемент в качестве гибкого контейнера?

Question

У меня есть HTML-макет, как это:

<div class="container">
  <div class="content">
    // content goes here
  </div>
</div>

У меня есть 100vh для контейнера. И мне нужно вертикально центрировать контент. Я обнаружил, что могу центрировать все по вертикали внутри содержимого div, если применил следующий CSS-код к контейнеру и контенту, но мне интересно, если это плохая практика, и стоит ли вместо этого делать что-то еще?

display: flex;
justify-content: center;
align-items: center;

Спасибо!

Answer 1

Это зависит от того, чего вам нужно достичь. Ниже приведены несколько результатов с использованием разных цветов, чтобы сделать его более заметным.

Использование flexbox для обоих предметов.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 250px;
}

.content {
  background-color: red;
  height: 200px;
  width: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

Только используя его для контейнера

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: blue;
  height: 250px;
}

.content {
  background-color: red;
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

И, наконец, использовать его только для содержания

.container {
  background-color: blue;
  height: 250px;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: red;
  height: 200px;
  width: 200px;
}

<div class="container">
  <div class="content">
    <p>Content</p>
  </div>
</div>

Answer 2

Нет ничего неправильного или недействительного во вложенных гибких контейнерах. Спецификация flexbox не запрещает и даже не предостерегает от практики.

На самом деле это то, что вы должны делать, когда вам необходимо применить свойства flex к потомкам контейнера верхнего уровня, поскольку макет flex работает только между родительскими и дочерними элементами.

Подробнее здесь: Правильное использование гибких свойств при вложении гибких контейнеров

Answer 3

Вам просто нужно использовать его в вашем контейнере:

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

Пример скрипки: http://jsfiddle.net/eq9y42nj/34/

Это то, что вы ищете?