PAYSTO
Компания
40,36
рейтинг
22 ноября 2015 в 12:42

Разработка → Flexbox для интерфейсов во всей красе: Реализация Tracks (Часть 2) перевод

Продолжаем перевод статьи smashingmagazine, в котором подробно рассмотрены все нюансы разработки интерфейсов с помощью flexbox на примере сайта Tracks.

Часть 1

Строчные формы ввода


Для разработчиков формы могут быть ночным кошмаром, особенно когда они тесно связаны со сложной сетчатой конструкцией, созданной в Photoshop. Шаблон «строчные метки», как я его называю, имеет такую же роль в нашей отрасли, как Fender Stratocaster в рок-музыке.

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

img

Решите для себя, как будет размещаться контент. Слева табличное отображение выровнено вертикально к центру. Справа flexbox выравнивает элементы к центру.

Эти скриншоты четко отражают ошибки, к которым может привести flexbox, если использовать динамичный или слишком длинный контент. Эффект, представленный на изображении справа – это то, что я называю «смещением центра», что означает, что контент сдвигается из центра за рамки вдоль осей x и y.

Вот разметка для шаблона inline label, приведенного на рис. 8.

<div class="form-group">
  <label>…</label>
  <select>…</select>
</div>

Решением проблемы в данном случае может быть использование display: table; для более удобного управления длиной текста. Это позволяет контенту перетекать вниз, вместо того, чтобы вылазить за рамки центра.

.form-group {
  display: flex;
}

.form-group label {
  display: table;
  vertical-align: middle;
}

.form-group input {
  flex: 1;
}

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

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

HTML здесь вполне стандартный и включает окружающий div для определения структуры flexboxа.

Вот как выглядит наш HTML:
<div class="form-group">
  <input type="text" placeholder="Add a note…">
  <button>Add</button>
</div>

И CSS:
.form-group {
  display: flex;
}

.form-group input {
  flex: 1;
}

Выпадающее меню


Выпадающее меню состоит из колонки слева, содержащей вертикально центрированные пункты, расположенные строчно, и список пунктов справа, в котором каждый пункт списка расположен на своей строке.

img

Меню для этого основного интерфейса было построено только с помощью flexboxа для раскладки.

<nav class="menu">
  <div class="menu__options">
    <a href="export-data.html">Export</a>
    <a href="help.html">Get Help</a>
  </div>

  <div class="menu__items">
    <a href="account.html">Account</a>
    <a href="preferences.html">Preferences</a>
    <a href="users.html">Users</a>
    <a href="payment.html">Payments</a>
    <a href="logout.html">Logout</a>
  </div>
</nav>


CSS здесь простой и читабельный — именно такой, каким его любят видеть разработчики.

.menu {
  display: flex;
}

.menu__options {
  display: flex;
  align-items: center;
}

.menu__items {
  display: flex;
  flex-direction: column;
}

С помощью всего нескольких строк кода получается идеальная раскладка. Кроме того, она отделяется от любой сетчатой структуры, а HTML и CSS имеют семантическое значение. Это еще один пример силы flexboxа, позволяющей избегать сложных тактик позиционирования и многословной разметки.

Медиа


img

Использующих flexbox, SVG с фиксированной шириной располагается слева, а гибкий контент располагается рядом с ним.

<div class="media-obj">
  <div class="media-obj__fig">…</div>
  <div class="media-obj__body">…</div>
</div>

Вот как выглядит CSS:
.medi-obj {
  display: flex;
  align-items: flex-start;
}

.media-obj__body {
  flex: 1;
}



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

Flexbox отлично работает в таком виде шаблона, но будьте осторожны с тем, как ваш контент реагирует на прилегающее к нему содержимое, как это показано выше. В приведенном выше видео, как пространство графики сворачивается, а текст заходит поверх изображения. Этот пример может казаться глупым, потому что вряд ли кто-то решит настолько уменьшать ширину браузера, не так ли? Суть в том, что нам нужно понять, как контент относится к окружающему пространству, прежде чем мы начнем использовать flexbox.

Для этого шаблона я бы посоветовал задавать ширину изображений значением max-width: 100% всегда, когда они выстраиваются внутри гибкого родительского элемента, или задавать изображениям фиксированную ширину, и после этого использовать медиа-запросы, чтобы настроить их нужным образом.

Календарь


img


Как мы можем не попробовать использовать этот подход для создания календаря? Вероятно вы спросите «Почему не использовать таблицу?». В данном случае, календарь используется для выбора даты, поэтому я решил использовать кнопки для каждого дня, месяца и года, и привязать эти кнопки к рядам (каждый ряд недели в календаре заключен в div). Используя данный подход, мы получаем меньше разметки и более простую раскладку.

Разметка получается действительно прямолинейной и работает даже с управлением нумерацией в заголовке календаря.

<div class="datepicker">
  <header class="datepicker__header flex-container">
    <button>Left Arrow</button>
    <span>2015</span>
    <button>Right Arrow</button>
  </header>

  <div class="datepicker__view flex-container">
    <button>Jan</button>
    <button>Feb</button>
  </div>
</div>

CSS — проще не бывает. Он понятен каждому, кто читает код, и достаточно краток при его написании.

.flex-container {
  display: flex;
}

.datepicker__header {
  justify-content: space-between;
}

.datepicker__view {
  align-items: center;
  justify-content: flex-start;
}

img

В этом календаре с выбором по месяцам слева используется justify-content: space-between, а справа — justify-content: flex-start. Обе функции по-разному оформляют контент.

