CSS блоки - делаем сайты

Двигаем и стилизуем блоки сайта. Время изучать IT

В деле оформления веб-страниц много квестов. Адаптивность, кроссбраузерность, анимации, трансформации и т.д. И даже базовые вещи по расположению блоков с содержимым относительно друг друга могут выполняться совершенно по-разному.

Данная задача и была основной темой минувшего занятия по IT. Предварительно мы посмотрели как работать с оформлением “задника” (то бишь фона) блоков, добавляли к ним изображения и позиционировали их. Смотрели различные варианты работы с цветом и прозрачностью. Наконец, мы подвигали наше содержимое, чтобы оно выглядело так, как на изображении резюме, заявленном на самом первом занятии по верстке.

И рассмотрели мы сразу два способа. Первый, по-старинке, оказался не слишком удобным, зато в меньшее количество строчек кода. Второй – более современный, но и со своим набором нюансов, которые требуют отдельного повествования.

Метод обтекаемости, он же float, позволяет расположить в одну строку несколько блоков (со значениями left или right), если их суммарная ширина не превышает размеров экрана. Width для блоков может задаваться в разных величинах, в зависимости от целей, может и комбинироваться – например, пиксели и проценты. По умолчанию же, если значение float не задано, какой бы ни была ширина блочного элемента, он будет начинаться с новой строки.

Можно, правда, через свойство display сделать его строчно-блочным (значение inline-block) и тогда уже и float окажется ненужным. Но так обычно не поступают, так как подобный подход ведет к непредсказуемым отступам между элементами. Да и адаптивностью, как и в случае с float также не пахнет и требует дополнительной работы.

Современный подход к расположению блоков на странице предлагает нам более гибкий подход. Да и название у него соответствующее – FlexBox. Для работы с ним родительский элемент, внутри которого будут располагаться в ряд дочерние блоки, должен получить свойство display: flex. Одно это расположит все дочерние элементы в строку, сколько бы их ни было, какой бы размер мы им не задали.

Разумеется, с большим количеством блоков в таком случае получится не слишком здорово. Но эта тема многострочного использования “флексов”. Мы же начали с простого и располагали в ряд по два элемента.

Расположение это у дочерних элементов может быть разным. Их можно разместить по центру, по краям, с различными отступами – и всё это без использования настроек margin (т.е. внешних отступов) для самих блоков. Стилизация дается на уровне родительского элемента, который мы сделали “гибким”.

Свойство justify-content позволяет определять положение “детей” по основной оси (по умолчанию это горизонталь, но через свойство flex-direction ее можно переопределить на вертикаль – значение column). Самым популярными здесь являются значения space-around и space-between, которые сами регулируют отступы между дочерними блоками и до краев родительского элемента. А это значит, что можно смело менять размеры экрана – результат останется приемлемым.

Чтобы было проще разобраться, в Сети можно в игровой форме отработать различные варианты использования “флексов”. Задача – определить лягушек на листья. Метод – написание стилей CSS, используя FlexBox. Сайт flexboxfroggy.com.

flexbox froggy

Мы же на занятии IT+English+Yoga доработали резюме. И, по-хорошему, осталось только сделать его адаптивным, чтобы блоки и на мобильном выглядели привлекательно. Так как мы использовали FlexBox, то сделать это будет нетрудно. Но “адаптив” – это тема отдельного занятия.

Пока же запись нашей предыдущей субботы. И да, в ближайшие выходные, 29 июня, занятия по IT в привычном формате не будет. Нас ждет выездной семинар по йоге в Павловом Посаде. И там мы также немного затронем тему IT, но уже несколько в ином ключе.

video
play-sharp-fill