CSS поплавки и очищает определить веб-макет сегодня.
Основываясь на принципах, вытекающих из века полиграфический дизайн, они работали достаточно хорошо — даже если, строго говоря, поплавки не были предназначены для этой цели.Ни были столы, но это не помешало нам в 1990-х .
Тем не менее, Будущее веб-макета является bright, благодаря flexbox 1 .Механизм макет CSS позволяет нам организовать элементы в веб-настоящему, как пути.Некоторые элементы могут быть установлены, в то время как другие прокрутки.Порядок, в котором они появляются может быть независимым от того, источник.И все может соответствовать диапазону размеров экрана, от широкоэкранных телевизоров до смартфонов — и даже устройств, как еще невообразимые. Поддержка браузеров является fantastic 2 (кроме сами-знаете-who).Да, это прекрасное время, чтобы прыгнуть в flexbox если вы haven’ т сделали этого .
Но изменение наши пути не легко. Flexbox имеет ошеломляющее количество features, некоторые из которых знакомы.Это много, чтобы принять. К счастью, для целей компоновки, необходимо только знать несколько основ.Let’ взглянем на то, как мы могли бы создать базовую Gmail-как, интерфейс flexbox основе.Если вы haven’ т исследованы и еще полностью понял flexbox, этот кусок будет пересмотреть и объяснить несколько вещей, которые могли бы быть запутанным на первый .
Flexbox Настрой Link
Flexbox требует нового мышления.Вместо того, чтобы организовать элементы в левой-направо, сверху-вниз строк и столбцов, мы организуем блоки на линии — две линии, на самом деле, главная ось и ось крест, первый из которых мы будем использоватьсегодня.Подумайте о главной оси в rope, вдоль которого коробки (дивы или другие элементы HTML) нанизываются.Метафорический веревка проходит от одного конца контейнера в другой, натянутой и невидимой оси.Это приводит к четырем интересных концепций .
Выравнивание Link
Во-первых, мы можем скользить “коробки” в одну сторону “каната” или другой, центр им или распределить их равномерно.Это означает, что объекты могут придерживаться одной стороне макета или другой — скажем, на левой или правой части экрана, независимо от того, ширина экрана.Равномерное распределение означает, что они будут хорошо адаптироваться к любой размер экрана, который идеально подходит в нашем мульти-экран world 3 .
Направление Link
Мы можем также reverse строка, так что коробки работать в обратном направлении, без редактирования HTML.Это похоже на порядка сортировки technique 4 , что позволяет нам перевернуть колонны вокруг — кроме третьей признака занимает, что дальше .
Ориентация Link
В-третьих, мы можем превратить веревку на 90 градусов, чтобы свисают с верхней части контейнера, вместо того, чтобы из стороны в сторону.СМИ запросы и способность flexbox делают возможным запуск пунктов — скажем, заголовок статьи и подвал — вниз экрана смартфона, но слева направо на настольном компьютере.То, что раньше можно назвать ряды теперь может выполняться сверху вниз или снизу вверх с тире CSS .
Link
Наконец, мы можем контролировать, какие ящики пришел первый, второй, третий и так далее на веревке без редактирования HTML.Это огромная.Это означает, что мы можем структурировать HTML документ, скажем, SEO 5 , accessibility 6 или просто ПР “ semantics 7 — зависит от расположения.Хотите центр элементы вертикально?Без проблем.Хотите навигацию в конце вашего HTML, но в начале макета?Конечно.Хотите, чтобы экспериментировать с различными раскладками?Это все в CSS.И так же, какчто мы уже думаем с точки зрения содержания и устройств, не жесткие сетки .
Там больше, но это охватывает основы в настоящее время.Напомним:
- Блоки нанизываются вдоль невидимой линии .
- Мы можем подтолкнуть их туда и сюда вдоль этой линии .
- Мы можем переломить линию, таким образом, обращая порядок шкатулки ».
- Линия может повернуть на 90 градусов .
- Мы можем перетасовать вещи вдоль линии в любом порядке мы угодить, независимо от HTML .
Заказать Link
Заказ важное понятие в flexbox.Давайте основной HTML документ: типичный блоге будет включать в себя определенные биты информации .
- Headerсайт название, описание, поиск формы (Эти рамки содержание и сообщить людям, где они находятся.)
- Мета dataавтор / издатель, дата, тема (ы) (Они помогают людям решить содержание имеет отношение к их потребностям.)
- Основной contentто, что страница все о (причина страницы существует)
- Справочная contentИнформация, связанная с (тизеры, ссылки, “Смотрите также”)
- Navigationссылки на других на сайте (темы на высоком уровне)
- FooterАвторские права, RSS, социальные медиа, новости registration
Эти элементы перечислены в порядке, что поисковые системы или чтения с экрана может сканировать.Теперь, давайте болтаться “веревку” сверху мобильного устройства и порядок их поставить контента первый .
- Основной content
- Мета data
- Справочная content
- Header
- Navigation
- Footer
Между тем, настольные компьютеры будут иметь различный вид .
- Header
- Мета data
- Основной content
- Справочная content
- Navigation
- Footer
Подождите, это не совсем правильно.Мы хотим, навигации в верхней части, и flexbox делает, что оснастка .
Отсюда следует, что вы также можете поместить “веревки” внутри коробки, и все правила применяются заново.Но сначала, давайте поговорим о порядке.Вот где все становится сложнее .
Вложенные Веревки и коробки Link
Каждый flexbox макет — каждая коробка — может содержать другой набор коробок, натянутые вдоль своей веревки.Это веревка может работать слева направо или наоборот, сверху вниз или наоборот, и в них посторонние предметы в любой конец, центр им или распределить их.И в то время, что гибкость открывает многиеВозможности, это также означает, что мы должны планировать наши макеты тщательно .
Давайте начнем с некоторым содержанием, чтобы понять, почему вещи сложны;это не обязательно в порядке расположения (т.е. порядок, в котором люди видят его).Представьте себе, презентации для аудитории.Вы говорите им, что вы собираетесь сказать, то вы говорите, и вы укутать резюме, что вы сказали.Наша гипотетическая страницы следующим образом знакомый структуру:
- Header
- Текущий message
- Сообщение list
- Ссылки на почтовый ящик (ов), архив и т.д. .
- Footer
Эскиз Дизайн Link
Для простоты, мы будем работать со знакомым макета .
Есть два flexbox макеты здесь.Первый имеет три коробки сверху донизу.Второй макет находится внутри средней коробке, справа налево .
Колонтитулы охватывают ширину окна просмотра.Навигационная помещается в небольшой колонке слева, и область содержимого позволяет пользователю прокрутки, когда она содержит больше информации, чем может быть отображено.Мы могли бы добиться этого с помощью нескольких поплавков и фиксированных позициях, но flexbox дает нам больше возможностей с меньшим разметки.Давайте взглянем .