Когда вы только начинаете верстать, блоки ведут себя непредсказуемо. Flexbox — это режим раскладки в CSS, который помогает элементам делить пространство и выстраиваться в ряд или колонку.
В статье Josh Comeau разбирают пример формы с именем, email и кнопкой. Без специальных правил для разных ширин экрана она сама перестраивается: на широком поля выстраиваются в строку, на узком переносятся. Секрет в трёх свойствах:
flex-grow решает, кто займёт больше места, flex-basis задаёт стартовую ширину, а flex-wrap разрешает перенос.Прошли базовый HTML и CSS и хотите, чтобы страницы не «ломались» при изменении ширины? Поэкспериментируйте с демками в гайде: поменяйте цифры в примере и посмотрите, как меняется раскладка.