Начало работы с CSS-макетом

За последние пару лет CSS Layout сильно изменился, как и то, как мы разрабатываем внешний интерфейс наших сайтов. Теперь у нас есть реальный выбор с точки зрения методов компоновки, которые мы используем в CSS для разработки наших сайтов, а это означает, что нам часто приходится выбирать, какой подход выбрать. В этой статье я расскажу о различных доступных вам методах компоновки, объяснив основы того, как они используются и для чего они используются.

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

Нормальный поток

Если вы возьмете веб-страницу HTML, к которой не применялся CSS для изменения макета, элементы будут отображаться в обычном порядке . В обычном потоке поля отображаются одно за другим в зависимости от режима письма документа. Это означает, что если у вас есть режим горизонтального письма, в котором предложения идут слева направо или справа налево, нормальный поток будет отображать блоки элементов уровня блока один за другим вертикально вниз по странице.

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

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

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

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

Если ваш CSS не загружается, пользователь все равно может прочитать содержимое, а пользователи, которые вообще не получают CSS (например, кто-то, использующий программу чтения с экрана), получат содержимое в том порядке, в котором оно находится в документе. Это делает важным с точки зрения доступности, чтобы ваш HTML-документ начал жизнь в хорошем состоянии; однако это также облегчит вашу жизнь как веб-разработчика. Если ваш контент находится в том порядке, в котором пользователь ожидает его прочитать, вам не нужно будет вносить серьезные изменения в макет, чтобы разместить его в нужном месте. С новыми методами компоновки вы можете быть удивлены тем, как мало вам нужно сделать.

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

Отход от нормального потока

Когда у нас есть хорошо структурированный документ, нам нужно решить, как его использовать и превратить в желаемый макет. Это потребует отхода от нормального потока для частей нашего документа. У нас есть целый набор методов компоновки для использования. Первый метод, который мы рассмотрим, — это float , так как float — отличная демонстрация того, что значит вывести элемент из нормального потока.

Плавает

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

Чтобы сделать элемент плавающим, используйте свойство CSS float и значение left или right. Значение по умолчанию для float равно none.

 .item { float: left; }

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

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

Очистка поплавков

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

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

 .clear { clear: both; }

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

Чтобы предотвратить эту ситуацию, нам нужно очистить что-то внутри коробки. Мы могли бы добавить пустой элемент и настроить его на очистку всего. Это включает в себя вставку пустых элементов div в наш документ, что не идеально и может быть невозможно, если ваша страница создается CMS. Таким образом, вместо этого типичный метод очистки поплавков — это то, что известно как хак с четким исправлением. Этот метод работает, добавляя контент, сгенерированный CSS, и устанавливая его для очистки обоих.

Контекст форматирования блока

Другой способ очистить плавающие элементы внутри блока — вызвать контекст блочного форматирования (BFC) для контейнера. Блочный контекст форматирования содержит все внутри себя, в том числе плавающие элементы, которые больше не могут высовываться из нижней части блока. Есть несколько способов заставить BFC, наиболее распространенным при очистке поплавков является установка свойства переполнения так, чтобы оно имело значение, отличное от видимого по умолчанию.

 .container { overflow: auto; }

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

Чтобы сделать намерение более ясным и предотвратить создание BFC, вызывающего нежелательные побочные эффекты, вы можете использовать flow-root в качестве значения свойства display . Единственное, что делает display: flow-root , это создает BFC, таким образом очищая ваши поплавки без каких-либо других проблем.

 .container { display: flow-root; }

Устаревшее использование поплавков

До появления новых методов компоновки плавающие элементы использовались для создания макетов столбцов, этот метод работал, задавая набору элементов ширину и устанавливая их плавающими рядом друг с другом. Тщательное управление процентным размером этих плавающих блоков может создать эффект сетки.

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

Ресурсы и дополнительная литература о поплавках и очистке поплавков

