Содержание
- Какие проблемы решает Flexbox?
- Нырнуть в!
- Горизонтальное и вертикальное центрирование
- Авто поля
- Работа с доступным пространством
- Порядок отображения и исходный порядок
- Простой пользовательский интерфейс приложения
- Резервные варианты и совместимость
- Иди и сгибайся!
Нам всем приходилось находить различные обходные пути для верстки. Мы использовали таблицы, предназначенные для табличных / реляционных данных. Мы использовали плавающие элементы, которые традиционно использовались, чтобы текст мог обтекать плавающие фигуры. Мы использовали позиционирование, которое, возможно, является макетом, но не обеспечивает мощности и гибкости, необходимых для быстрого и легкого создания сложных макетов. Теперь у нас есть Flexbox.
- Загрузите файлы поддержки для этого руководства
Flexbox, прозвище для CSS Flexible Box Layout Module, предоставляет нам способ быстро и легко размещать пользовательские интерфейсы и различные элементы в них. Спецификация Grid Layout - лучшее решение для макета страницы, но все еще находится в стадии разработки.
Flexbox, напротив, быстро поддерживается в новых браузерах. Чтобы узнать, какие именно браузеры это и какой синтаксис поддерживается (это руководство сосредоточено исключительно на новом синтаксисе) и с какими префиксами, я отсылаю вас к Могу я использовать…, который предоставляет более подробный обзор совместимости, чем я могу здесь.
Какие проблемы решает Flexbox?
Flexbox позволяет нам определять, как мы используем доступное пространство внутри элемента, относящегося к дочерним элементам этого элемента. Например, если у вас есть модуль гибкого макета блока, он же Flexbox, это новая спецификация CSS для блока, обещающая произвести революцию в макетах пользовательского интерфейса. Стивен Хэй показывает, как создать макет для контейнера вымышленного приложения шириной 600 пикселей, который, в свою очередь, имеет трех дочерних элементов, каждый шириной 100 пикселей, тогда у вас есть 300 пикселей дополнительного пространства, доступного вам.
Flexbox дает вам инструменты для работы с этим пространством. Вы хотите разделить его поровну между детьми, сделав их всех шире, чтобы заполнить это пространство? Вы бы предпочли, чтобы один ребенок получил все доступное место? Или вы бы предпочли равномерно разместить это пространство между элементами?
Эти проблемы легко решить с помощью Flexbox как по горизонтали, так и по вертикали. Да, это означает, что наконец-то стало возможным идеально центрировать элемент как по горизонтальной, так и по вертикальной осям. Flexbox также предлагает больше возможностей, таких как изменение порядка презентации по сравнению с исходным порядком.
Из-за природы проблем макета, которые решает Flexbox, легко увидеть, как он может подойти для создания макетов пользовательского интерфейса. Панели инструментов, вкладки, формы и подобные компоненты легко размещаются с его помощью.
Чтобы понять, что вы можете делать с Flexbox, чтобы вы могли опробовать его в своих собственных проектах, мы собираемся создать макет для вымышленного приложения для обмена текстовыми сообщениями, аналогичный пользовательскому интерфейсу, который вы можете найти на типичном Android. Телефон. Хотя это не служит практической цели (у вас не будет работающего приложения), это демонстрирует, как быстро, когда у вас есть все основные стили, вы можете создать такой макет.
Нырнуть в!
Выберите браузер, поддерживающий новейшие спецификации Flexbox. Какой бы браузер вы ни выбрали, вам нужно будет использовать соответствующие префиксы поставщика. Примеры здесь представлены без них (загружаемый код для этого руководства использует префиксы WebKit).
Давайте сначала попробуем что-нибудь простое. Введите следующий скелет документа в текстовом редакторе и откройте его в браузере:
! DOCTYPE html> html> head> meta charset = "utf-8"> title> Flexbox tutorial / title> meta name = "viewport" content = "width = device-width, initial-scale = 1"> style> section { граница: 1 пиксель сплошного серого цвета; заполнение: 1em; } div {ширина: 50 пикселей; высота: 50 пикселей; граница: сплошной стальной синий 1px; } / style> / head> body> section> div> / div> div> / div> div> / div> div> / div> div> / div> / section> / body> / html>.
У нас есть пять блоков, каждый квадрат размером 50 пикселей. Они являются элементами блочного уровня и отображаются как таковые. в стиль элемент в документе глава, добавьте дополнительную декларацию в раздел правило:
дисплей: гибкий;
Не забудьте добавить префикс поставщика к сгибать свойство, если это необходимо вашему браузеру. В моем случае я использую дисплей: -webkit-flex;.
Мы превратили раздел в "гибкий контейнер". Элементы в гибком контейнере гибкие элементы и придерживайтесь правил Flexbox, если только они не вырваны из этого мира, например, из-за абсолютного позиционирования.
Обратите внимание, что происходит, когда вы просматриваете страницу в браузере.Элементы выглядят так, как если бы они были плавающими, без неприятностей свернутого родительского контейнера. По умолчанию Flexbox отображает гибкое направление свойство установлено на строка, что означает горизонтальный. flex-direction: столбец будет отображать элементы вертикально, как если бы они отображались как дисплей: блок. По умолчанию для гибкое направление уже строка, нам не нужно указывать его здесь.
Теперь, когда у нас есть этот простой пример, вы можете немного поэкспериментировать.
Горизонтальное и вертикальное центрирование
Установить высота из раздел до 400 пикселей, чтобы вы могли лучше видеть, что происходит. Еще лучше, давайте отцентрируем элементы, добавив следующее к раздел стиль:
высота: 400 пикселей; justify-content: center; align-items: center;
Когда гибкое направление является строка, тогда горизонтальная ось называется «главной осью». Вертикальная ось называется «поперечной осью». Это меняется на противоположное, когда гибкое направление является столбец. обосновать содержание обрабатывает выравнивание (выравнивание) по главной оси, в то время как выровнять элементы обрабатывает выравнивание по поперечной оси. Центрируя оба, мы, наконец, получаем истинное центрирование.
Авто поля
Давайте посмотрим, как работают автоматические поля. Добавьте следующее правило:
div: последний ребенок {маржа слева: авто; }
Работа с доступным пространством
Обновить. Когда вы видите это, вы можете представить, как можно легко решить различные макеты, связанные с меню и вкладками, без необходимости в дополнительной разметке. А как насчет гибкости? Удалить div: последний ребенок правило и добавьте следующее к div правило:
гибкость: 1;
Это займет оставшееся пространство в гибком контейнере и даст по одной равной части каждому div. Но что, если мы хотим, чтобы самый центральный div получал две части доступного пространства, а остальные - по одной части?
div: nth-child (3) {flex: 2; }
Вы также можете изменить приведенное выше правило, чтобы дать гибкость: 1 к этому div и полностью удалить сгибать от других. Это позволяет всем divs быть 50 пикселей, за исключением самого центрального, который затем займет все доступное пространство.
Вы можете разместить доступное пространство между элементами вместо того, чтобы добавлять его к их ширине. Удалять сгибать из div и измените значение для обосновать содержание на раздел элемент:
justify-content: пробел между;
Порядок отображения и исходный порядок
Как насчет того, чтобы возиться с порядком отображения и в исходном порядке? Добавьте буквы A, B, C, D и E к каждому из div соответственно, чтобы вы могли следить за тем, что происходит с порядком отображения.
Все элементы имеют порядок по умолчанию 0, что означает, что они следуют исходному порядку. Регулировка этого значения изменяет порядок отображения гибкого элемента относительно исходного порядка. Попробуй это:
div: nth-child (4) {порядок: -1; }
Опять же, не забывайте при необходимости использовать префикс. Видите, как div, содержащий букву D, которая должна быть четвертой, теперь отображается первым элементом? Как насчет этого:
div: nth-child (2), div: nth-child (4) {-webkit-order: 1; }
Поскольку исходный порядок по умолчанию равен 0, заказ: 1 помещает B и D в конец. После размещения они продолжают следовать своему собственному порядку источников (B перед D).
Если вы новичок в Flexbox, это много новой информации. Подумать только, это лишь некоторые из возможностей! Я настоятельно рекомендую прочитать спецификацию, чтобы узнать больше.
Простой пользовательский интерфейс приложения
Теперь давайте посмотрим, как Flexbox может потенциально помочь нам в реальной ситуации с разметкой пользовательского интерфейса. Просто ради удовольствия мы создадим небольшой интерфейс приложения для обмена сообщениями. Глядя на конечный результат, вы можете быстро разработать тактику, которую обычно применяете для выполнения этого макета.
В следующем упражнении вы увидите, что, сфокусировавшись вначале на структурированном контенте и базовом стиле пользовательского интерфейса, вы можете потом «приклеить» некоторый Flexbox и покончить с этим. Хотя эти типы пользовательских интерфейсов всегда включают в себя разумное количество CSS, вы увидите, что с Flexbox только небольшая его часть используется для макета.
Во-первых, снова начните со скелета. На этот раз я заполнил его базовой структурой и содержанием экрана конкретного приложения:
! DOCTYPE html> html> head> meta charset = "utf-8"> title> Flexbox tutorial / title> meta name = "viewport" content = "width = device-width, initial-scale = 1"> link rel = " таблица стилей "href =" normalize.css "> ссылка rel =" stylesheet "href =" style.css "> / head> body> header> div> h1> Thomas Table / h1> p> +31 6 555 55 555 / p > / div> ul> li> a href = "#"> span> Call / span> / a> / li> li> a href = "#"> span> Удалить сообщения / span> / a> / li> / ul> / header> section> section> h1> 19 июля 2013 г. / h1> div> div> / div> p> 09: 57 / p> blockquote> Итак, этот материал Flexbox выглядит довольно здорово, не так ли? / blockquote> / div > div> div> / div> p> 10: 03 / p> blockquote> Да, да что угодно. Я просто хочу, чтобы вернулась верстка таблицы. / Blockquote> / div> div> div> / div> p> 10: 09 / p> blockquote> Я отменяю свадьбу. / Blockquote> / div> / section> / section> form> input type = "text" placeholder = "Enter message"> button> span> / span> span> Присоединить файл / span> / button> / form> / body> / html>
Обратите внимание, что я ссылаюсь на normalize.css, который действительно является проектом Николаса Галлахера и использует некоторые разумные правила для создания более предсказуемого игрового поля в браузерах. Не волнуйтесь, если вы выберете другие элементы; они просто служат средством для примера кода Flexbox.
Однако сделайте паузу и посмотрите на эту страницу в браузере. Это то, что увидел бы пользователь, если бы мы могли предоставить этому экрану приложения только простой HTML. Это некрасиво, но если бы бэкэнд был на месте, его можно было бы прекрасно использовать.
Кроме того, мы будем использовать иконочный шрифт, содержащий небольшое количество глифов, который я сделал с помощью IcoMoon. Я бы посоветовал вам набирать различные фрагменты кода в себе, но все файлы, которые я использовал, доступны для загрузки.
Я не буду рассказывать вам обо всех стилях, не связанных с макетом самого пользовательского интерфейса; Я предоставил вам файл в загружаемом руководстве: style-01.css. Просто добавьте ...
ссылка rel = "stylesheet" href = "styles / style-01.css">
… В начало документа, а затем проверьте его в своем браузере. Вы можете видеть, что стили выглядят правильно, но мы ничего не сделали с макетом.
Почти все, кроме двух значков на панели инструментов, которые теперь отображаются как встроенный блок, просто использует значение по умолчанию браузера. В большинстве случаев это просто элементы блочного уровня.
Добавив относительно небольшое количество CSS, мы можем завершить макет, как задумано. Я расскажу вам о каждом новом правиле, которое затем можно добавить в конец style-01.css. Чтобы действительно видеть, что происходит, вы можете сохранять и обновлять страницу на каждом этапе.
тело, заголовок,. сообщение, .toolbar, форма {display: flex; }
Это превращает каждый из этих пяти элементов в гибкие контейнеры, что в большинстве случаев уже запускает для нас процесс решения проблем макета.
Однако теперь макет повсюду в результате гибкое направление невыполнение обязательств строка. Нам нужен такой результат для некоторых наших элементов, но не для экрана в целом, который должен отображаться вертикально. Давайте разберемся с этой проблемой:
тело {направление гибкости: столбец; }
Итак, мы идем! Это похоже на то, чего мы хотим достичь. Мы хотели бы, чтобы поле ввода текста располагалось внизу, чтобы занимать все дополнительное доступное пространство по горизонтали:
input {flex: 1; }
Затем мы используем великолепное автоматическое поле Flexbox, чтобы переместить два значка вправо. Центрируем их по вертикали:
.toolbar {маржа слева: авто; -webkit-align-items: center; }
В этом случае наши тело представляет собой гибкий контейнер высотой 100%. Мы можем воспользоваться этим, поскольку хотим, чтобы раздел сообщений пользовательского интерфейса занимал лишнее вертикальное пространство:
.messages {flex: 1; перелив: авто; }
Переполнение позволит пользователю прокручивать этот раздел, если сообщений больше, чем помещается в области сообщений.
.time {положение: абсолютное; }
Мы избавляемся от типичных характеристик гибкости, абсолютно позиционируя их, что является более простым путем для этих элементов. Вы не ограничены Flexbox; вы можете использовать лучшую модель позиционирования для вашей конкретной ситуации.
.from-me {justify-content: flex-end; } .from-me blockquote {order: -1; маржа справа: 2em; } .from-me .time {bottom: -2.5em; справа: 4em; }
В приведенных выше правилах используется Flexbox для изменения порядка отображения элементов в сообщениях от пользователя приложения, а не от человека, которому они отправляют сообщения, а затем эти элементы размещаются в правой части экрана. Наконец, время позиционируется соответственно.
Осталось только исправить расположение элементов, используемых для сообщений контакта, для чего даже не нужен Flexbox:
.from-them blockquote {margin-left: 2em; } .from-them .time {bottom: -2.5em; слева: 4em; }
Вот и все! Здесь используется только восемь свойств или значений, специфичных для Flexbox, и в сочетании с очень простым CSS они позволяют нам создать этот экран довольно простым способом. Макет гибкий, поэтому он работает с разной шириной области просмотра.
Резервные варианты и совместимость
Вы можете знать, а можете и не знать о том, что Flexbox претерпел несколько изменений синтаксиса за последние годы. Вам может быть интересно, как вы можете объединить все эти синтаксисы в беспорядок CSS, который работает в большинстве браузеров при использовании float и дисплей: таблица как запасные варианты.
Даю тебе мое благословение, если ты хочешь попробовать; Я не буду здесь пропагандировать кросс-синтаксическое опыление. Однако, пожалуйста, не просто бросайте полотенце и восклицайте, что «очень жаль, что мы не можем использовать Flexbox из-за отсутствия поддержки браузера». Поддержка браузеров быстро растет.
Я предлагаю вам использовать только новый синтаксис - он единственный, который действительно актуален, если у вас нет устаревших пользовательских интерфейсов на основе Flexbox (которые я предлагаю вам просто переписать). Если эффекты, которых вы хотите достичь с помощью Flexbox, критически важны, я рекомендую сначала создать их без Flexbox, а затем реализовать решение Flexbox в соответствии с этими правилами в вашем CSS. Таким образом, вы падаете вперед, а не назад. Но это ваша сеть, и вы здесь хозяин, так что делайте то, что имеет смысл для вашего рабочего процесса, вашего клиента и ваших пользователей.
Иди и сгибайся!
Flexbox - это гигантский шаг вперед в области веб-верстки. Хотя он не решает всех проблем с макетом (таких как макет страницы и сетки), он превращает многие ранее неприятные проблемы с макетом в тривиальные упражнения. Я призываю вас поиграть с Flexbox и использовать его там, где это возможно!
Слова: Стивен Хэй
Уроженец Калифорнии Стивен Хэй живет и работает в Нидерландах в качестве специалиста по веб-дизайну и разработке в рамках своего собственного консалтингового агентства Zero Interface. Эта статья изначально была опубликована в выпуске 246 сетевого журнала.
