Флоу твоей вёрстки
Я же веду курс по фронтэнду, а первый этап у нас про вёрстку. И есть проблемы: сложно понять как строить страницу.
Короче, самый понятный людям (всем, не на курсе) способ это поставить элементу высоту и ширину. Но это неправильно: Страница будет разваливаться когда данные изменятся. Чё делать?
Первое, что нужно запомнить, что страница строится по потоку. Есть элемент А (блочный, например, див), есть элемент Б (тоже блочный), оба займут место друг за другом и займут 100% доступной ширины.
Но что такое доступная ширина? Ширина страницы? Нет, это ширина родительского элемента. Возьмите элемент X, дайте ему 500px ширины, вложите два блочных элемента Y и Z, сколько будет ширина каждого блока? Правильно, 500px.
Что будет если 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.