Эти два примера четко показывают, почему все нужно планировать заранее. Как будет переноситься контент? Как он отреагирует на изменение размера области просмотра? Нужно ли переносить контент? Чтобы вывести правильную стратегию для контента, необходимо ответить на все эти вопросы.

Макет


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

Пример макета. Боковая панель слева и основной контент справа – это идеальный сценарий для flexboxа. Также он напоминает мне технику фальшивых колонок.
img


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

<div class="admin-ui">
  <div class="admin-ui__nav">…</div>

  <div class="admin-ui__body">
    <nav>…</nav>
    <main>…</main>
  </div>
</div>

.admin-ui__body {
  display: flex;
}

.admin-ui__body nav {
  flex: 30%;
}

.admin-ui__body main {
  flex: 70%;
}

Вот отличный запасной вариант для нашего макета. Шаблон не включает сложной сетчатой структуры. Плюс наш старый друг display: table готов помочь нам, когда это будет необходимо.

Элемент display: table-cell – это мощный инструмент CSS, который появился во времена CSS 2 и является идеально надежным запасным вариантом для такого случая. Значение заставляет элемент вести себя как табличный элемент, что представляет собой именно то поведение, которое нам нужно, чтобы воссоздать версию flexboxа. Также вы можете изменить порядок с помощью таблицы, используя такие объявления, как display: table-header-group и display: table-footer-group.

Фиксированный footer


Фиксированные footer — это один из обрядов посвящения в опытные веб-дизайнеры, в котором footer должен быть размещен в нижней части области просмотра. Если контент добавляется, он может сдвинуть footer вниз, но в любом другом случае footer всегда должен быть в нижней части области просмотра.

img

Фиксированный footer в правой боковой панели

Вот как выглядит разметка правой боковой панели:
<div class="admin-edit">
  <button class="admin-edit__save">Save Deal</button>

  <div class="admin-edit__footer">
      <p>…</p>
      <button>Copy</button>
      <button>Delete</button>
  </div>
</div>

И вот как выглядит CSS:
.admin-edit {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Вот отличный запасной вариант для фиксированных футеров во flexboxе, который также сохраняет раскладку во всех версиях, вплоть до IE 6.

Еще одной частью раскладки, в которой я пробовал использовать flexbox, стал основной вид приложения, или его еще называют «трубопроводом» приложения. Каждая карточка имеет определенную ширину и использует свойство flex. Это задает каждой карточке равномерные определенные пропорции.

img


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

Будьте осторожны


В процессе тестирования браузеров мы обнаружили, что сочетание свойства flex с другими свойствами расстояния, такими как отступы, приводит к багам при отображении страницы в IE 10

.parent {
  display: flex;
}
.parent .child {
  flex: 1;
  padding: 20px; /* Нарушает раскладку в IE 10 */
}


Когда родительская оболочка модуля, заданная с помощью display: flex, имеет дочерние элементы, в которых используется свойство flex наравне с padding или margin, в IE 10 возникают ошибки.

Запрос функции @supports (display: flex) {} может являться чем-то вроде Modernizr, но будет реализован с использованием родного CSS. К сожалению, поддержка @supports достаточно слаба на данный момент, а потому этого варианта следует избегать. Вместо него, вот вам несколько советов по запасным вариантам:
  • Используйте класс no-flexbox из Modernizr для поиска свойств
  • Используйте transform или табличное отображение для центрирования.
  • Используйте табличное отображение.
  • Контролируйте порядок с помощью свойств табличного отображения, таких как table-caption, table-header-group и table-footer-group.
  • Используйте floats в качестве запасного варианта для всех структур.
  • Используйте строчность или строчные блоки в качестве запасного варианта отображения для строчных шаблонов.
  • Используйте условные комментарии для IE 9 и более старых версий, чтобы создать оформление без flexbox.




Автор: @Irina_Ua Dennis Gaebel Jr
PAYSTO
рейтинг 40,36
Компания прекратила активность на сайте

Комментарии (6)

  • –5
    Зачем использовать flexbox, если всё равно пишешь CSS, который делает тоже самое, но без flexbox?
    • +5
      Ждём от вас примеров «того же самого» на css2.
  • +4
    Согласен, Flexbox — прекрасная технология, благодаря которой можно намного более гибко управлять контентом.

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

    1. A Complete Guide to Flexbox — https://css-tricks.com/snippets/css/a-guide-to-flexbox/
    Все свойства flexbox модели, в картинках, в удобном виде, разбитые на два основных раздела. Постоянно возвращаюсь к этой статье, когда занимаюсь очередной вёрсткой.

    2. Solved by Flexbox — https://philipwalton.github.io/solved-by-flexbox/
    Набор flexbox-решений типичных задач в вёрстке: создание сетки сайта; стандартная разметка, с шапкой, колонками, контентом и футером; центрирование по вертикали, и так далее. Также очень часто заглядываю на примеры на этой странице и беру оттуда кусочки кода для себя.

    Вот благодаря двум этим ресурсам, у меня лично, Flexbox прекрасно уложился в голове, и я теперь все вещи стараюсь верстать на нём) Так как при адаптивной вёрстке это действительно намного более удобно и полезно, чем старые подходы.
    • 0
      Что-то я вспомнил, как в прошлом веке в мой юный мозг вламывалась конструкция table-tr-td с их colspan, rowspan :-)
    • 0
      Еще проще по слайдам Вадима Макеева (видео). Быть может они слегка устарели и не хватает каких-то нюансов, но в целом это самое минималистичное пособие «в картинках» и никакой воды.
  • 0
    Тут уже перведены все части: prgssr.ru/development/fleksboks-dlya-interfejsov-osnovnye-patterny.html (10 нояб.)

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Самое читаемое Разработка