Php узнать текущую дату. Php работаем с датой - date DateTime mktime и другие…. Представление даты и времени

Если говорить коротко, то верстка с Flexbox дает нам простые решения некогда непростых задач. Например, когда нужно выровнять элемент по вертикали, или прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд, так чтобы они занимали все свободно пространство. Подобные задачи решаются и без flex. Но как правило, эти решения больше похожи на «костыли» - приемы использовать css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как задумывает flex-модель.

CSS Flexible Box Layout Module (CSS модуль для макетов с гибкими блоками), коротко flexbox, создана, чтобы убрать недостатки при создании самых разных HTML конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой. А логичный подход, как правило работает в неожиданных местах, там где результат не проверялся - логика наше все!

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

Базовые знания

FlexBox состоит из Контейнера и его Дочерних элементов (items) (гибких элементов).

Для включения flexbox, любому HTML элементу достаточно присвоить css свойство display:flex; или display:inline-flex; .

После включения flex свойства, внутри контейнера создаются две оси: главная и поперечная (перпендикулярная (⊥), кросс ось). Все вложенные элементы (первого уровня) выстраиваются по главной оси. По умолчанию главная ось горизонтальная и имеет направление слева направо (>), а кросс ось соответственно вертикальная и направлена сверху вниз (v).

Главную и кросс оси можно поменять местами, тогда элементы будут располагаться сверху вниз (v) и когда перестанут вмещаться в высоту то будут двигаться слева направо (>) - то есть оси просто поменялись местами. При этом начало и конец расположения элементов не меняется - меняются только направления (оси)! Именно поэтому нужно представлять себе оси внутри контейнера. Однако не нужно думать, что есть какие-то там «физические» оси и они на что-то влияют. Ось тут - это только лишь направление движения элементов внутри контейнера. Например, если мы указали выравнивание элементов по центру основной оси и потом изменили направление этой основной оси, то изменится и выравнивание: элементы были в середине по горизонтали, а стали в середине по вертикали... См. пример.

Еще одной важной особенностью Флекс-бокс является наличие рядов в поперечном направлении. Чтобы их представить и понять, давайте представим: есть главная горизонтальная ось, много элементов и они не «лезут» в контейнер, поэтому переходят на другой ряд. Т.е. контейнер выглядит так: контейнер, внутри него два ряда, в каждом ряду по несколько элементов. Представили? А теперь запомните, что выравнивать мы можем не только элементы, но и ряды! Как это работает хорошо видно в примере к свойству . А вот так это выглядит схематически:

CSS свойства, которые могут влиять на модель построения макета: float , clear , vertical-align , columns не работают во flex конструкции - там используется другая модель построения макета и эти css свойства просто игнорируются...

CSS свойства Flexbox

Flexbox содержит разные css правила для управления всей flex конструкцией. Одни нужно применять к основному контейнеру, а другие к элементам этого контейнера.

Для контейнера

display:

Включает flex свойство для элемента. Под это свойство попадает сам элемент и вложенные в него элементы: затрагиваются только потомки первого уровня - они станут элементами flex контейнера.

• flex - элемент растягивается на всю ширину и имеет свое полное пространство среди окружающих блоков. Происходит перенос строк в начале и в конце блока.
• inline-flex - элемент обтекается другими элементами. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент - как встроенный.

flex и inline-flex отличаются тем что по-разному взаимодействуют с окружающими элементами, подобно display:block и display:inline-block .

flex-direction:

Изменяет направление главной оси контейнера. Поперечная ось меняется соответственно.

• row (default) - направление элементов слева направо (>)
• column - направление элементов сверху вниз (v)
• row-reverse - направление элементов справа налево (<)
• column-reverse - направление элементов снизу вверх (^)

flex-wrap:

Управляет переносом непомещающихся в контейнер элементов.

• nowrap (default) - вложенные элементы располагаются в один ряд (при direction=row) или в одну колонку (при direction=column) независимо от того помещаются они в контейнер или нет.
• wrap - включает перенос элементов на следующий ряд, если они не помещаются в контейнер. Так включается движение элементов по поперечной оси.
• wrap-reverse - тоже что wrap только перенос будет не вниз, а вверх (в обратном направлении).

