дней поплавков и маржи обмана, наконец, позади us, А CSS предоставляет разработчикам новых и улучшенных свойств идеально подходит для тех деликатных макетов.

Макет функции, такие как вертикальное выравнивание, равномерно распределенной расстояния, контроля источником порядка и других моделей, таких как “липкие” нижние колонтитулы довольно легко, чтобы достичь с flexbox¹.

В этой статье мы обсудим, шаблоны хорошо подходят для flexbox, С помощью интерфейса с Tracks²приложение, которое также использует принципы атомных дизайна.Я поделюсь, как flexbox оказались полезными и обратите внимание на подводные камни сопряжения ее с конкретными особенностями компоновки.Мы будем смотреть на тех моделей, которые вызвали озабоченность, представить предложения для откаты и поделиться дополнительные тактику, чтобы начать использовать это свойство CSS сразу .

Флекси атомной компоненты Link

Подход к интерфейсу дорожек ‘начал с каждый кусок исследуется как единичный случай, используя принципы, изложенные по Брэд Frost³,Там также документально биты развития и интеграции на Dribbble⁴для просмотра инсайдеров .

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

Если вы хотите, чтобы погрузиться глубже в теории атомного дизайн, прочтите Брэда post⁷, Который обсуждает его философию в более подробно.Я также предлагаю проверить его бронирование на subject⁸.

Проекты интерфейса были переданы в виде набора InVision¹¹привилегии, документирование потока и пользовательский интерфейс.Во время первоначальной проверки интерфейса, я начал определении регионов, где flexbox бы быть полезным.Я также решил использовать flexbox для макетов страниц с использованием шаблонов, таких как известный “боковой панели слева, основное содержание вправо” образов, которые наиболее часто реализуется с поплавками .

Один приветствуется аспект модернизации Tracks, что объем проекта требуется Internet Explorer (IE), 10, Android 4.1 и IOS 7.Это была хорошая новость, потому что они имеют большую поддержку flexbox¹², С соответствующими префиксами.Даже если поддержка намного более стабильна в эти дни, операционные системы до, скажем, 4.1 для Android требует откаты.Что бы fallbackвыглядеть в случае, когда поддержка не существует?Разработчики, использующие Modernizr можно ориентировать эти браузеры помощью .no-flexboxкласс и служить более стабильную систему с поддержкой макета ( альтернативно можно использовать CSS художественных запросов с @ supports ¹³ ., которые хорошо поддерживается, слишком Ред .).Например:

<ul class="flexbox-target">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>

html.flexbox ul.flexbox-target,
html.no-js ul.flexbox-target {
  display: flex;
  flex-direction: row;
}

html.no-flexbox ul.flexbox-target li,
html.no-js ul.flexbox-target li {
  display: inline-block; /* Could also use a float-positioned-layout system instead */
}

Если поддержка flexbox не совсем верно, мы пойдем вперед и использовать display: inline-blockдля макета запасного.Мы также добавить no-jsк декларации должны обязательно JavaScript.Каскадированиехарактер CSS будет на месте, если flexbox не поддерживается, даже с JavaScript выходной или сбоев загрузки.Flexbox может сосуществовать с floatи display: tableи относительное позиционирование, и браузеры, поддерживающие flexbox будет приоритеты flexbox над другими определениями, в то время как браузеры, не поддерживающие flexbox будет игнорировать свойства flexbox и изящно вернуться к хорошей ol’Механизмы макет CSS .

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

Встроенные шаблоны Link

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

<header role="banner">
  <nav role="navigation">
    <a href="pipeline.html">Back to pipeline</a>
    <a href="account.html">Account</a>
    <a href="users.html">Users</a>
    <a href="export.html">Export</a>
  </nav>
</header>

nav[role="navigation"] {
  display: flex;
  align-items: center; /* Center navigation items vertically */
}

nav[role="navigation"] a {
  display: inline-block; /* To avoid layout issues for inline elements with the order property in IE 10 */
}

