CSS เฟล็กซ์บ็อกซ์ #1 การสร้างเค้าโครง Flexbox แรกของคุณ

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

"CSS Grid Explained" กลายเป็นหนังสือขายดีเล่มหนึ่งของเราในทันที ดังนั้นเราจึงกำลังดำเนินการอัปเดตและขยายใหญ่สำหรับหนังสือเล่มนั้น เรากำลังเริ่มผลิตหนังสือเล่มใหม่ "Flexbox Explained" Flexbox มีความเกี่ยวข้องอย่างใกล้ชิดกับ CSS Grid แต่มีความแตกต่างที่เห็นได้ชัดเจน:

• Flexbox เป็นโมเดลเลย์เอาต์หนึ่งมิติ มันสามารถจัดการทั้งคอลัมน์หรือแถว
• CSS Grid เป็นโมเดลเค้าโครงสองมิติ สามารถจัดการทั้งคอลัมน์และแถว

ในอีกไม่กี่สัปดาห์ข้างหน้า เราจะเผยแพร่ชุดบทช่วยสอน Flexbox ขณะที่เราเขียน "Flexbox Explained" บทช่วยสอนแรกนี้สาธิตแนวคิดพื้นฐานของ CSS Flexbox พร้อมตัวอย่างที่ใช้งานได้จริง

บทนำสู่เฟล็กซ์บ็อกซ์

ข้อกำหนด CSS Flexbox อธิบายเลย์เอาต์ที่มีรายการ ( flex-items ) ภายในคอนเทนเนอร์ ( flex-container ) รายการเหล่านี้สามารถขยายหรือย่อขนาดความกว้างและ/หรือความสูงได้ตามพื้นที่คอนเทนเนอร์ที่มีอยู่ รายการ "flex" เพื่อให้พอดีกับคอนเทนเนอร์หลักอย่างดีที่สุด

รายการ "โค้งงอ" เหล่านี้สามารถจัดวางในทิศทางใดก็ได้ (แกนอินไลน์หรือแกนบล็อก) จึงให้ความยืดหยุ่นอย่างมากเมื่อเปลี่ยนขนาด (ความกว้างหรือความสูง) ของหน้าจอหรือการวางแนว

คุณสามารถดูข้อกำหนดของ Flexbox W3C ได้โดยคลิกที่ลิงค์นี้

ขั้นตอนที่ 1. สร้าง HTML

มาเริ่มตัวอย่างนี้โดยสร้างไฟล์ HTML ด้วยโค้ดตัวอย่าง ฉันได้เตรียม HTML ไว้ให้คุณแล้ว - เป็นคอนเทนเนอร์ที่มีองค์ประกอบย่อย 3 องค์ประกอบ

• เปิดตัวแก้ไขรหัสที่คุณต้องการ
• สร้างไฟล์ HTML เปล่า
• เยี่ยมชมหน้านี้และคัดลอกโค้ด HTML
• วางรหัสนั้นในไฟล์ HTML ของคุณ

ขั้นตอนที่ 2. สร้าง CSS

ตอนนี้เรามีคอนเทนเนอร์ที่มี 3 องค์ประกอบแล้ว มาเพิ่มสไตล์กัน

