«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.
