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>
24                <header><h4>HTML</h4></header>
25<pre>
26&lt;section class=&quot;columns-container&quot;&gt;
27    &lt;h5&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.&lt;/h5&gt;
28    &lt;p&gt;1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.&lt;/p&gt;
29    &lt;p&gt;2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.&lt;/p&gt;
30    &lt;p&gt;3. Pellentesque malesuada diam eu sem finibus scelerisque.&lt;/p&gt;
31    &lt;p&gt;4. Integer eget dolor nec est dignissim fermentum ut eget nunc.&lt;/p&gt;
32    &lt;p&gt;5. Morbi in nibh in lorem vestibulum sollicitudin.&lt;/p&gt;
33&lt;/section&gt;
34</pre>
35                <header><h4>HTML+CSS</h4></header>
36                <section class="sample-view">
37                    <section class="columns-container">
38                        <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
39                        <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
40                        <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
41                        <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
42                        <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
43                        <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
44                    </section>
45                </section>
46            </section>
47        </article>
48        <article>
49            <h3>order</h3>
50            <section style="height: 300px;">
51                <header><h4>column-width: 250px</h4></header>
52                <section class="sample-view">
53                    <div class="container">
54                        <div class="item item-1">Item 1</div>
55                        <div class="item item-2">Item 2</div>
56                        <div class="item item-3">Item 3</div>
57                    </div>
58                </section>
59            </section>
60        </article>
61    </main>
62</body>
63</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、% 和其他长度单位作为值。
  • <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 在您只想自定义列间距时非常有用。

  • 在这个例子中，每列之间有一个 20px 的间距。默认值是 16px。
column-rule 属性 
1.container {
2  column-rule: 2px solid #333;
3}

column-rule 是一个用来在列之间绘制线条的属性。它的语法类似于 border 属性，可以让您指定线条的宽度、样式和颜色。

  • 在这个例子中，列之间显示了一条宽度为 2px 的黑色实线。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 属性可以与媒体查询结合使用以支持响应式设计。您可以根据不同的屏幕大小灵活地更改列数和列宽。

  • 在这个例子中，当屏幕宽度为600像素或更小时，将只有1列。对于更宽的屏幕，它将被分为3列，每列宽200像素。

总结

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，但由于 CSS 的 order 属性，显示顺序变为 Item 2、Item 3、Item 1。

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 属性在创建更具动态性和灵活性的布局方面将非常有用。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

与网格布局相关的CSS属性Flexbox、Grid 和 Column 布局的比较