flex-flow: direction wrap

Объединяет оба свойства flex-direction и flex-wrap . Они часто используются вместе, поэтому чтобы писать меньше кода было создано свойство flex-flow .

flex-flow принимает значения двух этих свойств, разделенные пробелом. Или можно указать одно значение любого свойства.

/* только flex-direction */ flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; /* только flex-wrap */ flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; /* сразу оба значения: flex-direction и flex-wrap */ flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; justify-content:

Выравнивает элементы по основной оси: если direction=row, то по горизонтали, а если direction=column, то по вертикали.

• flex-start (default) - элементы будут идти с начала (в конце может остаться место).
• flex-end - элементы выравниваются по концу (место останется в начале)
• center - по центру (место останется слева и права)
• space-between - крайние элементы прижимаются к краям (место между элементами распределяется равномерно)
• space-around - свободное пространство равномерно распределяется между элементами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
• space-evenly

align-content:

Выравнивает ряды, в которых находятся элементы по поперечной оси. То же что justify-content только для противоположной оси.

Т.е. если flex-direction: row , то это свойство будет выравнивать невидимые ряды по вертикали (¦). Тут важно заметить, что высота блока должна быть задана жестко и должна быть больше высоты рядов иначе сами ряды будут растягивать контейнер и любое их выравнивание теряет смысл, потому что между ними нет свободного места... А вот когда flex-direction: column , то ряды движется по горизонтали (>) и ширина контейнера почти всегда больше ширины рядов и выравнивание рядов сразу приобретает смысл...

Это свойство мало где нужно и чаще используется align-items (см.ниже).

• stretch (default) - ряды растягиваются заполняя строку полностью
• flex-start - ряды группируются в верхней части контейнера (в конце может остаться место).
• flex-end - ряды группируются в нижней части контейнера (место останется в начале)
• center - ряды группируются по центру контейнера (место останется по краям)
• space-between - крайние ряды прижимаются к краям (место между рядами распределяется равномерно)
• space-around - свободное пространство равномерно распределяется между рядами (крайние элементы не прижимаются к краям). Пространство между краем контейнера и крайними элементами будет в два раза меньше чем пространство между элементами в середине ряда.
• space-evenly - тоже что space-around , только расстояние у крайних элементов до краев контейнера такое же как и между элементами.

align-items:

Выравнивает элементы по поперечной оси внутри ряда (невидимой строки). Т.е. сами ряды выравниваются через align-content , а элементы внутри этих рядов (строк) через align-items и все это по поперечной оси. По главной оси такого разделения нет, там нет понятия рядов и элементы выравниваются через justify-content .

• stretch (default) - элементы растягиваются заполняя строку полностью
• flex-start - элементы прижимаются к началу ряда
• flex-end - элементы прижимаются к концу ряда
• center - элементы выравниваются по центру ряда
• baseline - элементы выравниваются по базовой линии текста

Для элементов контейнера

flex-grow:

Задает коэффициент увеличения элемента при наличии свободного места в контейнере. По умолчанию flex-grow: 0 т.е. никакой из элементов не должен увеличиваться и заполнять свободное место в контейнере.

По умолчанию flex-grow: 0

• Если всем элементам указать flex-grow: 1 , то все они растянуться одинаково и заполнять все свободное место в контейнере.
• Если одному из элементов указать flex-grow: 1 , то он заполнит все свободное место в контейнере и выравнивания через justify-content работать уже не будут: свободного места нет выравнивать нечего...
• Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
• Если все flex-блоки внутри flex-контейнера имеют flex-grow:3 , то они будут одинакового размера
• Если один из них имеет flex-grow:12 , то он будет в 4 раза больше, чем все остальные

