Создание сложных макетов с PostCSS-Flexbox

Sep 16, 2025

Инструкции

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

Мы должны использовать Flexbox, но мы не должны выбросить основные концепции за решеткой системы сетки, которые вытащили нас из «эры геодонств» дизайна:

Сделать колонны пропорциональными для чего-то
Используйте постоянные желоба на протяжении всего вашего дизайна

Мы можем использовать одну из множества систем сетки Flexbox, но во всей честности стили позади них в основном такие же, как сетки на основе поплавок. Авторы просто добавляют дисплей: flex в контейнер, а также некоторые классы помощника, которые блокируют свойства Flexbox (например, класс, как . Грид-вертикальный-align-mid это запутывание Выравнивание-элементы: центр ).

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

25 шаблонов сайта высшего класса

Проблема с сетями

System bloat: Bootstrap’s generated CSS for the grid alone is 16,435 characters – most of which you’ll never use — System Bloat: сгенерированные CSS Bootstrap для сетки в одиночку - 16 435 символов - большинство из которых вы никогда не будете использовать

Авторы сетки обычно распределяют огромные пакеты CSS, которые могут смещены, исходный порядок, выровнять и изменять изменение изменений в соответствии с некоторым произвольным размером устройства. Они полагаются на GZIP, чтобы смягчить некоторый ущерб, но это не получает все это. Что, если вам не нужны эти дополнительные функции?

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

На второй вопрос. Дизайнеры стали мысленно запертыми, чтобы сделать все свои решения, основанные на определенной комбинации одинаковых размеров колонн. В результате весь интернет начинает размываться вместе в «стек на мобильном телефоне»; 1/12 комбинации столбцов на что-нибудь еще «дистопия».

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

Войдите в дракон

Решение обоих этих проблем завернут в функции, называемую PostCSS-Ant. Плагины PostCSS могут использоваться с диапазоном инструментов сборки, таких как WebPack, Gulp или просто командная строка. Муравьиные смешиваются легко на простые CSS (или любой препроцессор) с обманчиво простым API, которые маскируют десятки ума кальцина формулы. Это требует двух смесиноподобных параметров, чтобы получить множество размеров со сетчатными размерами.

Примером может сделать это понятнее: ширина: Размеры (1/2) Get (1) возвращается Calc (99,99% * 1/2 - (30px - 30px * 1/2)) Отказ Давайте сломаем это:

Размеры () это разделенный в космос список размеров. Это может быть любая комбинация различных размеров: фиксированные числа в форме действительных длин CSS ( поспешно , Эм , % ); Фракции или поплавковые номера (которые возвращают все, что осталось, не фиксированные числа Sans); и авто Ключевые слова (которые возвращают любой размер оставшись, не превышают фракции и фиксированные числа)
щипнуть () Является ли 1 индекс, который выбирает размер сетки из вашего списка. Так Размеры (1PX 2PX 3PX) GET (2) вернется 2px.
То кальцина Формула - это сосетчатый размер

Мы получаем ширину для каждого столбца в двухполевой решетке с одним 30 питром между ними:

.сетка {
  Дисплей: flex;
  Flex-Wrap: Wrap;
}

.половина {
  Ширина: размеры (1/2) Get (1); / * Возвращает Calc (99,99% * 1/2 - (30px - 30px * 1/2)) * /
  Маржа - справа: 30px; / * помещает желоб на правую сторону каждого столбца * /
}

.half: Nth-Child (2n + 2) {/ * начинается на 2-м элементе и начинает подсчитывать на 2s * /
  Маржинально-право: 0; / * Удаляет последний канал от каждой строки * /
}

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

Размеры (100px 1/2) Get (1) возвращается 100px. Отказ Достаточно просто, но почему нам нужно использовать Ant, чтобы вернуться 100px. ? Мы доберемся до этого через секунду.

Размеры (100px 1/2) Get (2) возвращается calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) Отказ Святое дерьмо. Муравей выясняет общий размер фиксированных чисел, а затем возвращается 1/2. Из того, что осталось - в N-й сетке.

Мы можем использовать эти кальцина формулы для создания сетки с 100px. колонна и два 1/2. столбцы, как так (я буду опустить .сетка Стили, чтобы сохранить деревья, но обязательно включить их в свой код):

 .fixed-size {
  Ширина: размеры (100px 1/2) GET (1); / * возвращает 100px (я знаю, что это кажется глупо, но нести со мной немного дольше) * /
  Маржа - справа: 30px;
}