• สร้างไฟล์ CSS ชื่อ style.css . วางไฟล์นี้ในโฟลเดอร์เดียวกับไฟล์ HTML ของคุณ ลิงก์ไปยังไฟล์ CSS นี้อยู่ในแท็กของไฟล์ HTML แล้ว
• คัดลอกและวางรหัสนี้ ซึ่งมีอยู่ใน Codepen ด้วย:

 /* GLOBAL STYLES */ * { box-sizing: border-box; } body { background-color: #AAA; margin: 0px 50px 50px; } .item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; font-size: 2em; font-family: sans-serif; font-weight: bold; background-color: #1c57b5; }

ภาพนี้แสดงให้เห็นว่าโค้ดของคุณจะปรากฏอย่างไรเมื่อคุณเปิดไฟล์ HTML ในเบราว์เซอร์ รายการย่อย 3 รายการกว้างเท่ากับคอนเทนเนอร์หลัก ความสูงถูกกำหนดโดยเนื้อหาของแต่ละรายการ สังเกตเห็นช่องว่างภายในของ 2rem (ประมาณ 32px บนหน้าจอเดสก์ท็อป) ทุกด้าน

ขั้นตอนที่ #3 CSS Flexbox Styles

ตอนนี้ได้เวลาเริ่มส่วน Flexbox ของบทช่วยสอนนี้แล้ว

• แก้ไขไฟล์ CSS และเพิ่มรหัสนี้:

 .container { display: flex; }

ภาพนี้แสดงให้เห็นว่าโค้ดของคุณจะเป็นอย่างไรในตอนนี้:

มีอะไรเปลี่ยนแปลงบ้าง? ในด้านเทคนิค คอนเทนเนอร์หลักเป็นคอนเทนเนอร์แบบ flex-container องค์ประกอบย่อยได้กลายเป็น flex-items

ทำไมขนาดของภาชนะจึงเปลี่ยนไป? รายการแบบยืดหยุ่นไม่กว้างเท่ากับคอนเทนเนอร์หลัก ขณะนี้มีความกว้างเท่ากับเนื้อหาภายใน flex-items จะปรากฏเป็นองค์ประกอบที่ลอยอยู่ทางด้านซ้าย พวกเขาทำตัวเหมือนองค์ประกอบ แบบอินไลน์

หากต้องการดูความกว้างของคอนเทนเนอร์หลักอย่างชัดเจน คุณสามารถใช้ background-color :

• แก้ไขโค้ด CSS และเพิ่มโค้ดนี้:

 .container { display: flex; background-color: #f5ca3c; }

นี่คือลักษณะที่คอนเทนเนอร์ปรากฏขึ้นในขณะนี้:

คุณสังเกตเห็นแล้วว่า flex-container ทำงาน (ส่วนใหญ่) เหมือนองค์ประกอบระดับบล็อก อย่างไรก็ตาม เรายังทำให้คอนเทนเนอร์ทำงานเหมือนองค์ประกอบระดับอินไลน์ ในการดำเนินการนี้ เราเปลี่ยนค่าของคุณสมบัติ display เป็น inline-flex

• แก้ไขโค้ด CSS:

 .container { display: inline-flex; background-color: #f5ca3c;

คอนเทนเนอร์แบบยืดหยุ่นตอนนี้เป็นองค์ประกอบระดับอินไลน์ ดังที่คุณเห็นในภาพนี้:

ก่อนที่เราจะดำเนินการต่อในบทช่วยสอนนี้ เรามาเปลี่ยนพฤติกรรมเป็นองค์ประกอบระดับบล็อกกันก่อน

• แก้ไขโค้ด CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

ขั้นตอนที่ #4 การเปลี่ยนแถว Flexbox เป็นคอลัมน์

จนถึงตอนนี้ เราได้สร้าง flex-container นอกจากนี้เรายังได้เห็นว่าลูกๆ ของคอนเทนเนอร์นี้ทำงานอย่างไรเมื่อเปลี่ยนเป็น flex-items

ตอนนี้ มาเรียนรู้วิธีเปลี่ยนทิศทางของเลย์เอาต์ของเรากัน ทิศทางเริ่มต้นของ flex-container เป็นแบบแถว อย่างไรก็ตาม คุณสามารถเปลี่ยนลักษณะการทำงานนี้ด้วยคุณสมบัติ flex-direction

• แก้ไขโค้ด CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row; }

หลังจากอัปเดตโค้ด คุณจะไม่เห็นการเปลี่ยนแปลงใดๆ เนื่องจาก flex-direction: row เป็นค่าเริ่มต้น มาทำการเปลี่ยนแปลงที่เห็นได้ชัดเจนกัน: แก้ไขทิศทางของ flex-container เป็น column

• แก้ไขโค้ด CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column; }

รูปภาพถัดไปนี้แสดงการเปลี่ยนแปลงในการจัดวางของคุณ:

ตอนนี้ทิศทางของ flex-container จะขึ้นอยู่กับแกนของบล็อก (คอลัมน์) flex-items จะจัดแนวจากบนลงล่าง และแต่ละรายการเหล่านี้ใช้ความกว้างเต็มของคอนเทนเนอร์หลัก ดังนั้นพวกมันจึงทำตัวเหมือนองค์ประกอบบล็อก

ตอนนี้ คุณอาจเริ่มตั้งคำถามกับสิ่งต่างๆ ได้ ณ จุดนี้: " เฮ้ เลย์เอาต์ของฉันตอนนี้ดูเหมือนเลย์เอาต์แรกในบทช่วยสอนนี้ทุกประการ! " ใช่แล้ว ไม่เห็นความแตกต่างระหว่างเลย์เอาต์ปัจจุบันกับ flex-container และเลย์เอาต์แรกของตัวอย่างนี้ที่มีคอนเทนเนอร์แบบบล็อก

อย่างไรก็ตาม ตอนนี้เราควบคุมได้มากขึ้น ตัวอย่างเช่น คุณสามารถกลับทิศทางของ flex-items ด้วยคุณสมบัติ row-reverse และ column-reverse

• แก้ไขโค้ด CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: column-reverse; }

ภาพนี้แสดงให้เห็นว่าเลย์เอาต์ของคุณจะเป็นอย่างไรหลังจากอัปเดตใหม่นี้:

หากต้องการดูรายการ flex-items กลับด้านในแถว ให้เปลี่ยนค่าของคุณสมบัติ flex-direction

• แก้ไขโค้ด CSS:

 .container { display: flex; background-color: #f5ca3c; flex-direction: row-reverse; }

สรุปเฟล็กซ์บ็อกซ์

ยินดีด้วย! คุณได้เรียนรู้วิธีการประกาศ flex-container คุณได้เห็นแล้วว่า flex-items ทำงานอย่างไรโดยขึ้นอยู่กับ flex-direction ใช้กับคอนเทนเนอร์หลัก ( row หรือ column ) คุณยังรู้วิธีย้อนกลับลำดับของ flex-items อีกด้วย

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

บทแนะนำเพิ่มเติมของชุดนี้

• CSS เฟล็กซ์บ็อกซ์ #2 วิธีใช้คุณสมบัติ justify-content
• CSS เฟล็กซ์บ็อกซ์ #3 คุณสมบัติการจัดตำแหน่งรายการ
• CSS Flexbox #4. The flex-grow คุณสมบัติ