Как это работает? Допустим, что контейнер имеет ширину 500px и содержит два элемента, каждый из которых имеет базовую ширину 100px. Значит в контейнере остается 300 свободных пикселей. Теперь, если первому элементу укажем flex-grow: 2; , а второму flex-grow: 1; , то блоки займут всю доступную ширину контейнера и ширина первого блока будет 300px, а второго 200px. Объясняется это тем, что доступные 300px свободного места в контейнере распределились между элементами в соотношении 2:1, +200px первому и +100px второму.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-grow:0.5

flex-shrink:

Задает коэффициент уменьшения элемента. Свойство противоположное flex-grow и определяет как элемент должен сжиматься, если в контейнере не остается свободного места. Т.е. свойство начинает работать, когда сумма размеров всех элементов больше чем размер контейнера.

По умолчанию flex-shrink:1

Допустим, что контейнер имеет ширину 600px и содержит два элемента, каждый из которых имеет ширину 300px - flex-basis:300px; . Т.е. два элемента полностью заполняют контейнер. Первому элементу укажем flex-shrink: 2; , а второму flex-shrink: 1; . Теперь уменьшим ширину контейнера на 300px, т.е. элементы должны сжаться на 300px чтобы находится внутри контейнера. Сжиматься они будут в соотношении 2:1, т.е. первый блок сожмется на 200px, а второй на 100px и новые размеры элементов станут 100px и 200px.

Заметка: в значении можно указывать дробные числа, например: 0.5 - flex-shrink:0.5

flex-basis:

Устанавливает базовую ширину элемента - ширину до того как будут высчитаны остальные условия влияющие на ширину элемента. Значение можно указать в px , % , em , rem и т.д. Итоговая ширина будет зависеть от базовой ширины и значений flex-grow, flex-shrink и контента внутри блока. В режиме auto элемент получает базовую ширину относительно контента внутри него.

По умолчанию: auto

Иногда может пригодится установить ширину элемента жестко через привычное свойство width . Например, width: 50%; будет означать, что элемент внутри контейнера будет ровно 50%, однако при этом все также будут работать свойства flex-grow и flex-shrink. Такое может быть нужно, когда элемент растягивается контентом внутри него, больше указанного во flex-basis... Пример .

flex-basis будет «жестким», если указать обнулить растяжение и сжатие: flex-basis:200px; flex-grow:0; flex-shrink:0; - коротко можно записать так flex:0 0 200px; .

flex: {grow shrink basis}

Короткая запись трех свойств: flex-grow flex-shrink flex-basis .

По умолчанию: flex: 0 1 auto

Однако можно указать и одно, и два значения:

Flex: none; /* 0 0 auto */ /* число */ flex: 2; /* flex-grow (flex-basis переходит в 0) */ /* не число */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: content */ flex: 1 30px; /* flex-grow и flex-basis */ flex: 2 2; /* flex-grow и flex-shrink (flex-basis переходит в 0) */ flex: 2 2 10%; /* flex-grow и flex-shrink и flex-basis */ align-self:

Позволяет изменить свойство align-items , только для отдельного элемента.

По умолчанию: от align-items контейнера

• stretch - элемент растягиваются заполняя строку полностью
• flex-start - элемент прижимаются к началу строки
• flex-end - элемент прижимаются к концу строки
• center - элемент выравниваются по центру строки

baseline - элемент выравниваются по базовой линии текста

order:

Позволяет менять порядок (позицию, положение) элемента в общем ряду.

По умолчанию: order: 0

По умолчанию элементы имеют order: 0 и ставятся в порядке их появления в HTML коде и направления ряда. Но если изменить значение свойства order, то элементы будут выстраиваться в порядке значений: -1 0 1 2 3 ... . Например если одному из элементов указать order: 1 , то сначала будут идти все нулевые, а потом элемент с 1.

Так можно, например, первый элемент перекинуть в конец, при этом не меняя направление движения остальных элементов или HTML код.

Заметки

Чем отличается flex-basis от width?

Ниже важные различия между flex-basis и width / height:

flex-basis работает только для главной оси. Это значит что при flex-direction:row flex-basis контролирует ширину (width), а при flex-direction:column контролирует высоту (height). .

