สิ่งหนึ่งที่เราต้องทำในฐานะนักพัฒนาคือการหาวิธีแก้ไขปัญหาเมื่อมีโครงการใหม่ให้ทำ เมื่อทำงานกับเว็บไซต์ที่ตอบสนอง เรามักจะเลือกระหว่าง CSS Grid และ CSS Flexbox เพื่อจัดวางเว็บไซต์ของเรา บทความนี้จะพยายามแยกแยะความแตกต่างระหว่าง Grid และ Flexbox และควรเลือกสิ่งใดสิ่งหนึ่งมากกว่ากัน
Flexbox – ภาพรวมโดยย่อ
CSS Flexbox นั้นเป็นโมเดลกล่องแบบตอบสนอง ช่วยให้วางตำแหน่งได้ดีขึ้นภายในคอนเทนเนอร์และใช้งานได้ง่ายตราบเท่าที่คุณรู้ถึงความสามารถของมัน
โมเดลกล่องแบบยืดหยุ่นยังคงใช้คุณสมบัติทั้งหมดของแบบจำลองกล่องเพื่อควบคุมระยะขอบ ช่องว่างภายใน เส้นขอบ และเนื้อหา เมื่อเราตั้งค่า display: flex บนคอนเทนเนอร์หลัก จะเปิดคุณสมบัติ flex ทั้งหมดที่จะใช้กับลูกของผู้ปกครองนั้น
การเลือกคุณสมบัติของ Flexbox:
- ทิศทางการโค้งงอ :คอลัมน์ | แถว * | คอลัมน์ย้อนกลับ | กลับแถว
- flex-wrap :ห่อ | ตอนนี้ * | ห่อกลับ
- flex-flow :ทางลัดสำหรับสองคุณสมบัติแรกที่แสดง - มันจะเป็นไปตามรูปแบบ
flex-flow: <flex-direction> <flex-wrap>; - ปรับเนื้อหา: ช่องว่างตามแกนหลัก เมื่อกำหนดทิศทางงอเป็นแถว แกนหลักจะเป็นแกนนอน เมื่อตั้งค่าเป็นคอลัมน์ การเข้าถึงหลักจะเป็นแกนตั้ง
- justify-content:flex-start* | flex-end | ศูนย์ | พื้นที่เท่ากัน | พื้นที่รอบ ๆ | ช่องว่างระหว่าง
- จัดตำแหน่งรายการ: ช่องว่างตามแกนตรงข้ามทางเข้าหลัก เมื่อกำหนดทิศทางการโค้งงอเป็นคอลัมน์ ก็จะเป็นแกนตั้ง เมื่อตั้งค่าเป็นแถว จะเป็นแกนนอน
- จัดตำแหน่งรายการ:ยืด * |center |flex-start |flex-end |baseline
- จัดตำแหน่งตัวเอง: อนุญาตให้ใช้กับรายการ flex ซึ่งผู้ปกครองได้ประกาศคุณสมบัติการแสดงผลเป็น 'flex' ควบคุมการจัดตำแหน่งในคอนเทนเนอร์แบบยืดหยุ่น
- จัดตำแหน่งตัวเอง:อัตโนมัติ* | ยืด | ศูนย์ | flex-start | flex-end | พื้นฐาน
* – การตั้งค่าเริ่มต้นของคุณสมบัติ
ตาราง CSS – ภาพรวมโดยย่อ
CSS Grid เป็นโมเดลเลย์เอาต์อื่นที่พร้อมใช้งาน มันใหม่กว่า CSS Flexbox Model เล็กน้อย ดังนั้นการสนับสนุนเบราว์เซอร์จึงไม่สามารถใช้ได้อย่างกว้างขวางสำหรับ CSS Grid เช่นเดียวกับใน Flexbox เรามีความสามารถในการสร้างเลย์เอาต์ 2 มิติในคอลัมน์และแถวด้วยการวางตำแหน่งอย่างพิถีพิถัน เมื่อเราตั้งค่า display: grid ในองค์ประกอบหลักของเรา จะช่วยให้เราใช้คุณสมบัติกริดทั่วไปที่มีให้เราได้
การเลือกคุณสมบัติของตาราง CSS
- grid-gap, grid-column-gap, grid-row-gap: ใช้เพื่อกำหนดระยะห่างโดยทั่วไป ช่องว่างของตารางเป็นทางลัดสำหรับควบคุมช่องว่างระหว่างคอลัมน์และแถว
- grid-template-columns, grid-template-rows: วิธีนี้ช่วยให้สามารถจัดรูปแบบพื้นฐานของคอนเทนเนอร์ในกริดของคุณได้ ไม่ว่าจะเป็นความกว้างของคอลัมน์ ความสูงของแถวจะสูงแค่ไหน จำนวนคอนเทนเนอร์ในแต่ละแถว ฯลฯ
- ปรับเนื้อหา :จัดแนวตารางทั้งหมดในแนวนอน
- จัดแนวเนื้อหา :จัดแนวทั้งตารางในแนวตั้ง
- กริดคอลัมน์ กริดแถว: อนุญาตให้เราประกาศว่าเราต้องการรายการกริดของเรากว้างหรือสูงแค่ไหน
ฉันจะเลือกอันไหนดี?
คุณสมบัติใน CSS Flexbox อนุญาตให้มีการออกแบบที่เป็นเค้าโครงแบบหนึ่งมิติ:คุณสามารถตั้งค่าเค้าโครงของคุณเพื่อสร้างโดยใช้แถวหรือคอลัมน์ เหมาะสำหรับหน้าเว็บที่เน้นการจัดวางเนื้อหาน้อยลงและมีความยืดหยุ่นในการออกแบบที่ตอบสนองมากขึ้น
ในทางตรงกันข้าม CSS Grid ช่วยให้คุณสร้างเลย์เอาต์ในพื้นที่สองมิติ:ด้วยแถวและคอลัมน์ มีคุณสมบัติที่ควบคุมเค้าโครง ความกว้าง และความสูงของคอนเทนเนอร์แต่ละรายการในกริด ดังนั้นคุณจึงสามารถลงเอยด้วยกริดที่ดูคล้ายกับหน้าต่างกระจกสีที่โพสต์ไว้ที่ด้านบนสุดของบล็อกนี้
หากคุณมุ่งเน้นที่การวางเนื้อหาและต้องการควบคุมคอนเทนเนอร์ย่อยของคุณในอวกาศ Grid คือรูปแบบเลย์เอาต์สำหรับคุณ Flexbox ให้ความสำคัญกับการไหลของเนื้อหามากกว่าการจัดวาง
81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้
ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก
การสนับสนุนเบราว์เซอร์สำหรับ Grid นั้นไม่ได้แพร่หลายเหมือนใน Flexbox เพราะฉันคิดว่า Flexbox นั้นเก่ากว่า Grid เล็กน้อย นั่นอาจเป็นข้อพิจารณาในการเลือกรูปแบบเลย์เอาต์ที่จะใช้ในโครงการของคุณ
บทสรุป
ไม่ว่าคุณจะเลือกรูปแบบเลย์เอาต์ใด ทั้งสองตัวเลือกก็ใช้ได้สำหรับการแก้ปัญหา เป็นเพียงเรื่องของวัตถุประสงค์ของโครงการที่จะกำหนดจริง ๆ ว่าคุณเลือกเค้าโครง CSS Flex หรือเค้าโครง CSS Grid
