Чтобы использовать Flexbox в HTML и CSS, необходимо превратить родительский элемент в флекс-контейнер, задав ему свойство display: flex. 34

Основные свойства флекс-контейнера: 3

• flex-direction. 3 Определяет направление главной оси (row, column). 3
• flex-wrap. 3 Указывает, должны ли флекс-элементы переноситься на новую строку (nowrap, wrap, wrap-reverse). 3
• justify-content. 3 Выравнивает флекс-элементы вдоль главной оси. 3
• align-items. 3 Выравнивает флекс-элементы вдоль поперечной оси. 3

Основные свойства флекс-элементов: 3

• order. 3 Определяет порядок расположения элемента среди других флекс-элементов. 3
• flex-grow. 3 Указывает, насколько элемент может расти, если есть свободное пространство. 3
• flex-shrink. 3 Определяет, насколько элемент может уменьшаться, если не хватает пространства. 3
• flex-basis. 3 Задает базовый размер элемента перед распределением свободного пространства. 3
• align-self. 3 Позволяет задать выравнивание для отдельного флекс-элемента вдоль поперечной оси. 3

Пример создания простого сайта с использованием CSS Flexbox: 3

• Создайте HTML-структуру. 3 Например, с шапкой, основным контентом и подвалом. 3
• Создайте файл стилей и задайте стили для элементов: 3
  • body { display: flex; flex-direction: column; min-height: 100vh; font-family: sans-serif; margin: 0; }. 3
  • header, footer { background-color: #333; color: white; padding: 1rem; text-align: center; }. 3
  • main { flex-grow: 1; padding: 1rem; }. 3