flex-basis применяется только к flex элементам. А значит если отключить flex у контейнера это свойство не будет иметь эффекта.

Абсолютные элементы контейнера не участвуют во flex конструкции... А значит, flex-basis не влияет на элементы flex контейнера, если они абсолютны position:absolute . Им нужно будет указать width / height.

• При использовании свойства flex 3 значения (flex-grow/flex-shrink/flex-basis) можно скомбинировать и записать коротко, а для width grow или shrink нужно писать отдельно. Например: flex:0 0 50% == width:50%; flex-shrink:0; . Иногда это просто неудобно.

По возможности все же отдавайте предпочтение flex-basis . Используйте width только когда не подходит flex-basis .

Отличие flex-basis от width - баг или фича?

Контент внутри flex элемента распирает его и не может вылезти за его пределы, кроме случаев когда ширина элемента не установлена через width или max-width . flex-basis тут не справится... Смотрите пример:

Примеры Flex верстки

В примерах нигде не используются префиксы для кроссбраузерности. Сделал я так для удобного чтения css. Поэтому примеры нужно смотрите в более-менее последних версиях chrome или firefox.

#1 Простой пример с выравниванием по вертикали и горизонтали

Начнем с самого простого примера - выравнивание по вертикали и горизонтали одновременно и при любой высоте блока, даже резиновой.

Или так, без блока внутри:

#1.2 Разделение (разрыв) между элементами флекс блока

Чтобы расположить элементы контейнера по краям и произвольно выбрать элемент после которого будит идти разрыв, нужно использовать свойство margin со значением auto .

#2 Адаптивное меню на flex

Сделаем меню в самом верху страницы. На широком экране оно должно быть справа. На среднем выравниваться по середине. А на маленьком каждый элемент должен быть на новой строке.

#3 Адаптивные 3 колонки

Этот пример показывает как быстро и удобно сделать 3 колонки, которые при сужении будут превращаться в 2 и затем в 1.

Обратите внимание, что сделать это можно без использования media правил, все на flex.

Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

#4 Адаптивные блоки на flex

Допустим нам нужно вывести 3 блока, один большой и два маленьких. При этом нужно чтобы блоки подстраивались под маленькие экраны. Делаем:

Перейдите в jsfiddle.net и изменяйте ширину секции «результат»

#5 Галерея на flex и transition

Этот пример показывает как быстро можно сделать симпатичный аккордеон с картинками на flex. Обратите внимание на свойство transition для flex.

#6 Флекс во флекс (просто пример)

Задача сделать гибкий блок. Так чтобы начало текста в каждом блоке находилось на одной линии по горизонтали. Т.е. при сужении ширины, блоки растут в высоту. Нужно, чтобы картинка была вверху, кнопка всегда внизу, а текст по середине начинался по одной горизонтальной линии...

Для решения этой задачи, сами блоки растягиваются флексом и им установлена максимально возможная ширина. Каждый внутренний блок также является флекс конструкцией, с повернутой осью flex-direction:column; и элемент в середине (где находится текст) растягивается flex-grow:1; чтобы заполнить всё свободное пространство, так достигается результат - текст начинался с одной линии...

Еще примеры

Поддержка браузерами - 97%

Полной поддержки разумеется нет, однако все современные браузеры поддерживают flexbox конструкции. Для некоторых все еще нужно указывать префиксы. Для реальной картины заглянем в caniuse.com и видим, что без префиксов будут работать 96% используемых сегодня браузеров, с префиксами 97% - и это отличный показатель, для того чтобы во всю пользоваться flexbox.

Чтобы знать какие префиксы актуальны на сегодня (фев. 2017), приведу пример всех flex правил с нужными префиксами :

/* Контейнер */ .flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-flow: column wrap; -ms-flex-flow: column wrap; flex-flow: column wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: space-around; -ms-flex-line-pack: distribute; align-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } /* Элементы */ .flex-item { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-flex-shrink: 2; -ms-flex-negative: 2; flex-shrink: 2; -webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 1; -webkit-flex: 1 2 100px; -ms-flex: 1 2 100px; flex: 1 2 100px; -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; }