• «The Clearfix: заставить элемент самостоятельно очищать свои дочерние элементы», Крис Койер, CSS-Tricks
• « float », CSS: каскадные таблицы стилей, веб-документы MDN
• « clear », CSS: каскадные таблицы стилей, веб-документы MDN
• «Понимание макета CSS и контекста форматирования блоков», Рэйчел Эндрю, Smashing Magazine

Позиционирование

Чтобы удалить элемент из обычного потока или сдвинуть его с места в обычном потоке, вы можете использовать свойство position в CSS. В нормальном потоке элементы имеют static position . Элементы отображаются один за другим в измерении блока, и если вы прокручиваете страницу, они прокручиваются вместе с ней.

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

Относительное позиционирование

Если у элемента есть position: relative , то точка отсчета — это место, где он обычно находится в обычном потоке. Затем вы можете использовать значения смещения для свойств top , left , bottom и right , чтобы переместить поле из того места, где оно обычно отображается.

 .item { position: relative; bottom: 50px; }

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

Абсолютное позиционирование

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

Таким образом, первое, что произойдет, если вы установите position: absolute для элемента, — это то, что он, как правило, застрянет в верхней и левой части окна просмотра. Затем вы можете использовать значения смещения для свойств top , left , bottom и right , чтобы переместить поле из этой позиции туда, где вы хотите.

 .item { position: absolute; top: 20px; right: 20px; }

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

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

Фиксированное позиционирование

Что-то с position: fixed будет позиционироваться в большинстве случаев относительно области просмотра и удалено из потока документов, чтобы для него не было зарезервировано места. Когда страница прокручивается, фиксированный элемент остается на месте относительно области просмотра, в то время как остальная часть содержимого в обычном потоке прокручивается как обычно.

 .item { position: fixed; top: 20px; left: 100px; }

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

Чтобы расположить фиксированный элемент иначе, чем относительно окна просмотра, вам нужно иметь содержащий элемент с одним из свойств transform , perspective или filter , установленным на что-то другое, чем их значение по умолчанию none . В этом случае этот элемент станет содержащим блоком, и ваши смещения будут относиться к этому блоку, а не к области просмотра.

Липкое позиционирование

Установка position: sticky на элементе заставит элемент прокручиваться вместе с документом так же, как и в обычном потоке, однако, как только он достигает определенной точки по отношению к области просмотра (с использованием обычных смещений), он «прилипает» и начинает действовать как position: fixed . Это более новое значение, и оно менее хорошо поддерживается в браузерах, чем другие методы, однако оно возвращается к простой прокрутке страницы. os — это значение, которое хорошо используется в качестве улучшения, не вызывая проблем, если оно не поддерживается.

 .item { position: sticky; top: 0; }

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

Ресурсы и дополнительная литература по позиционированию

• «Позиционирование», область обучения MDN, веб-документы MDN, Mozilla
• position: sticky; », Крис Койер, CSS-Tricks
• «CSS position:sticky», Информация о поддержке браузера для фиксированного позиционирования, caniuse

Гибкий макет

Гибкая компоновка блоков (Flexbox) — это метод компоновки, предназначенный для одномерной компоновки. Одномерный означает, что вы хотите разместить свой контент в виде строки или столбца. Чтобы превратить ваш элемент в гибкий макет, вы используете свойство display со значением flex .

 .container { display: flex; }

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

Оси Flexbox

В приведенном выше примере я описал элементы как выровненные по начальному краю нашей строки в линейном направлении, а не как выровненные по левому краю. Наши элементы располагаются в ряд, потому что значение по умолчанию для свойства flex-direction равно row , это создает строку во встроенном направлении, вдоль которого идут предложения. Поскольку мы работаем на английском языке с письмом слева направо, начало строки находится слева, и поэтому наши элементы начинаются там. Таким образом, значение flex-direction определяет главную ось Flexbox.

Таким образом, поперечная ось проходит поперек главной оси под прямым углом. Если вашим направлением гибкости является row , а ваши элементы отображаются во встроенном направлении, ваша поперечная ось проходит в направлении блока. Если ваше flex-direction является column , поэтому элементы работают в направлении блока, тогда ваша поперечная ось проходит вдоль строки.

