Как использовать Flexbox в HTML и CSS?

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

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

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

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

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

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

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