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}

คุณสมบัติ columns ของ CSS ช่วยให้สามารถแสดงเนื้อหาที่ถูกแบ่งออกเป็นหลายคอลัมน์ได้อย่างสะดวก เพียงการกำหนดค่าเดียว คุณสามารถตั้งค่าความกว้างของคอลัมน์และจำนวนคอลัมน์ได้ง่าย ทำให้เหมาะกับการออกแบบที่ตอบสนองทุกอุปกรณ์ สิ่งนี้มีประสิทธิภาพอย่างยิ่งเมื่อจำเป็นต้องจัดเลย์เอาต์ที่ข้อความแสดงผลในแนวตั้งและจัดวางเป็นหลายคอลัมน์ เช่น ในหนังสือพิมพ์หรือแมกกาซีน

  • ในตัวอย่างนี้ เนื้อหาถูกแบ่งออกเป็น 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 มีประโยชน์เมื่อคุณต้องการปรับแต่งขอบเฉพาะระหว่างคอลัมน์

  • ในตัวอย่างนี้ มีระยะห่าง 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: คอลัมน์จะถูกเติมอัตโนมัติ คอลัมน์สุดท้ายอาจมีความยาวมากกว่า

  • การตั้งค่านี้จะปรับให้เนื้อหาสามารถกระจายอย่างสม่ำเสมอ
การใช้งานร่วมกับ Media Queries 
1.container {
2  columns: 200px 3;
3}
4
5@media (max-width: 600px) {
6  .container {
7    columns: 1;
8  }
9}

คุณสมบัติ columns สามารถใช้งานร่วมกับ media queries เพื่อรองรับการออกแบบที่ตอบสนอง คุณสามารถเปลี่ยนจำนวนคอลัมน์และความกว้างของคอลัมน์ตามขนาดหน้าจอที่แตกต่างกันได้อย่างยืดหยุ่น

  • ในตัวอย่างนี้ เมื่อความกว้างของหน้าจอเท่ากับหรือน้อยกว่า 600px จะมี 1 คอลัมน์ สำหรับหน้าจอที่กว้างกว่า จะถูกแบ่งออกเป็น 3 คอลัมน์ โดยแต่ละคอลัมน์มีความกว้าง 200px

สรุป

คุณสมบัติ columns ของ CSS เป็นเครื่องมือที่ทรงพลังสำหรับการสร้างเลย์เอาต์แบบหลายคอลัมน์ได้อย่างง่ายดาย คุณสมบัตินี้มีประโยชน์มากสำหรับการออกแบบที่ตอบสนองและเลย์เอาต์ข้อความที่ให้ความสำคัญกับความสามารถในการอ่าน ด้วยการผสมผสานคุณสมบัติที่เกี่ยวข้อง คุณสามารถปรับแต่งจำนวนและความกว้างของคอลัมน์ ช่องว่าง การตกแต่ง และอื่นๆ ได้อย่างยืดหยุ่น

สิ่งนี้ช่วยให้สามารถนำดีไซน์ที่ซับซ้อนได้ง่ายยิ่งขึ้น ดังนั้นโปรดใช้ประโยชน์จากคุณสมบัตินี้

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}

คุณสมบัติ order ของ CSS ใช้ควบคุมลำดับการแสดงผลขององค์ประกอบเมื่อใช้เลย์เอาต์ Flexbox หรือ Grid โดยปกติแล้ว องค์ประกอบจะถูกแสดงผลตามโครงสร้าง HTML แต่คุณสามารถเปลี่ยนลำดับการแสดงผลด้วยคุณสมบัติ order คุณสมบัตินี้ช่วยในการออกแบบอินเตอร์เฟซผู้ใช้งานที่ยืดหยุ่นและสร้างการออกแบบที่ตอบสนอง

  • ในตัวอย่างนี้ รายการถูกกำหนดใน HTML เป็น Item 1, Item 2, Item 3 แต่ลำดับการแสดงผลเปลี่ยนไปเป็น Item 2, Item 3, Item 1 เนื่องจากคุณสมบัติ order ของ CSS

พื้นฐานของคุณสมบัติ order

คุณสมบัติ order ถูกใช้กับไอเท็มที่อยู่ภายใน Flexbox หรือ Grid containers คุณกำหนดลำดับการจัดวางโดยตั้งค่าตัวเลขจำนวนเต็มให้กับแต่ละรายการ โดยค่าเริ่มต้น 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 tree ซึ่งอาจส่งผลกระทบต่อเครื่องมือสำหรับการเข้าถึง เช่น เครื่องอ่านข้อความบนหน้าจอ เมื่อมีการเปลี่ยนแปลงลำดับ การนำทางด้วยคีย์บอร์ดและเทคโนโลยีช่วยเหลืออื่นๆ อาจทำงานไม่เป็นไปตามที่คาดหวัง ดังนั้น จำเป็นต้องพิจารณาอย่างรอบคอบถึงผลกระทบต่อประสบการณ์ของผู้ใช้เมื่อใช้ order

สรุป

คุณสมบัติ order ของ CSS เป็นเครื่องมือที่ทรงพลังที่ช่วยให้คุณควบคุมลำดับการแสดงผลขององค์ประกอบในเลย์เอาต์แบบ Flexbox หรือ Grid ได้อย่างง่ายดาย ด้วยการใช้ค่าบวกหรือลบ คุณสามารถเปลี่ยนลำดับขององค์ประกอบได้อย่างยืดหยุ่น ซึ่งมีประโยชน์อย่างยิ่งในการออกแบบที่ตอบสนองต่อขนาดหน้าจอ อย่างไรก็ตาม ควรให้ความสนใจกับการเข้าถึงและความแตกต่างระหว่างลำดับในเชิงมองเห็นและโครงสร้าง HTML หากพิจารณาเรื่องเหล่านี้อย่างเหมาะสม คุณสมบัติ order จะมีประโยชน์ในการสร้างเลย์เอาต์ที่มีความยืดหยุ่นและมีความไดนามิกมากขึ้น

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับการจัดเลย์เอาท์แบบกริด