與欄佈局相關的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<section class="columns-container">
27 <h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</h5>
28 <p>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id odio sit amet eros feugiat semper.</p>
29 <p>2. Donec vehicula est non sapien sollicitudin, id tincidunt velit volutpat.</p>
30 <p>3. Pellentesque malesuada diam eu sem finibus scelerisque.</p>
31 <p>4. Integer eget dolor nec est dignissim fermentum ut eget nunc.</p>
32 <p>5. Morbi in nibh in lorem vestibulum sollicitudin.</p>
33</section>
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 屬性可以與媒體查詢結合使用，以支持響應式設計。您可以根據不同的屏幕尺寸靈活改變列數和列寬。
- 在此範例中，當屏幕寬度為 600px 或更窄時，將只有 1 列。對於更寬的屏幕，內容將被分為 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，但由於使用了 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 頻道。