Лучше если свойства с префиксами будут идти до оригинального свойства.
В этом списке нет префиксов, которые не нужны на сегодняшний день (по caniuse). Вообще префиксов больше.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
20- (old)	3.1+ (old)	2-21 (old)		10 (tweener)	2.1+ (old)	3.2+ (old)
21+ (new)	6.1+ (new)	22+ (new)	12.1+ (new)	11+ (new)	4.4+ (new)	7.1+ (new)

• (new) - новый синтаксис: display: flex; .
• (tweener) - старый неофициальный синтаксис 2011 года: display: flexbox; .
• (old) - старый синтаксис 2009 года: display: box;

Видео

Ну и не забывайте про видео, там порой тоже интересно и понятно. Вот парочка популярных:

Полезные ссылки по Flex

flexboxfroggy.com - игра обучающая flexbox.

Flexplorer - наглядный конструктор flex кода.

Современный front-end разработчик активно должен уметь применять на практике различные инструменты, позволяющие автоматизировать процесс верстки макетов и программирования клиентской составляющей проекта. Для этого уже существует множество фреймворков, как больших, так и малых, системы сборки, пакетные менеджеры, целая куча пакетов для задач любого уровня, препроцессоры, шаблонизаторы и прочий "сахар", который создан упростить и повысить производительность работы специалиста в данной области.

К сожалению, начинающим фронтам бывает сложно разобраться в изобилии этих инструментов, так как тут нужно постоянно развиваться и знать основы верстки. И многие по этой причине продолжают верстать «по-дедовски», обычный css, с кучей повторяемых селекторов, верстка без понимания принципа различных сеток, дикие головные боли с различного рода центрированием и т.д.

Если раньше, миллион лет назад, верстали на таблицах, а потом перелезли на дивы, то сейчас уже без применения flexbox в сочетании с сетками или же готовым css-фреймворком, чувствую, что даже простая верстка на дивах скоро будет считаться «моветоном». Пока это еще не так, но насколько я наблюдаю (точнее, даже не успеваю наблюдать) за развитием в данной области различных методик и best practices, то скорее всего, такой вариант имеет место быть.

Конечно в этой маленькой заметке, я не смогу рассмотреть все must-have умения хорошего фронта и инструменты для комфортной работы, но некоторые основные принципы, позволяющие оттолкнуться и пойти дальше все же покажу и прокомментирую на примерах.

Верстаем адаптивно

Начнем с адаптивной верстки, так как это очень популярная тема в связи с бурным развитием мобильного трафика. Для того чтобы понимать, как работают различные сетки, а значит и адаптив, посмотрим со стороны на блочные элементы, составляющие разметку страницы и выступающие вместе с этим как контейнеры для других элементов (текст, иконки, картинки и прочее, что может быть размещено по умолчанию или с применением позиционирования). Традиционная верстка на дивах.

Как известно, любой блочный элемент display: block по умолчанию занимает всю доступную ширину экрана, только если мы не определим его ширину явно (либо в px, либо в %) . Но даже если ему будет задана определенная таким образом ширина, то следующий после него блочный элемент будет идти после него с новой строки (этим, кстати и отличается block от inline, который будет следовать друг за другом). Это важный момент, его нужно просто понять, а для того чтобы понять, это дело легко просмотреть в инспекторе любого браузера.

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

Самым первым делом мы должны "уведомить" браузер, что хотим использовать адаптивное представление, в соответствии с которым любой браузер будет открывать страницу в этом режиме, делается это вот таким объявлением между тегами head документа:

Meta name="viewport" content="width=device-width, initial-scale=1"

Иными словами, ширина-устройства в масштабе 1:1. И если у вас верстка сделана не адаптивно, то скорее всего будут проблемы при таком отображении в мобильном представлении (скорее всего весь контент сожмется в "гармошку", если логически представить, что может произойти:). Вот с этих пор можно уже говорить о следующем шаге, который есть в любой grid системе или адаптивном фреймворке.

