Articles
Введение в CSS
Свойства CSS, связанные с макетом столбца

Свойства CSS, связанные с макетом столбца

Эта статья объясняет свойства CSS, связанные с макетом столбца.

Вы можете узнать, как описывать макеты столбцов.

YouTube Video

HTML для предварительного просмотра

css-columns.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-columns.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Columns</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Layout Related Properties</h2>
20        </header>
21        <article>
22            <h3>columns</h3>
23            <section style="width: 100%; height: 350px;">
24                <h4>Columns Example</h4>
25                <header><h4>columns: 100px 3; column-gap: 20px; column-rule: 2px solid #333;</h4></header>
26                <section class="sample-view">
27                    <section class="columns-container">
28                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
29                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
30                        <p>Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
31                        <p>Pellentesque malesuada diam eu sem finibus scelerisque.</p>
32                        <p>Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
33                        <p>Morbi in nibh in lorem vestibulum sollicitudin.</p>
34                    </section>
35                </section>
36            </section>
37        </article>
38        <article>
39            <h3>order</h3>
40            <section style="height: 300px;">
41                <header><h4>column-width: 250px</h4></header>
42                <section class="sample-view">
43                    <div class="container">
44                        <div class="item item-1">Item 1</div>
45                        <div class="item item-2">Item 2</div>
46                        <div class="item item-3">Item 3</div>
47                    </div>
48                </section>
49            </section>
50        </article>
51    </main>
52</body>
53</html>

Макет столбца

столбцы 

1.columns-container {
2    columns: 100px 3;
3    column-gap: 20px;
4    column-rule: 2px solid #333;
5}
6
7h5 {
8  column-span: all;
9}

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

  • В этом примере контент разделен на 3 столбца с промежутком 20px и границей 2px между столбцами. Кроме того, элемент h5 охватывает несколько столбцов.

columns — это сокращение для свойств column-width и column-count.

Синтаксис свойства columns 

1columns: <column-width> <column-count>;

columns следует следующему формату.

  • <column-width>: Указывает ширину каждого столбца. Вы можете использовать auto или любую единицу длины (например, px, em, % и т. д.) в качестве значения.
  • <column-count>: Указывает количество столбцов. Выражается числовым значением.
Свойство column-width 
1.container {
2  column-width: 250px;
3}

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

  • В этом примере ширина каждого столбца составляет 250px, а оптимальное количество столбцов рассчитывается на основе ширины контейнера.
column-count Свойство 
1.container {
2  column-count: 3;
3}

column-count — это свойство, которое явно задает, на сколько колонок делится указанный элемент. В отличие от column-width, это свойство фиксирует количество колонок.

  • В этом примере содержимое контейнера делится на три колонки.
column-gap Свойство 
1.container {
2  column-gap: 20px;
3}

column-gap — это свойство, которое задает расстояние (промежуток) между колонками. Существует также общее свойство для CSS Grid, называемое gap, но column-gap полезно, когда вы хотите настроить только промежутки между колонками.

  • В этом примере между колонками задан промежуток в 20 пикселей. Значение по умолчанию равно 16 пикселям.
column-rule Свойство 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule — это свойство для рисования линий между колонками. Синтаксис этого свойства схож с свойством border и позволяет указать ширину, стиль и цвет линии.

  • В этом примере между колонками отображается сплошная черная линия шириной 2 пикселя. column-rule можно разделить на следующие три свойства:.
    • column-rule-width: Указывает ширину линии.
    • column-rule-style: Указывает стиль линии. Например, доступны значения solid, dashed, dotted и т. д.
    • column-rule-color: Указывает цвет линии.
column-span Свойство 
1h5 {
2  column-span: all;
3}

column-span — это свойство, которое задает охват указанным элементом нескольких колонок. Оно в основном используется для таких элементов, как заголовки или заглавия. Могут быть заданы два значения:. - none: Элемент не охватывает колонки и помещается только в одну колонку. Это значение по умолчанию. - all: Элемент отображается охватывающим все колонки.

  • В этом примере элемент h5 отображается охватывающим несколько колонок.
column-fill Свойство 
1.container {
2  column-fill: balance;
3}

column-fill — это свойство, контролирующее распределение содержимого по колонкам. Обычно колонки заполняются как можно равномернее, но это свойство позволяет задать другой способ расположения. Доступны следующие значения:. - balance: Содержимое распределяется для равномерного заполнения колонок. Это значение по умолчанию. - auto: Колонки будут заполняться автоматически. Последняя колонка может стать длиннее.

  • Эта настройка регулирует распределение содержимого для равномерности.
Использование с медиазапросами 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

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

  • В этом примере, если ширина экрана 600px или меньше, будет одна колонка. Для экранов большей ширины содержимое будет разбито на 3 колонки по 200px каждая.

Резюме

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

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

order 

 1.container {
 2    all:initial;
 3    display: flex;
 4}
 5.item {
 6    padding: 10px;
 7    background-color: lightblue;
 8    margin: 5px;
 9}
10.item-1 {
11    order: 3;
12}
13.item-2 {
14    order: 1;
15}
16.item-3 {
17    order: 2;
18}

Свойство CSS order используется для управления порядком отображения элементов при использовании макетов Flexbox или Grid. Обычно элементы отображаются в порядке, указанном в HTML-разметке, но с помощью свойства order можно изменить их визуальный порядок. Это свойство помогает создавать гибкие пользовательские интерфейсы и строить адаптивные дизайны.

  • В этом примере элементы в HTML размечены как Item 1, Item 2, Item 3, но порядок отображения меняется на Item 2, Item 3, Item 1 благодаря CSS-свойству order.

Основы свойства order

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

Базовый синтаксис 
1.item {
2  order: <integer>;
3}
  • Вы можете указать любое целое число в качестве значения для свойства order. Можно использовать положительные, отрицательные или нулевые значения. Чем меньше значение, тем раньше элемент отображается, и чем больше значение, тем позже он отображается.

Использование положительных и отрицательных значений

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

1.item-1 {
2    order: -1;
3}
4.item-2 {
5    order: 2;
6}
7.item-3 {
8    order: 1;
9}

В этом примере у Item 1 значение order: -1, поэтому он отображается первым. Наоборот, у Item 3 значение order: 1, а у Item 2 - order: 2, поэтому они отображаются в таком порядке.

order в адаптивном дизайне

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

 1.item-1 {
 2    order: 1;
 3}
 4.item-2 {
 5    order: 2;
 6}
 7.item-3 {
 8    order: 3;
 9}
10
11/* Change the order on screens with a width of 800px or less */
12@media (max-width: 800px) {
13    .item-1 {
14        order: 3;
15    }
16    .item-2 {
17        order: 1;
18    }
19    .item-3 {
20        order: 2;
21    }
22}

В этом примере в обычном режиме элементы отображаются в порядке Item 1, Item 2, Item 3, но при ширине экрана менее 600px Item 2 отображается первым, затем Item 3, а Item 1 - последним.

Рекомендации по использованию свойства order

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

Заключение

Свойство CSS order - это мощный инструмент, который позволяет легко управлять порядком отображения элементов в макетах Flexbox или Grid. Используя положительные или отрицательные значения, вы можете гибко изменять порядок элементов, что особенно полезно в адаптивном дизайне. Однако необходимо обращать внимание на доступность и расхождение между визуальным порядком и структурой HTML. Если эти аспекты учтены должным образом, свойство order может быть полезным для создания более динамичных и гибких макетов.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

CSS свойства, связанные с сеткой