Если вы привыкнете мыслить в терминах главной и поперечной осей при работе с Flexbox, это сделает многое проще.

Направление и порядок

Flexbox дает вам возможность изменить направление элементов на главной оси, используя значение flex-direction row-reverse или column-reverse .

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

Свойства Flex

Свойства гибкости — это способ управления соотношением элементов гибкости вдоль главной оси. Три свойства:

• flex-grow
• flex-shrink
• flex-basis

Обычно они используются в сокращенной форме свойства flex , первое значение — flex-grow , второе flex-shrink и третье flex-basis .

 .item { flex: 1 1 200px; }

Значение flex-basis дает размер, который будет иметь элемент до того, как произойдет какое-либо увеличение или уменьшение. В приведенном выше примере этот размер равен 200 пикселям, поэтому мы дали бы каждому элементу 200 пикселов пространства. Маловероятно, что наш контейнер аккуратно разделится на 200 пикселей, поэтому останется место или не хватит места для всех элементов, если каждый из них имеет 200 пикселей. Свойства flex-grow и flex-shrink позволяют нам контролировать, что происходит с элементами, если для них слишком много или недостаточно места.

Если flex-grow задано любое положительное значение, элементу разрешается увеличиваться, чтобы занимать место. Следовательно, в нашем примере выше, после того как каждому элементу присвоено 200 пикселей, любое дополнительное пространство будет разделено между элементами.

Если flex-shrink задано положительное значение, элемент может сжаться в ситуации, когда произойдет переполнение, если всем элементам будет присвоена их flex-basis . Если в нашем примере в контейнере недостаточно места, каждый элемент будет уменьшаться на одинаковую величину до тех пор, пока все элементы не поместятся в контейнере.

Значения flex-grow и flex-shrink могут быть любыми положительными значениями. Элементу с большим значением flex-grow будет предоставлено больше доступного пространства пропорционально при увеличении, а с большим значением flex-shrink больше будет удалено при сжатии.

Понимание того, как работают эти flex-свойства, действительно является ключом к пониманию Flexbox, и ресурсы, перечисленные ниже, предоставят вам все подробности. Однако рассмотрите возможность использования Flexbox, когда у вас есть куча вещей, которые вы хотите растянуть и сжать в контейнер в одном измерении. Если вы обнаружите, что пытаетесь выстроить элементы в строки и столбцы, вам нужна сетка, и в этом случае Flexbox, вероятно, не подходит для этой работы.

Ресурсы и дополнительная литература для Flex Layout

• «CSS Flexible Box Layout», полное руководство по спецификации, веб-документы MDN, Mozilla
• «Полное руководство по Flexbox», Крис Койер, CSS-Tricks
• «Flexbox Froggy», игра для изучения Flexbox
• «Flexbugs», составленный сообществом список ошибок браузера, связанных с Flexbox.

Макет сетки

CSS Grid Layout был разработан как метод двумерной компоновки. Двумерный означает, что вы хотите разместить свой контент в строках и столбцах. Как и во Flexbox, Grid Layout — это значение display , поэтому, чтобы начать использовать Grid, вы должны начать с display: grid в вашем контейнере, а затем настроить несколько столбцов и/или строк, используя grid-template-columns и grid-template-rows свойства grid-template-rows .

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

Приведенный выше CSS создаст сетку фиксированного размера с полностью фиксированными дорожками столбцов и строк. Это, вероятно, не то, что вам нужно в Интернете, и Grid вам поможет. По умолчанию для любой дорожки установлено значение auto , которое обычно можно рассматривать как «достаточно большое для содержимого». Если бы мы не создали ни одной дорожки строк, то для нас были бы созданы строки для любого добавленного контента, и их размер был бы auto . Распространенным шаблоном является указание дорожек столбцов, но разрешение Grid создавать строки по мере необходимости.

Хотя вы можете настроить дорожки столбцов и строк, используя любую единицу длины или процент, вы также можете использовать новую единицу fr , созданную для Grid Layout. Единица fr является гибкой единицей и обозначает долю доступного пространства в контейнере сетки.

Сетка может распределить пространство за вас; вам не нужно рассчитывать проценты, чтобы убедиться, что вещи помещаются в контейнер. В приведенном ниже примере мы создаем столбцы, используя единицу измерения fr , и позволяем трекам создаваться автоматически. Мы также используем grid-gap для разнесения наших дорожек (см. раздел «Выравнивание блоков» для более подробной информации о промежутках и компоновке сетки).

Как и в случае с Flexbox и flex-grow или flex-shrink , модуль fr отвечает за совместное использование доступного пространства. Более высокое значение fr для одной дорожки означает, что она получает больше доступного пространства пропорционально. Вы также можете смешивать единицы fr и абсолютные длины. Пространство, необходимое для длин, будет вычтено из доступного пространства перед вычислением единиц fr .

Сеточная терминология

Сетка всегда имеет две оси: встроенная ось проходит в направлении расположения слов на странице, а ось блоков — в направлении расположения блоков.

Контейнер сетки — это элемент, для которого вы установили display: grid . Затем у вас есть линии сетки, созданные дорожками столбцов и строк, которые вы указали при использовании grid-template-columns и grid-template-rows . Наименьшая единица сетки (между четырьмя пересекающимися линиями) называется ячейкой сетки, а совокупность ячеек сетки, составляющих полный прямоугольник, называется областью сетки.

Автоматическое размещение сетки

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

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

Базовое линейное позиционирование

Самый простой способ разместить элементы в сетке — это позиционирование на основе линий, задающее правила для элемента, которые говорят ему, что он должен простираться от одной строки сетки к другой. Например, если у меня есть сетка с тремя дорожками столбцов и дорожками с двумя строками, я могу поместить элемент из строки столбца 1 в строку столбца 3 и из строки строки 1 в строку строки 3. Тогда он будет охватывать четыре ячейки сетки в общей сложности. , охватывающий две дорожки столбцов и две строки столбцов.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

Эти свойства могут быть представлены в сокращенном виде, grid-column и grid-row , где первое значение — start , а второе — end .

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

Элементы сетки могут занимать одни и те же ячейки, что позволяет создавать проекты с перекрывающимся содержимым. Элементы складываются обычным образом, как содержимое размещается в Интернете, при этом элементы, расположенные ниже источника, появляются поверх других элементов. Тем не менее, вы можете использовать z-index для управления этим.

Позиционирование с именованными областями

Вы также можете размещать элементы в сетке с помощью именованных областей. Чтобы использовать этот метод, вы даете каждому элементу имя, а затем описываете макет как значение свойства grid-template-areas .

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

Есть несколько правил, которые следует помнить при использовании этого метода. Если вы хотите, чтобы элемент занимал несколько ячеек, вы должны повторить имя. Области должны образовывать полный прямоугольник, не допускаются L-образные фигуры или фигуры тетриса! Сетка должна быть полной — каждая ячейка должна быть заполнена. Если вы хотите оставить пустое пространство, заполните эту ячейку файлом . . Например, в приведенном ниже CSS я оставляю нижний правый угол пустым.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

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

Ресурсы и дополнительная литература для компоновки сетки

CSS Grid Layout — это гораздо больше, чем описано в этом кратком обзоре, и приведенные ниже ресурсы помогут вам изучить спецификацию. Компоненты и ваш полный макет страницы могут быть сетками, выберите Grid Layout, если вам нужно создать двухмерный макет — независимо от того, большой он или маленький.

• «CSS Grid Layout», веб-технология для разработчиков, веб-документы MDN, Mozilla
• «Сетка на примере», Все, что вам нужно для изучения CSS Grid Layout, Рэйчел Эндрю
• «Grid Garden», веселая интерактивная игра для проверки и улучшения ваших навыков CSS.
• «Страна макетов», Джен Симмонс, YouTube

Я также написал несколько статей здесь, в Smashing Magazine, которые могут помочь вам разобраться в различных концепциях Grid:

• «Лучшие практики с CSS Grid Layout»
• «Стили пустых ячеек с помощью сгенерированного контента и макета сетки CSS»
• «Использование CSS Grid: поддержка браузеров без Grid»
• «Подвохи и камни преткновения CSS Grid»
• «Именование объектов в CSS Grid Layout»

Визуальный и документальный порядок

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

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

Будьте очень внимательны, когда вы перемещаете элементы не в том порядке, в котором они находятся в исходном коде. Если вы обнаружите, что меняете порядок элементов в CSS, стоит ли вам возвращаться назад и реорганизовывать документ? Проверьте, можете ли вы по-прежнему перемещаться по документу с помощью табуляции, а визуальный порядок имеет смысл.

Ресурсы и дополнительное чтение для визуального и документального порядка

• «CSS Grid Layout and Accessibility», веб-технологии для разработчиков, веб-документы MDN, Mozilla
• «Исходный порядок HTML против порядка отображения CSS», Адриан Роселли
• «Flexbox и отключение навигации с помощью клавиатуры», Code Things, Tink
• «Конфликт порядка отклика для фокуса клавиатуры», Аластер Кэмпбелл

Генерация коробки

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

Не создавать коробку или содержимое ( display: none )

Если вы хотите, чтобы элемент и все содержимое этого элемента, включая любые дочерние элементы, не генерировались, вы можете использовать display: none . Теперь элемент не будет отображаться, и место для него не будет зарезервировано.

 .item { display: none; }

Не генерировать этот элемент, а генерировать любые дочерние элементы ( display: contents )

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

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

Ресурсы и дополнительная литература для создания блоков

• «Исчезающие коробки с display: contents », Рэйчел Эндрю.
• Как display: contents; Работы», Ире Адеринокун,
• display: contents », Информация о поддержке браузера, caniuse

Выравнивание

До недавнего времени выравнивание было чем-то вроде сложной темы в Интернете, с очень ограниченными способами правильного выравнивания элементов внутри блоков. Это меняется с помощью модуля Box Alignment, который в настоящее время вы будете использовать для управления выравниванием в контейнерах Grid и Flex. В будущем другие методы компоновки также будут реализовывать эти свойства выравнивания. Список свойств выравнивания, подробно описанных в спецификации Box Alignment, выглядит следующим образом:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Поскольку модели макетов имеют разные функции, выравнивание работает немного по-разному в зависимости от используемой модели макета. Давайте посмотрим, как работает выравнивание с некоторыми простыми макетами Grid и Flex.

Свойства align-items и justify-items задают свойства align-self и justify-self как группу. Эти свойства выравнивают элементы внутри их области сетки.

Свойства align align-content и justify-content выравнивают дорожки сетки, когда в контейнере сетки больше места, чем необходимо для отображения дорожек.

Во Flexbox align-items и align-self имеют дело с выравниванием по поперечной оси, а justify-content с распределением пространства по главной оси.

На поперечной оси вы можете использовать align-content , где вы обернули гибкие линии и дополнительное пространство в flex-контейнере.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

Ресурсы и дополнительная литература для фрагментации

• «Руководство по таблицам стилей для печати в 2018 году», Рэйчел Эндрю, Smashing Magazine.
• «Разрывы столбцов», QuirksMode.org

Выбор типа макета: как выбрать?

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

Однако не бойтесь экспериментировать с различными способами создания дизайна, который вы задумали. Существует меньше мест, чем вы можете себе представить, где вы должны беспокоиться о том, что ваш выбор может вызвать реальную проблему. Начните с хорошей структуры документа и позаботьтесь о том, чтобы визуальное отображение не отключалось от этого порядка. Большая часть остального — это просто случай проверки того, что все работает так, как вы ожидаете, в ваших целевых браузерах.