Флоу твоей вёрстки

Ламар знает толк в флоу

Я же веду курс по фронтэнду, а первый этап у нас про вёрстку. И есть проблемы: сложно понять как строить страницу.

Короче, самый понятный людям (всем, не на курсе) способ это поставить элементу высоту и ширину. Но это неправильно: Страница будет разваливаться когда данные изменятся. Чё делать?

Первое, что нужно запомнить, что страница строится по потоку. Есть элемент А (блочный, например, див), есть элемент Б (тоже блочный), оба займут место друг за другом и займут 100% доступной ширины.

Но что такое доступная ширина? Ширина страницы? Нет, это ширина родительского элемента. Возьмите элемент X, дайте ему 500px ширины, вложите два блочных элемента Y и Z, сколько будет ширина каждого блока? Правильно, 500px.

Вкладка Result, очевидно

Что будет если Y и Z поставить ширину? Они выровняются друг к другу? Нет. Почему? Потому что они блочные!

Чё делать? Сделать их инлайн-блоком.

«Бля, сложно!». Да. Поэтому есть флекбоксы.

Флекбоксы

Флекбоксы это ваше спасение: поток страницы становится предсказуемым, с ним можно работать.

Во-первых, добавьте в закладки A Complete Guide to Flexbox, лучше уже никто не напишет. Во-вторых, поиграйте в Flexbox Froggy.

Если вкратце, есть родительский элемент (контейнер), есть его дети, которые могут выстроиться либо вертикально, либо горизонтально. За это отвечает свойство flex-direction: либо row, либо column. Или даже row-reverse / column-reverse.

Если вы хотите насрать на потолок и почему-то нарушить порядок элементов, то есть свойство order. Чем выше у элемента ордер, тем позже он встанет. ЦСС стал таким мощным!

Есть flex-wrap, с помощью него можно решить что делать с элементами, которые не вмещаются в контейнер: либо они попытаются вместиться (nowrap), либо будут переноситься (wrap). Очевидно, есть wrap-reverse тоже 🙄

Свойство justify-content решает что делать с пространством между элементами. Много значений, посмотрите демку на cssreference.io.

Конечно же, существует замена width: это flex-basis.

Мощное свойство align-items (для контейнера) наконец решило проблему с выравниваем блоков: зацените демку на том же cssreference.

Итог

Заметка, к счастью, получилась короткая, вводная, поэтому вывода всего два.

  • элементы в вёрстке идут друг за другом: блочные вертикально, инлайн-блочные горизонтально если есть возможность, строчные тоже,
  • флекбоксы решают большинство задач.

Всё!

PS: Вова Старков напомнил, что есть гриды, но я их ещё не использовал: они релизнулись в марте этого года. Разберусь и отдельным постом расскажу, если будет полезно.


Я пишу про разработку, веду канал в Телеграме: t.me/rodionovrodionovrodionov.