nav[role="navigation"] a[href="pipeline.html"] {
  flex: 1;
}

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

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

<header class="pipeline-header" role="banner">
  <a href="pipeline.html" class="pipeline-logo">… </a>

  <nav class="pipeline-nav" role="navigation">…</nav>

  <form class="pipeline-search" role="form">…</form>

  <a href="#menu">…</a>
</header>

Flexbox может снизить потребность в HTML hackeryи может поддерживать семантику, а разметка демонстрирует.Поддержание семантику важно, потому что HTML будет иметь больше шансов быть многоразовые в будущем, среди многих других причин, выходящих за рамки этого обсуждения .

Перед flexbox существовало, разработчики применяется подходы, такие как display: inline-blockи даже float: leftдля достижения встроенные макеты.Теперь, flexbox не является жизнеспособным вариантом, разработчики больше не вынуждены следовать плохие практики ради эстетики.CSS-требуется не так, как администратор краткое навигации шаблона в рисунке 3, но она по-прежнему быстрее в реализации, чем методы, упомянутые ранее .

.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-header > a {
  display: inline-block; /* IE 10 doesn't recognize order, so we do this to avoid odd layouts there. */
}

.pipeline-logo {
  flex: 1;
  order: 2;
  text-align: center;
}

.pipeline-nav {
  flex: 1.25;
  order: 1;
}

.pipeline-search {
  flex: 1;
  order: 3;
}

a[href="#menu"] {
  order: 4;
}

При использовании flexbox с рисунком на рисунке 3, помните, что последовательность источника может быть изменен.Если логотип заголовка требует сдвиг в позиции, делать это безболезненно с orderимущество.Будьте внимательны, что Порядок источник всегда важно для accessibilityи несколько спорным, когда дело доходит до flexbox;особенно с различной доступности implementations¹⁸во всех браузерах.Все браузеры и читатели экрана использовать порядок исходного кода, а не визуальный порядок определяется CSS, для клавиатуры навигации .

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

<div class="container">
  <header role="banner"></header>
  <main role="main"></main>
  <footer role="contentinfo"></footer>
</div>

Вот CSS используется для изменения порядка для диаграммы в правой части рисунка 5 .

.container {
  display: flex;
  flex-direction: columns; /* row is the default value */
}

header {
  order: 2;
}

main {
  order: 3;
}

footer {
  order: 1;
}

Этот тип планировки не только для навигацииили.Вы, возможно, видели образец в нижние колонтитулы, а .

При использовании этого шаблона, рассмотрим, как содержание может заполнить контейнер и потреблять пространство.Если содержание растут от центра к краям?Что делать, если содержание толкнул вниз?Как это повлияет другие элементы макета?Задайте эти вопросы в каждом проекте, прежде чем приступить реализации.Рассмотрение для навигации клавиатура для того, как уже упоминалось, является столь же важным для конечных пользователей .

Встроенный Форма Входы Link

Формы могут быть кошмаром для разработчиков, особенно, когда они тесно связаны с замысловатой структуры сетки, сделанные в Photoshop.К “встроенный ярлык” образец, как я буду ссылаться на него, как много из основных продуктов в нашей отрасли, как Fender Stratocaster является рок-музыка .

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

Эти скриншоты явно указывают на ошибки flexbox может представить с динамическим или длительного content,Эффект в изображении справа то, что я называю “Центр толчок”, что означает содержание отталкивается от центра к краям вдоль оси х и у .

Вот разметка для шаблона рядный этикетки на рисунке 8 .

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

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

.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>

И УС:

.form-group {
  display: flex;
}

.form-group input {
  flex: 1;
}

Выпадающего меню Link

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

Разметка для данного навигационного меню используется следующий HTML как его структурного фонда .

<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;
}

В течение всего нескольких строк кода, верстка блаженство достигается.Кроме того, он отделен от любой структур …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров