От автора: за последние несколько лет CSS Layout резко изменился, как и способ разработки интерфейса наших сайтов. Теперь у нас есть реальный выбор с точки зрения методов компоновки, которые мы используем в CSS для разработки наших сайтов, а это значит, что нам часто приходится выбирать, какой подход принять. В этой статье я расскажу о различных методах макета, которые вам доступны, объясняя основы того, как они используются и для чего они используются.
Это руководство для вас, если вы новичок в CSS и задаетесь вопросом, какой лучший способ выбрать к макету, но также, если вы опытный разработчик в другой области стека, который хочет убедиться, что ваше понимание макета сегодня актуально. Я не пытался полностью документировать каждый метод макета здесь, поскольку это создало бы книгу, а не статью. Вместо этого я даю обзор того, что доступно вам, с большим количеством ссылок, чтобы узнать больше.
Нормальный поток
Если вы берете HTML-страницу, на которой CSS не применяется для изменения макета, элементы будут отображаться в обычном режиме. В нормальном потоке окна отображаются один за другим в зависимости от режима записи документа. Это означает, что, если у вас есть режим горизонтальной записи, в котором предложения работают слева направо или справа налево, нормальный поток отображает блоки элементов уровня блока один за другим по вертикали вниз по странице.
Если вы находитесь в режиме вертикальной записи, тогда предложения выполняются вертикально, поэтому нормальный поток будет блокировать блоки горизонтально.
Изменение в блочном и встроенном направлениях с помощью режима записи
Обычный поток начинается с любого макета: при создании макета CSS вы берете блоки и заставляете их делать что-то отличное от обычного потока.
Структурируйте свой документ, чтобы воспользоваться обычным потоком
Вы можете воспользоваться нормальным потоком, гарантируя, что ваш документ начинается в хорошо структурированном виде. Представьте себе, что если вместо этой концепции нормального потока — браузер складывал все ваши поля вверх в углу друг над другом, пока вы не создали макет. Это означало бы, что вам нужно будет размещать все на странице. Вместо этого браузер отображает наш контент в удобном для чтения виде.
Если ваш CSS не загружается, пользователь все равно может прочитать содержимое, а пользователи, которые вообще не получают CSS (например, кто-то, кто использует программу чтения с экрана), будут доставлять контент в том порядке, в котором он находится в документе. Это делает важным с точки зрения доступности, что ваш HTML-документ начинает жизнь в хорошем состоянии; тем не менее, это также упростит вашу жизнь как веб-разработчика. Если ваш контент находится в том порядке, в котором пользователь будет читать его, вам не нужно будет делать значительные изменения в макете, чтобы получить его в нужном месте. С новыми методами компоновки вы можете быть удивлены, как мало вам нужно.
Поэтому, прежде чем думать о макете, подумайте о структуре документа и порядке, в котором вы хотите, чтобы ваш контент читался сверху страницы.
Уход от нормального потока
Когда у нас есть хорошо структурированный документ, нам нужно решить, как это сделать, и превратить его в наш желаемый макет. Это потребует отхода от нормального потока, для частей нашего документа. У нас есть целый набор методов компоновки. Первый метод, который мы рассмотрим — это float, так как float — отличная демонстрация того, что нужно для того, чтобы вывести элемент из нормального потока.
Floats
Floats используются для сдвига блока влево или вправо, позволяя отображать содержимое, обернутое вокруг него.
Используйте float свойство CSS и значение left или right, чтобы добавить элементу обтекание. По умолчанию значение float равно none.
.item { float: left; }
Стоит отметить, что когда вы обтекаете элемент, а текст обтекает его, то происходит то, что линейные блоки этого содержимого сокращаются. Если вы обтекаете элемент, и в следующем поле, содержащем ваш текст, применен цвет фона, вы можете увидеть, что этот фоновый цвет будет выполняться под плавающим элементом.
Цвет фона в содержимом выполняется под float
По мере того, как вы сокращаете строковые поля, чтобы сделать пространство между float и текстом обертывания, вы должны установить отступ для плавающего элемента. Поля текста будут просто перемещать текст с края контейнера. Для изображения, расположенного слева, вы добавили бы поле справа и снизу, предполагая, что вы хотите, чтобы изображение закралось в верхнюю и левую части контейнера.
Очистка float
После того, как вы разместили элемент, все следующие элементы будут обтекать этот плавающий элемент до тех пор, пока они не упадут снизу и нормальный поток не будет продолжен. Если вы хотите предотвратить это, вам нужно очистить float.
На элементе, который вы хотите начать отображать после float, добавьте свойство clear со значением left, чтобы указать очистку элемента, расположенного слева, right, чтобы очистить элемент, плавающий вправо, или both, чтобы очистить любые float.
.clear { clear: both; }
Вышеуказанный метод работает, если вы хотите, чтобы элемент запускался после float. Это не поможет, если вы окажетесь в ситуации, когда у вас есть плавающий элемент внутри блока, с некоторым текстом рядом. Если текст короче, чем плавающий элемент, поле будет рисоваться под содержимым и игнорировать float. Как мы уже узнали, float сокращает линейные поля, остальная часть макета продолжается в нормальном потоке.
Блок вокруг текста не очищает поплавок
Чтобы предотвратить эту ситуацию, нам нужно очистить что-то внутри блока. Мы могли бы добавить пустой элемент и установить это, чтобы очистить все. Это предполагает использование пустых div в нашем документе, что не является идеальным и может быть невозможным, если ваша страница создается CMS. Таким образом, типичный метод очищающих float — это то, что называется чистым исправлением. Этот метод работает, добавляя CSS-сгенерированный контент и устанавливая его для clear both.
Контекст форматирования блоков
Другой способ очистить float внутри поля — вызвать контекст форматирования блоков (BFC) на контейнере. Контекст форматирования блоков содержит все внутри него, которое включает в себя плавающие элементы, которые больше не могут вытолкнуть нижнюю часть окна. Существует несколько способов принудительного BFC, наиболее часто используемого при очистке float, чтобы установить свойство переполнения для значения, отличного от отображаемого по умолчанию.
.container { overflow: auto; }
Использование overflow таким образом, как правило, будет работать, однако, в определенных ситуациях вы можете получить обрезанные тени или нежелательные полосы прокрутки на элементе. Это также может выглядеть немного запутанным в вашей таблице стилей: вы установили переполнение, потому что вам нужны полосы прокрутки или просто для того, чтобы получить эту способность очистки?
Чтобы сделать намерение более ясным и предотвратить создание BFC, вызывающего нежелательные побочные эффекты, вы можете использовать flow-root как значение свойства display. Единственное, что display: flow-root делает, это создает BFC, тем самым очистив ваши float без каких-либо других проблем.
.container { display: flow-root; }
Использование устаревших float
До появления новых методов компоновки для создания макетов столбцов использовались float, этот метод работал, предоставляя набор элементов шириной и устанавливая их для размещения рядом друг с другом. Тщательное управление процентным размером этих плавающих блоков может создать эффект сетки.
Я бы не предложил начать новый дизайн и использовать этот метод. Тем не менее, он будет оставаться на существующих площадках на многие годы вперед. Поэтому, если вы сталкиваетесь с дизайном, где почти все, кажется, плавают, это используется в технике.
Позиционирование
Чтобы удалить элемент из обычного потока или сдвинуть его со своего места в нормальном потоке, вы можете использовать свойство position в CSS. Когда в нормальном потоке элементы имеют static position. Элементы отображаются один за другим в блочном измерении, и если вы прокручиваете страницу, которую они прокручивают вместе с ней.
При изменении значения 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 установленным для чего-то другого, кроме значения по умолчанию для него. В этом случае этот элемент станет содержащим блоком, а ваши смещения связаны с этим блоком, а не с окном просмотра.
Прикрепленное позиционирование
position: sticky на элементе приведет к тому, что элемент будет прокручиваться вместе с документом так же, как и при нормальном потоке, однако, как только он достигнет определенной точки относительно окна просмотра (используя обычные смещения), он «прилипает» и начинает действуйте как position: fixed . Это более новое значение и менее хорошо поддерживается в браузерах, чем другие методы, однако он возвращается только к прокрутке страницы os — это значение, которое прекрасно используется в качестве улучшения, не вызывая проблем, если оно не поддерживается.
.item { position: sticky; top: 0; }
Это способ создания популярного эффекта прокрутки навигационной панели с содержимым, а затем остановки в верхней части окна просмотра, чтобы оставаться на экране при прокрутке содержимого.
Flex Layout
Гибкая компоновка блоков (Flexbox) — это метод компоновки, разработанный для одномерной компоновки. Одномерное означает, что вы хотите выложить контент в строке или в виде столбца. Чтобы превратить ваш элемент в гибкий макет, вы используете свойство display со значением flex.
.container { display: flex; }
Прямые дети этого элемента становятся гибкими элементами, они выкладываются как ряд, выровненный по отношению к стартовому краю в линейном направлении.
Оси Flexbox
В приведенном выше примере я описал элементы как выровненные по отношению к начальному краю нашей строки в строчном направлении, вместо того, чтобы описывать их как выровненные слева. Наши элементы выложены подряд, потому что значение по умолчанию для свойства flex-direction является строковым, это создает строку в строчном направлении, направление, по которому выполняются предложения. Поскольку мы работаем на английском языке, слева направо, начало строки находится слева, и поэтому наши объекты начинаются там. Таким образом, значение направления flex-direction определяет основную ось Flexbox.
Поэтому поперечная ось проходит по главной оси под прямым углом. Если ваше flex-direction является строковым, а ваши элементы отображаются в строчном направлении, ваша поперечная ось работает в направлении «block». Если ваше flex-direction – column, то элементы работают в направлении блока, тогда ваша поперечная ось находится вдоль строки.
Если вы используете мышление с точки зрения основной и поперечной оси при работе с Flexbox, это облегчит многое.
Направление и порядок
Flexbox дает вам возможность изменять направление элементов на главной оси, используя значение flex-direction сгиба в row-reverse или row-reverse column-reverse.
Вы также можете изменить порядок отдельных элементов гибкости с помощью свойства order. Однако при этом вы должны проявлять большую осторожность, так как это может вызвать проблему для любого пользователя, который перемещается с помощью клавиатуры, а не мыши или сенсорного экрана, поскольку порядок вкладок документа будет соответствовать порядку, в котором находится содержимое. Дополнительную информацию см. в разделе ниже на Visual и Document Order.
Свойства Flex
Свойства 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, когда у вас есть куча вещей, которые вы хотите растянуть и проглотить в контейнер в одном измерении. Если вы попытаетесь выстроить строки в строках и столбцах, вам понадобится Grid, и в этом случае Flexbox, вероятно, не является инструментом для работы.
Grid Layout
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.
Grid-терминология
Сетка всегда имеет две оси: Inline Axis работает в том направлении, в котором слова выложены на странице и блочная ось в том направлении, в котором выложены блоки.
Контейнер Grid — это элемент, который вы установили для display: grid. Затем у вас есть Grid Lines, созданные по трекам столбцов и строк, которые вы указали при использовании grid-template-columns grid-template-rows. Самая маленькая единица на сетке (между четырьмя пересекающимися линиями) известна как сетка, в то время как коллекция сетчатых ячеек, составляющих полный прямоугольник, называется сеткой.
Между каждой дорожкой сетки пробегают линии сетки
Треки сетки расположены между любыми двумя линиями
Ячейки сетки — это наименьшая единица на сетке, сетка — одна или несколько ячеек, образующих прямоугольную область
Автоматическое размещение сетки
Как только вы создаете сетку, прямые дети из вашего сетчатого контейнера начинают выкладываться, по одному в каждой ячейке сетки. Они выполняют это в соответствии с правилами автоматического размещения сетки. Эти правила гарантируют, что каждый элемент помещается в пустую ячейку, избегая перекрытия элементов.
Любой прямой дочерний элемент контейнера сетки, который вы не предоставили, будет помещен в соответствии с правилами автоматического размещения. В приведенном ниже примере я заставил каждый третий элемент охватить двухстрочные треки, но все еще автоматически помещается в терминах стартовой строки.
Базовое позиционирование на основе строки
Самый простой способ позиционирования элементов в Grid — это позиционирование на основе строки, предоставляющее правилам элемента, чтобы он указывал, что он распространяется от одной линии сетки к другой. Например, если у меня есть сетка с тремя треками столбцов и треками из двух строк, я могу поместить элемент из строки столбца 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: "a a b b" "a a c c";
}
При использовании этого метода необходимо запомнить несколько правил. Если вы хотите, чтобы элемент охватывал несколько ячеек, вы должны повторить это имя. Областям необходимо сформировать полный прямоугольник, без L-образных или кусочков Тетриса! Сетка должна быть полной — каждая ячейка должна быть заполнена. Если вы хотите оставить пустое пространство, заполните эту ячейку . символом. Например, в нижеприведенном CSS я оставляю нижний правый угол пустым.
.container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "a a b b" "a a c .";
}
Это хороший способ работать, так как любой, кто смотрит на CSS, может точно увидеть, как будет работать макет.
Визуальный и документный порядок
В начале этой статьи я предложил начать с вашего документа в порядке, который имеет смысл читать сверху вниз, поскольку это было бы полезно как для доступности, так и с точки зрения того, как работает макет CSS. Из нашего краткого введения в Flexbox и CSS Grid вы можете видеть, что можно было бы перемещать вещи довольно резко из этого порядка. Это может вызвать проблемы.
Браузеры будут следовать за источником документа для любого не визуального использования документа. Поэтому программа чтения с экрана считывает заказ документа, и любой, кто использует клавиатуру для навигации, будет вставлять документ в том порядке, в котором он находится в источнике, а не в порядке отображения. Многие пользователи экранных читателей не являются полностью слепыми, и поэтому могут использовать устройство чтения с экрана вместе с возможностью видеть, где они находятся в документе. Для обоих этих случаев дисплей, который смешался по сравнению с источником, может вызвать очень запутанную ситуацию.
Будьте в курсе, когда вы перемещаете элементы из порядка, который они находятся в источнике. Если вы обнаружите, что переупорядочиваете порядок элементов в CSS, действительно ли вы должны вернуться и реорганизовать свой документ? Проверьте, можете ли вы по-прежнему отображать свой документ, и визуальный порядок имеет смысл.
Генерация блоков
Все, что вы помещаете на веб-страницу, создает окно, и все в этой статье описывает, как вы можете использовать CSS для компоновки этих полей в вашем дизайне, однако при определенных обстоятельствах вы можете вообще не создавать блок. Существует два значения свойства display, которые имеют дело с ситуациями, когда вы не хотите использовать поля.
Не создавайте окно или содержимое ( display: none )
Если вы хотите, чтобы элемент и весь контент этого элемента, включая любые дочерние элементы, не были сгенерированы, вы можете использовать display: none. Элемент теперь не будет отображаться, и место, где оно было бы, не будет зарезервировано.
.item { display: none; }
Не создавайте этот элемент, а создавайте дочерние элементы ( display: contents )
Более новым значением display является display: contents. Применить display: contents к элементу, и поле для этого элемента не будет сгенерировано, но любые дети будут сгенерированы как обычно. Это может быть полезно, если вы хотите, чтобы непрямые дочерние элементы стали частью гибкой или сетки.
В приведенном ниже примере первый элемент гибкости содержит два вложенных дочерних элемента, но поскольку он установлен для display: contents его окна не снимается, а дети отображаются так, как если бы они были прямым дочерним элементом и стали элементами гибкости. Удалить display: contents этого элемента, чтобы увидеть, как изменяется макет.
Выравнивание
До недавнего времени выравнивание было чем-то сложным предметом в Интернете, с очень ограниченными способами правильного выравнивания элементов внутри блоков. Это изменяется с помощью модуля выравнивания блоков, который в настоящее время вы будете использовать при управлении выравниванием в контейнерах Grid и Flex. В будущем другие методы компоновки также будут реализовывать эти свойства выравнивания. Список свойств выравнивания, подробно описанных в спецификации выравнивания блоков, выглядит следующим образом:
justify-content
align-content
place-content
justify-items
align-items
place-items
justify-self
align-self
place-self
row-gap
column-gap
gap
Поскольку модели макетов имеют разные функции, выравнивание работает несколько по-разному в зависимости от используемой модели макета. Давайте посмотрим, как выравнивание работает с некоторыми простыми сетками и гибкими макетами.
Свойства align-items и justify-items устанавливают свойства align-self и justify-self как группу. Эти свойства выравнивают элементы внутри их области сетки.
Свойства align-content и justify-content выравнивают дорожки сетки, где в Grid Container больше места, чем необходимо для отображения дорожек.
В Flexbox выровняйте align-items и align-self с выравниванием по оси поперечного сечения, в то время как justify-content имеет дело с распределением пространства на главной оси.
На поперечной оси вы можете использовать align-content, где вы обернули гибкие линии и дополнительное пространство в контейнере flex.
См. ресурсы для некоторых ссылок, которые подробно обсуждают вставку «Выравнивание» в разных методах компоновки. На самом деле стоит потратить некоторое время на понимание того, как работает выравнивание, поскольку это упростит работу с Flexbox, Grid и будущими методами компоновки.
Разделители строк и столбцов
Макет с несколькими столбцами имеет свойство column-gap, а спецификация Grid Layout — до недавнего времени — свойства grid-column-gap, grid-row-gap и grid-gap. Они теперь удалены из спецификации Grid и добавлены в Box Alignment. В то же время свойства grid- префиксом были переименованы в column-gap, column-gap row-gap и gap. Браузеры будут использовать префиксные свойства для новых переименованных, поэтому вам не нужно беспокоиться, если вы сейчас используете более старые имена в своем коде.
Переименование означает, что эти свойства могут также применяться к другим методам компоновки, причем очевидным кандидатом является Flexbox. В то время как ни один браузер не поддерживает пробелы в Flexbox на данный момент, в будущем мы должны иметь возможность использовать column-gap row-gap для создания пространства между элементами flex.
Многоколоночный макет
Макет с несколькими столбцами — это тип макета, который позволяет создавать столбцы, например, вы можете найти в газете. Блок разбивается на столбцы, и вы читаете столбец в направлении блока, затем возвращаетесь в начало следующего столбца. Хотя чтение контента таким образом не всегда полезно в веб-контексте, поскольку люди не хотят прокручивать вверх и вниз, чтобы читать, это может быть полезным способом отображения небольшого количества контента или сбрасывания наборов флажков или другие небольшие элементы пользовательского интерфейса.
Макет с несколькими столбцами также может использоваться для отображения наборов карт или продуктов с разной высотой.
Установка ширины столбца
Чтобы установить оптимальную ширину столбца и указать браузеру, чтобы отображать как можно больше столбцов на этой ширине, используйте следующий CSS:
.container { column-width: 300px; }
Это создаст максимально много 300 пиксельных столбцов, и любое оставшееся пространство будет разделяться между столбцами. Поэтому, если ваше пространство не делит на 300 пикселей без остатка, вполне вероятно, что ваши столбцы будут немного шире, чем 300 пикселей.
Установка числа столбцов
Вместо того, чтобы устанавливать ширину, вы можете установить количество столбцов, используя число column-count. В этом случае браузер будет разделять пространство между количеством запрошенных столбцов.
.container { column-count: 3; }
Если вы добавите column-width column-count и column-count, то свойство column-count действовать как максимум. В приведенном ниже коде столбцы будут добавляться до тех пор, пока не будет три столбца, и в этом случае любое дополнительное пространство будет разделяться между этими тремя столбцами, даже если для дополнительного столбца было достаточно места.
.container { column-width: 300px; column-count: 3; }
Правила пробелов и столбцов
Вы не можете добавлять поля или отступы в отдельные столбцы столбцов, а для выделения столбцов используется свойство column-gap. Если вы не укажете column-gap в column-gap, по умолчанию будет 1em чтобы предотвратить столкновение столбцов друг с другом. Это другое поведение, связанное с тем, как указывается column-gap для других методов макета, где он по умолчанию равен 0. Вы можете использовать любую единицу длины для своего разрыва, включая 0, если вы вообще не хотите разрыва.
Свойство column-rule дает вам возможность добавить правило между двумя столбцами. Это сокращение от column-rule-width column-rule-color, column-rule-width column-rule-color column-rule-style , а также действует так же, как и border . Обратите внимание, что правило не занимает какое-либо свое место. Он лежит на вершине зазора, чтобы увеличить или уменьшить пространство между правилом и содержимым, которое необходимо увеличить или уменьшить column-gap.
Разрешение элементам занимать колонки
Вы можете охватить элемент внутри мультиколоночного контейнера по всем столбцам, используя свойство column-span этого элемента.
h3 { column-span: all; }
Когда происходит column-span, многоячеечный контейнер по существу останавливается выше охватывающего элемента, поэтому содержимое формируется в столбцы над элементом, а затем оставшееся содержимое формирует новый набор столбцов столбцов ниже охватывающего элемента.
Вы можете использовать только column-span: all или column-span: none; невозможно охватить некоторые из столбцов. На момент написания статьи Firefox не поддерживает свойство column-span.
Фрагментация
Макет нескольких столбцов является примером фрагментации. В этом случае содержимое разбивается на столбцы. Это, однако, очень похоже на то, как контент разбивается на страницы при печати. Этот процесс рассматривается спецификацией фрагментации, и эта спецификация содержит свойства, которые помогают контролировать нарушение содержимого.
Например, если вы выложили набор карт с использованием multicol, и вы хотите убедиться, что карта никогда не разбивается пополам, разделившись между двумя столбцами, вы можете использовать свойство break-inside со значением avoid. Из-за причин совместимости с браузером вы также захотите использовать устаревшее page-break-inside свойство.
.card { page-break-inside: avoid; break-inside: avoid; }
Если вы хотите избежать перерыва сразу после заголовка, вы можете использовать это break-after свойство.
.container h2 { page-break-after: avoid; break-after: avoid; }
Эти свойства могут использоваться при подготовке таблицы стилей печати, а также в multicol. В приведенном ниже примере у меня есть три абзаца в многоточечном контейнере, который разбивается на три столбца. Я дал break-inside: avoid на p элемент означает, что пункты в конечном итоге один в каждом столбце (даже если это делает столбцы неравномерным).
Выбор типов макетов: как выбрать?
Большинство веб-страниц будут использовать смесь этих типов макетов, и каждая спецификация определяет, как они взаимодействуют друг с другом. Например, у вас может быть Grid Layout, в котором некоторые элементы сетки также являются контейнерами Flex. Некоторые из этих гибких контейнеров могут быть содержащим блоком для позиционированного элемента или иметь изображение, плавающее внутри. Спецификации написаны с ожиданием, что мы будем смешивать модели макета, в соответствии с тем, что лучше всего подходит для контента, который мы планируем. В этом руководстве я попытался дать общий обзор основного способа поведения каждого типа макета, чтобы помочь вам оттолкнуть то, что может быть лучшим способом добиться определенного эффекта.
Однако не бойтесь играть с разными способами создания дизайна, который вы имеете в виду. Есть меньше мест, чем вы можете себе представить, где вам следует беспокоиться о ваших вариантах, вызывающих какую-либо реальную проблему. Начните с хорошей структуры документа и следите за тем, чтобы вы не отключали визуальный дисплей от этого заказа. Большая часть остального — это всего лишь случай тестирования того, что все работает так, как вы ожидаете в своих целевых браузерах.
Автор: Rachel Andrew
Источник: https://www.smashingmagazine.com/
Редакция: Команда webformyself.
