Что такое display flex в css

«display: flex» в CSS — это свойство, которое позволяет создавать гибкие и адаптивные макеты, управляя размещением элементов на веб-странице.

Flexbox (Flexible Box) — это CSS-модуль, который используется вместе со свойством «display: flex», который определяет контейнер, который становится гибким контейнером. Flexbox позволяет управлять расположением элементов внутри контейнера, позволяя достичь различных задач, таких как выравнивание элементов и распределение пространства между элементами на основе доступного места.

Внутри контейнера с указанным свойством «display: flex» элементы принимаются как флекс-элементы, и их расположение может быть управляем применением различных свойств flexbox, таких как justify-content, align-items, align-self, order, flex-grow, flex-shrink и других.

Пример использования «display: flex» в CSS на контейнере с элементами <div>:

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

.box {
  background-color: #ccc;
  color: #fff;
  padding: 20px;
  margin: 10px;
}

В этом примере свойство «display: flex» используется на контейнере с классом «container», а свойства justify-content и align-items указывают способы выравнивания элементов в контейнере. Элементы внутри контейнера принимаются как флекс-элементы и располагаются согласно заданным свойствам. Каждый элемент в контейнере, в данном случае с классом «box», является флекс-элементом и может быть управляем в соответствии с правилами flexbox.