.половина {
  Ширина: размеры (100px 1/2) GET (2); / * возвращает Calc ((99,99% - (100px + (30px * 1))) * 1/2 - (30px - 30px * 1/2)) * /
  Маржа - справа: 30px;
}

.half: Nth-Child (3N + 3) {
  Маржинально-право: 0;
}

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

Preprocessor Looping

Minimal markup: A minimal markup, two-column, nth grid using postcss-ant. Notice how there is no margin-right on the last element in the row — Минимальная разметка: минимальная разметка, двухкомпонентная, Nth Grid с использованием PostCSS-Ant. Обратите внимание, как на последнем элементе нет маржина - прямо на последнем элементе

Препроцессоры и Postcss не всегда ладят - особенно при участии пользовательского синтаксиса. К счастью, API муравей является предварительно обработкой. Мы можем использовать PostCSS-Parser, подобный PostCSS-SCSS с плагином PRECSS, но этот подход использует много незаконченных / недоношенных плагинов PostCSS, которые плохо имитируют функциональность SASS. Я нашел лучший рабочий процесс:

Используйте быстрый препроцессор, такой как узел, чтобы посмотреть in.scss к out.css.
Используйте Postcss, чтобы посмотреть out.css. к Final.css.
& lt; link & gt; к Final.css. В вашей разметке

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

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

 @ for $ i от 1 до 3 {
  Содержание: $ I; // Возвращает содержимое: 1; Содержание: 2; Содержание: 3;
}

С небольшим знанием препроцессоров вы можете начать использовать муравье в действительно интересных способах ...

 $ Размеры: 100px 1/2 1/2;
$ желоб: 30px;
Длина: длина (размеры $);

.столбец {
  Маржинально-право: $ желоб;

  @ for $ i от 1 до $ длина {
    & amp;: Nth-Child (# {длина} n + # {$ i}) {
      Ширина: размеры (размеры) получают ($ I) желоб ($ желоб);
    }
  }

  & amp;: Nth-Child (# {denge} n + # {$ длина}) {
    Маржинально-право: 0;
  }
}

Сейчас наши нерегулярные колонны размером обернуты в новые строки без дополнительной разметки. Идите вперед и увидитесь этим кодом. Попробуйте различные размеры, желоба и добавление новых размеров (например, 100PX AUTO 100PX).

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

. Грид {
  Generate-Grid: размеры (100px 1/2 1/2); / * Вы можете пройти дополнительные варианты, но не нужен щипцы () больше не нужны. * /
}

Много вариантов

Preprocessor loops: ant really begins to show its strength when we combine it with preprocessor loops to create layouts that used to be impossible — Препроцессорные петли: Муравей действительно начинает показывать свою прочность, когда мы объединяем его с препроцессорными петлями для создания макетов, которые были невозможны

nth Grids отлично подходит, когда вы знаете, размер и количество элементов, которые будут переданы, но иногда вы захотите создать контейнер и просто сбрасывать элементы случайного размера. В этих случаях, негативно-поля Сетки - ваша лучшая ставка. Просто пройти негативно-поля атаку, как так:

.сетка {
  Маржа: 0 -15px;
}

.столбец {
  Ширина: размеры (1/3) GET (1) Сетка (отрицательный маржа);
  Маржа: 0 15 пикселей;
}

Вывод

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

«Тупые» инструменты, которые просто возвращают немного данных, всегда являются лучшими инструментами, поскольку они посадили власть обратно в руки разработчика. Это то, что было разработано PostCss-Ant. Если вы заинтригован, отправляйтесь в corysimmons.github.io/postcsss- для некоторых демонстрирующих демонстраций и сладких документов.

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

Статьи по Теме:

Почему веб-дизайн требует экспертов UX
10 лучших веб-дизайна книги на Рождество 2016
3 лучших инструмента для тестирования веб-характеристики

Создание сложных макетов с PostCSS-Flexbox

Проблема с сетями

Войдите в дракон

Preprocessor Looping

Много вариантов

Вывод

Инструкции - Самые популярные статьи

Как растянуть холст и настроить для масляных красок

Как скачать фотографии Instagram: все, что вам нужно знать

8 Удивительные новые графические учебники дизайна

Руководство по облачному видению Google

Создайте 3D-ландшафт в 6 простых шагах

19 советов для великого постера

Как нарисовать традиционную британскую деревенскую сцену

Как создавать 3D волосы и меха

Категории