CSS Grid หรือ Flexbox: ไหนดีกว่าสำหรับการสร้างคอลัมน์?
เมื่อพูดถึงเลย์เอาท์ CSS เครื่องมือหลักสองอย่างที่คุณต้องการคือ Grid และ Flexbox แม้ว่าทั้งสองจะเก่งในการสร้างเค้าโครง แต่ก็มีจุดประสงค์ที่แตกต่างกันและมีจุดแข็งและจุดอ่อนที่แตกต่างกัน
ทำความเข้าใจพฤติกรรมที่แตกต่างกันที่แสดงโดยวิธีการจัดวางแต่ละวิธี รวมถึงสถานการณ์ที่ควรนำไปใช้
พฤติกรรมที่แตกต่างของ CSS Flexbox และ Grid
กระบวนการข้างต้นสามารถถ่ายทอดได้อย่างมีประสิทธิภาพโดยการสร้างไฟล์ index.html ภายในไดเร็กทอรีที่เลือกและรวมข้อมูลโค้ดที่ตามมาไว้ในนั้น:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flexbox vs Grid</h1>
<h2>Flexbox:</h2>
<div class="flex-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
<h2>Grid:</h2>
<div class="grid-container">
<div>Lorem.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
<div>Lorem ipsum dolor sit amet.</div>
<div>Lorem ipsum dolor sit amet consectetur.</div>
<div>Lorem ipsum dolor sit.</div>
</div>
</body>
</html>
ทั้งสองแผนกประกอบด้วยลูกหลานที่เหมือนกัน ดังนั้นจึงอนุญาตให้มีการนำวิธีการที่แตกต่างกันไปใช้ในแต่ละแผนก และอำนวยความสะดวกในการเปรียบเทียบ
คุณอาจสังเกตเห็นว่า HTML รวมเอาเอกสารข้อความที่มีสไตล์เรียกว่า"style.css"สร้างไฟล์นี้โดยเฉพาะภายในไดเร็กทอรีเดียวกับ"index.html"และแทรกการออกแบบที่ตามมาภายใน:
body {
padding: 30px;
}
h1 {
color: #A52A2A;
}
h2 {
font-size: large;
}
div:not([class]) {
outline: 2px solid black;
padding: 0.5em;
}
หน้าของคุณควรมีลักษณะดังนี้:
ในการแปลงองค์ประกอบ div เริ่มต้นให้เป็นคอลัมน์ที่ยืดหยุ่นภายในไฟล์ CSS สิ่งที่คุณต้องทำก็แค่รวมมาร์กอัปที่ให้ไว้ในสไตล์ชีต การดำเนินการนี้จะเปลี่ยนเค้าโครงขององค์ประกอบ div แรกอย่างมีประสิทธิภาพโดยใช้คุณสมบัติและคุณลักษณะที่เกี่ยวข้องกับการแสดงผลและคุณสมบัติ CSS แบบยืดหยุ่น
.flex-container {
display: flex;
}
นี่คือผลลัพธ์:
คอนเทนเนอร์ Flex ใช้กลยุทธ์การจัดวางที่เรียกว่า flexbox ซึ่งจัดเรียงรายการย่อยในแถวหรือคอลัมน์แนวนอนที่สามารถปรับแบบไดนามิกให้พอดีกับขนาดของพื้นที่การดูได้ ความสามารถในการปรับขนาดนี้เป็นพื้นฐานในการทำความเข้าใจหลักการของ flexbox ซึ่งเป็นพื้นฐานของอรรถประโยชน์ในการออกแบบเว็บไซต์
หากต้องการบรรเทาปัญหาที่อาจเกิดขึ้นกับคอลัมน์ที่ล้นภายในคอนเทนเนอร์ที่ยืดหยุ่น ขอแนะนำให้ใช้คุณสมบัติ flex-wrap
.flex-container {
display: flex;
flex-wrap: wrap;
}
คุณสมบัติ CSS flexbox ใหม่ช่วยให้สามารถใช้พื้นที่ได้อย่างมีประสิทธิภาพมากขึ้น โดยอนุญาตให้องค์ประกอบลูกไหลไปยังหลายบรรทัดเมื่อจำเป็น แทนที่จะทำให้ล้นหรือตัดทอนเหมือนในเวอร์ชันก่อนหน้า ความสำเร็จนี้เกิดขึ้นได้จากการนำคอนเทนเนอร์แบบยืดหยุ่นมาใช้โดยมีพื้นที่ว่างว่างที่คำนวณตามขนาดของคอนเทนเนอร์ ซึ่งสามารถแจกจ่ายให้กับคอนเทนเนอร์ย่อยตามขนาดและลำดับความสำคัญที่กำหนดโดยใช้’flex-grow’,‘flex-shrink’และคุณสมบัติ’พื้นฐานแบบยืดหยุ่น’ด้วยการอนุญาตให้องค์ประกอบย่อยเหล่านี้ล้อมรอบและดำเนินการต่อในบรรทัดถัดไปเมื่อพื้นที่ว่างไม่เพียงพอสำหรับองค์ประกอบทั้งหมดที่จะปรากฏในแถวเดียว คุณลักษณะนี้จะช่วยปรับเค้าโครงให้เหมาะสมและหลีกเลี่ยงปัญหาการออกแบบที่อาจเกิดขึ้นจากข้อจำกัดด้านความกว้างคงที่
เพื่อให้ได้เค้าโครงตามตารางสำหรับองค์ประกอบ ตัวที่สอง เราสามารถใช้กฎ CSS ต่อไปนี้:css.grid {display: grid;grid-template-columns: Repeat(auto-fill, minmax(200px, 1fr)); grid-gap: 5px;} จอแสดงผล : grid; กฎ ใช้โมเดลโครงร่าง"กริด"กับคลาส .grid ซึ่งช่วยให้เราสามารถกำหนดแถวและคอลัมน์ภายในคลาสนั้นได้ คุณสมบัติ grid-template-columns ระบุว่าเราต้องการสร้างตารางที่เติมอัตโนมัติโดยมีความกว้างขั้นต่ำ 200 พิกเซลและความกว้างสูงสุด 1 ส่วน (หมายความว่าแต่ละคอลัมน์จะใช้พื้นที่มากเท่าที่จำเป็น) ในที่สุดคุณสมบัติ grid-gap
.grid-container {
display: grid;
}
ข้อความที่กล่าวมาข้างต้นเพียงอย่างเดียวไม่ก่อให้เกิดผลใด ๆ ตามที่เป็นอยู่ เนื่องจากการดำเนินการมาตรฐานของกริดส่งผลให้องค์ประกอบที่เป็นส่วนประกอบถูกจัดเรียงในแนวตั้งทีละรายการตามค่าเริ่มต้น
หากต้องการเปลี่ยนจากเค้าโครงแถวเป็นการจัดเรียงแบบเรียงเป็นแนว จำเป็นต้องแก้ไขค่าของคุณสมบัติ grid-auto-flow ซึ่งมีค่าเริ่มต้นเป็น แถว เมื่อเปลี่ยนคุณสมบัตินี้เป็น คอลัมน์ รายการกริดจะแสดงเป็นคอลัมน์แนวตั้งแทนที่จะเป็นแถวแนวนอน
.grid-container {
display: grid;
grid-auto-flow: column;
}
นี่คือผลลัพธ์:
หากต้องการกำหนดจำนวนคอลัมน์ต่อแถวที่ต้องการอย่างแม่นยำภายในเค้าโครงตาราง ให้ใช้คุณสมบัติ"grid-template-columns"ใน CSS
.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
เพื่อให้ได้เลย์เอาต์ที่มีคอลัมน์หลายคอลัมน์ที่มีความกว้างเท่ากันซึ่งมีพฤติกรรมคล้ายกับ Flexbox เมื่อพูดถึงการตัดเนื้อหา เราอาจใช้คุณสมบัติการออกแบบที่ตอบสนอง เช่น"พอดีอัตโนมัติ"“เนื้อหาขั้นต่ำ"และ"เนื้อหาสูงสุด”
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}
Flexbox และ Grid บางครั้งมีลักษณะเป็นระบบโครงร่างแบบหนึ่งมิติและสองมิติตามลำดับ แต่การจำแนกประเภทนี้เป็นการเรียบง่ายเกินไป เนื่องจากทั้ง Flexbox และ Grid มีความสามารถในการสร้างเลย์เอาต์แบบสองมิติ แม้ว่าจะมีแนวทางและข้อจำกัดที่แตกต่างกันก็ตาม
แท้จริงแล้ว การควบคุมมิติเอกพจน์ของการจัดเรียงเป็นสิ่งสำคัญยิ่ง ตัวอย่างเช่น ให้คำนึงถึงภาพประกอบข้างต้น:
แท้จริงแล้ว ความสอดคล้องกันของคอลัมน์กริดนั้นมีความสำคัญเมื่อเปรียบเทียบกับการเปลี่ยนแปลงที่สังเกตได้ภายในแถว/คอลัมน์ของ Flexbox สิ่งสำคัญคือต้องรับรู้ว่าแต่ละแถว/คอลัมน์ภายในคอนเทนเนอร์ Flex ทำงานแยกจากกัน ส่งผลให้เกิดความคลาดเคลื่อนด้านขนาดตามเนื้อหาที่มีอยู่ ด้วยเหตุนี้ องค์ประกอบเหล่านี้จึงถูกมองว่าเป็นบล็อกที่แตกต่างกันมากกว่าคอลัมน์แบบเดิม
ตารางทำงานอย่างชัดเจนโดยการสร้างอาร์เรย์สองมิติโดยที่คอลัมน์จะถูกตั้งค่าล่วงหน้าให้คงที่ ตัวอย่างเช่น องค์ประกอบที่ประกอบด้วยเนื้อหาที่กระชับจะต้องมีมิติที่สอดคล้องกับองค์ประกอบอื่นที่มีข้อความที่กว้างขวาง ดังที่แสดงในภาพที่แนบมาด้วย
โดยพื้นฐานแล้ว CSS Grid มอบแนวทางในการออกแบบเลย์เอาต์ที่เป็นระเบียบมากกว่าเมื่อเทียบกับ flexbox ซึ่งให้ความสามารถในการปรับตัวและการตอบสนองที่มากกว่าในการสร้างอินเทอร์เฟซผู้ใช้แบบไดนามิก ชื่อเล่นของระบบเค้าโครงที่โดดเด่นทั้งสองนี้ไม่เหมาะสมไปกว่านี้อีกแล้ว
เมื่อใดจึงควรใช้ Flexbox
คุณต้องการใช้มิติโดยธรรมชาติของแต่ละคอลัมน์และแถวตามเนื้อหา หรือใช้การควบคุมที่มีโครงสร้างจากมุมมองขององค์ประกอบหลักหรือไม่ หากคุณเลือกใช้แบบแรก Flexbox นำเสนอโซลูชั่นที่เหมาะสมที่สุด
เพื่ออธิบายแนวคิดนี้ ขอให้เราตรวจสอบสถานการณ์สมมติโดยที่เรามีแถบนำทางแนวนอนซึ่งอยู่ภายในแท็กเปิดและปิด HTML รหัสที่อัปเดตจะมีลักษณะดังต่อไปนี้:
<h1>Flexbox vs. Grid</h1>
<header class="flex">
<h2>Flexbox</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
<header class="grid">
<h2>Grid</h2>
<nav>
<ul class="nav-list">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Service Information Goes Here</a></li>
<li><a href="">Blog Contact</a></li>
<li><a href=""></a></li>
</ul>
</nav>
</header>
แก้ไขเนื้อหาภายในสไตล์ชีตแบบเรียงซ้อนโดยใช้ข้อมูลโค้ดที่ให้มาแทนมาร์กอัปที่มีอยู่
.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solid black;
margin-bottom: 30px;
}
header > *:first-child {
border: var(--border-width) solid #FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid #90EE90;
}
นี่คือผลลัพธ์:
หากต้องการสร้างการนำทางที่ยืดหยุ่นโดยรายการเมนูแรกจะซ้อนกันในแนวตั้งบนหน้าจอขนาดเล็กและแสดงเป็นสองคอลัมน์ที่มีความกว้างเท่ากันบนหน้าจอขนาดใหญ่โดยใช้ CSS Grid ให้เพิ่มโค้ดต่อไปนี้ในสไตล์ชีทของคุณ:css/* Small screens/@media (max-width): 768px) {.container {display: flex;justify-content: space-between;}}/หน้าจอที่ใหญ่ขึ้น */@media (ความกว้างขั้นต่ำ: 769px) {.container {display: grid;grid-template-columns: ทำซ้ำ (2, auto);gap: 10px;}}และสำหรับรายการเมนูที่สองในรูปแบบรายการ คุณสามารถใช้แบบเดียวกันได้
.flex .nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid .nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
กำหนดประสิทธิภาพของแต่ละแนวทางโดยการเปรียบเทียบผลลัพธ์:
แท้จริงแล้ว การแสดงด้วยภาพแสดงให้เห็นว่า Flexbox ตอบสนองความต้องการในการจัดวางองค์ประกอบต่างๆ เคียงข้างกันอย่างไร ในขณะที่ยังคงรักษามิติตามธรรมชาติไว้ ในทางกลับกัน เส้นตารางซึ่งมีขนาดเซลล์ที่กำหนดไว้ล่วงหน้า อาจไม่ได้รูปลักษณ์ที่เหมาะสมที่สุดเมื่อนำไปใช้กับลิงก์ข้อความธรรมดา
เมื่อใดจึงควรใช้ CSS Grid
Grid นำเสนอข้อได้เปรียบที่ชัดเจนในสถานการณ์ที่ต้องการโครงสร้างคงที่สำหรับองค์ประกอบย่อยภายในคอนเทนเนอร์หลัก ตัวอย่างเช่น การจัดเรียงการ์ดหลายชุดที่มีความกว้างเท่ากัน โดยไม่คำนึงถึงขนาดเนื้อหาที่แตกต่างกัน สามารถทำได้อย่างมีประสิทธิภาพผ่าน Grid
แทนที่มาร์กอัปภายในแท็ก ด้วยข้อมูลโค้ดที่ให้มา ซึ่งมีชุดคำแนะนำสำหรับการสร้างและจัดรูปแบบหน้าเว็บโดยใช้ HTML และ CSS
<h1>Flexbox vs. Grids</h1>
<section class="cards">
<h2>Some cards</h2>
<div class="columns">
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">Fun Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
<article class="card">
<h3 class="card__title">A Longer Title Than Others</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
excepturi sit ea dolores totam veniam qui voluptates commodi,
perferendis et!</p>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Excavate</li>
</ul>
</article>
</div>
</section>
เพิ่ม CSS นี้:
.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}
การสาธิตครั้งแรกใช้เค้าโครง Flexbox สำหรับการเปรียบเทียบด้วยภาพกับเค้าโครงตาราง ผลลัพธ์ที่แสดงจะเป็นดังนี้:
อันที่จริง เป็นที่น่าสังเกตว่าคอลัมน์สุดท้ายแสดงขนาดที่ใหญ่ขึ้นเนื่องจากการวัดโดยธรรมชาติ ซึ่งระบบเค้าโครง Flexbox จัดการได้อย่างมีประสิทธิภาพ อย่างไรก็ตาม เพื่อแสดงผลคอลัมน์ทั้งหมดที่มีความกว้างสม่ำเสมอโดยใช้ Flexbox เราจะต้องแทนที่การวัดโดยธรรมชาตินี้โดยใช้วิธีการต่อไปนี้:
.columns > * {
flex: 1;
}
เค้าโครงตารางเป็นโซลูชันที่มีประสิทธิภาพเมื่อจำเป็นต้องมีการจัดเรียงองค์ประกอบเฉพาะ ด้วยการระบุจำนวนคอลัมน์ เราสามารถจัดตำแหน่งที่ต้องการได้อย่างง่ายดายโดยไม่จำเป็นต้องใช้สไตล์ CSS ที่ซับซ้อนหรือการปรับเปลี่ยน JavaScript
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}
นี่คือผลลัพธ์:
การใช้กริดในลักษณะนี้จะให้ประโยชน์เพิ่มเติม เนื่องจากช่วยให้ผู้ปกครองสามารถควบคุมเค้าโครงของบุตรหลานได้ ซึ่งหมายความว่าองค์ประกอบย่อยใหม่หรือที่ถูกลบออกจะไม่รบกวนโครงสร้างโดยรวม
ดังนั้นเมื่อใดที่คุณควรใช้ Grid หรือ Flexbox
เวอร์ชันภาษาอังกฤษขั้นสูง: เลย์เอาต์ตารางมีโครงสร้างที่มีการจัดระเบียบอย่างดีสำหรับองค์ประกอบหลัก โดยให้ความกว้างของคอลัมน์สม่ำเสมอและสม่ำเสมอในขนาดเนื้อหาต่างๆ
Flexbox นำเสนอเลย์เอาต์ที่ปรับเปลี่ยนได้ซึ่งขึ้นอยู่กับขนาดโดยธรรมชาติของส่วนประกอบ ทำให้เหมาะสำหรับสถานการณ์ที่ความยืดหยุ่นและการตอบสนองเป็นสิ่งสำคัญยิ่ง