В любой grid системе есть брейкпоинты, точки перехода. Посмотрим на Bootstrap, когда при изменении ширины экрана (мобильный, планшетный вид, и т.д.), происходит проверка элемента, имеющего текущий колоночный класс (к примеру класс десктопа для колонки, в популярном фреймворке Bootstrap, это col-md-{x}, md - десктоп). Классы в свою очередь задают различную ширину в %, равную (100/12) · x, где x - коэффициент ширины, от 1 до 12.

Колоночные классы описывают поведение обтекания элементов: есть класс (в тоже время класс может быть для различных устройств) - обтекание задано, нет - ширина 100% (типично для представления контента на мобильных устройствах). А реализовано это поведение с помощью медиа-запросов, которые понимают все браузеры. Медиа-запрос - в css это понятие означает правило, при выполнении условия которого, подключаются соответствующие стили, например, ширина стала меньше 600px - подключаем новый блок стилей, переопределяющий старый. Например, колоночный класс col-md-{x} подключается по умолчанию от 992px и выше, и отключается до 992px. Но все брейкпоинты бутстраповские по умолчанию можно переопределить своими при компиляции сетки.

Вот и вся простая механика с дивами, которым нужно задать ширину в %, float:left; и очистить обтекание после колонок (в бутстрап колонки оборачиваются во враппер c классом row в этом случае), которые мы выстраиваем в ряд. Все это с легкостью можно реализовать самому и без всякой сетки, когда есть понятие, как это работает, просто в любой сетке прописаны классы и много кода уже написано, вашей задачей остается прописывать классы элементам, вот и все.

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

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

В дивах у нас пускай будет просто текст пока что, потренируемся выравнивать текст (по горизонтали/вертикали). Еще хорошая практика футер исключать из общего враппера, задавать html и body, height:100%, врапперу: min-height:100%, чтобы футер всегда был прижат к низу страницы.

Я привык использовать scss, приведу листинг кода на нем:

$grey: #808080; $h: 50px; html, body { margin: 0; height: 100%; } body { font-family: monospace, sans-serif; text-transform: uppercase; } .row { display: flex; } .vertical-center { align-items: center; justify-content: center; } .wrap { min-height: 100%; header, .content, .sidebar { border: 1px solid $grey; } header { height: $h; } .content { height: 100px; padding: 15px 15px 0 15px; border-top-width: 0; margin-right: 1%; width: 75%; } .sidebar { height: 120px; padding: 15px 15px 0 15px; border-top-width: 0; width: 25%; } } footer { height: $h; border: 1px solid $grey; }

display: flex; - вкл. flex-контекст; свойство flex-direction: row; - по умолчанию, если не укажем column явно. Это то что нам позволяет делать многие потрясающие вещи. Нe совсем уверен, но вроде пока что это свойство не везде поддерживается caniuse, но пора бы уже выкинуть все эти старые браузеры и установить современные, не так ли? :)

Еще задаем соотношение для ширины контент - сайдбар, 75% : 25%. Тот же самый эффект получился бы, если бы использовали бутстрап. Только с класами col-md-9 для контента ((100/12 · 9)% - ширина в процентах, 75) и col-md-3 для сайдбара ((100/12 · 3)% - ширина в процентах, 25)

Итак, давайте разберемся, что происходит и как работает флексбокс. Самое первое, это нужно задать display:flex тому контейнеру, в котором нам нужно производить центрирование, к примеру. В разметке у меня это шапка, подвал и контейнер, внутри которого контент и сайдбар. Самое простейшее, что эффетивно делает флексбокс здесь, так это просто берет и выравнивает текст, который в шапке и подвале, при помощи класса.vertical-center:

.vertical-center { align-items: center; // выравниваем по центру, по вертикали justify-content: center; // выравниваем по центру, по горизонтали }

В результате, текст выравнен в двух направлениях, в шапке и подвале. Осталась средняя часть, здесь, если бы мы не задали display:flex, то по умолчанию остался бы display:block, что в итоге с блоками контента и сайдбара, получилось вот так:

Т.е. расположение друг под другом. И не имеет значения, что им задана ширина, пришлось бы делать обтекание. Но даже не в этом удобство флексбокса. Не в том чтобы сократить код на одну инструкцию, а в том, что при помощи еще нескольких замечательных свойств, которые мы можем установить флексбоксу, можно центрировать блоки разной ширины в двух направлениях, также как и текст (по центру, по вертикали/горизонтали, в начале, в конце)!

Но перед тем, как перейти к этому главному вопросу, для которого и создавалась эта заметка, давайте немного улучшим наш простой макет в плане адаптивности. Сейчас при ресайзе, контент и сайдбар не складываются друг под друга. Необходимо исправить это, так как, представьте себе, что весь текст при малых разрешениях будет некрасиво «спрессован» в области контента и сайдбара. Я не говорю уже про картинки. Кстати, изображениям, которые будут адаптивными обязательно надо задавать:

img{ display:block; max-width:100%; height:auto; }

Воспользуемся медиа-запросами. Улучшаем наш css, я его переписывать весь не буду, просто оставлю // ... * там где код тот же остался:

// .. $mobileBreak: 479px; html, body { // ... } body { // ... } .row { // ... } .middle { @media (max-width: $mobileBreak) { display: block; } } .vertical-center { // ... } .wrap { // ... header, .content, .sidebar { // ... } header { // ... } .content { // ... @media (max-width: $mobileBreak) { width: auto; margin-right: 0; } } .sidebar { // ... @media (max-width: $mobileBreak) { width: auto; } } } footer { // ... }

Теперь сайдбар сложится под контент на телефонах (<480px):

Работа с выравниваниями

В качестве теста, создадим в блоке контента, несколько шариков с заливкой разными цветами, так чтобы они были выравнены по горизонтали и по вертикали в области контента, для этого добавляем html:

// ... $mobileBreak: 479px; @mixin wh($w, $h) { width: $w; height: $h; } // ... .content { // ... padding-top: 0; .content-inner { height: 100%; justify-content: space-between; align-items: center; .bounce { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .red { background: #D9534F; } .green { background: #6AB181; } .blue { background: #2D8CD3; } .wh50 { @include wh(50px, 50px); } .wh60 { @include wh(60px, 60px); } .wh35 { @include wh(35px, 35px); } } @media (max-width: $mobileBreak) { // ... } } // ...

Опять таки, там где знаки, // ... , код остается тот же самый.

Результат:

Как видим, шарики выровнены идеально. При добавлении новых шариков, выравнивание будет происходит также без всяких проблем. Свойство align-items: center; отвечает за выравнивание по вертикали, а justify-content: space-between; равномерно выравнивает по горизонтали.

align-items: flex-start; делает вот так:

По аналогии, после применения align-items: flex-end; шарики оказываются внизу контейнера, а align-items: baseline; делает вот так:

Есть еще свойство align-items: stretch;, оно вроде как вытягивает каждый элемент в высоту, но у меня по быстрому не получилось реализовать, поэтому скрин не покажу.

Это все относится к расположению по горизонтальной оси (по умолчанию). Но если мы сделаем явно column:

.content-inner { flex-direction: column; }

То шарики станут по вертикали! И опять таки, применяя различные свойства align-items, мы будем добиваться всего того, что и при горизонтальном построении шариков, но только уже по вертикали! Еще есть свойство align-self, оно переопределяет свойство align-items для одного какого нибудь шарика, или группы. Вот таким вот способом можно гибко управлять всеми выравниваниями.

В данной краткой заметке мы рассмотрели основы адаптивной верстки, точнее ту механику, что позволяет элементам на странице подстраиваться под различные разрешения, а также посмотрели основы флексбокс верстки. Надеюсь статья будет полезна в первую очередь тем, кто не захочет, к примеру брать весь громадный бутстрап ради одной только сетки, а возьмет и создаст свою, по материалам данного урока.

Ну и в заключение, все таки, флексбокс - это круто, но использовать его еще надо осторожно, если вам нужна поддержка старых версии браузеров.