ห่อการต่อสู้

แร็พแบทเทิล (หรือแบทเทิลแร็พ ) เป็นการแสดงแร็พประเภทหนึ่งที่แร็ปเปอร์สองคนขึ้นไปร้องเพลงกันเอง (โดยทั่วไปรวมถึงการดูหมิ่น/โจมตี) การ์ตูนวันนี้เล่นกับคำพ้องเสียง Rap and Wrap เพื่อสร้างเรื่องตลกโง่ๆ กับ Flexbox และflex-wrapทรัพย์สิน

คอนเทนเนอร์แบบยืดหยุ่นจะจัดวางเนื้อหาในบรรทัดเดียวตามค่าเริ่มต้น นี่อาจจะโอเค แต่ถ้าขนาดของสิ่งของเกินคอนเทนเนอร์ พวกมันจะถูกบีบหรือจะล้นออกมา ดังนั้น เราอาจต้องการให้เนื้อหาเป็นหลายบรรทัดแทน นี่คือที่flex-wrapมาของการดำเนินการ

คุณสมบัตินี้กำหนดว่าคอนเทนเนอร์แบบยืดหยุ่นจะเป็นบรรทัดเดียวหรือหลายบรรทัด (ขึ้นอยู่กับจำนวนและขนาดของรายการแบบยืดหยุ่น) และในกรณีของหลายบรรทัด จะกำหนดวิธีการจัดเรียงสินค้าหลังจากการห่อ

flex-wrapมีสามค่าหลัก:

• nowrap: สินค้าจะไม่ห่อ; แต่จะปรับขนาดหรือล้นพาเรนต์แทน (นี่คือค่าเริ่มต้น)
• wrap: ของจะห่อแทนการล้นตู้เฟล็กซ์ พวกเขาจะซ้อนกันจากจุดเริ่มต้นไปยังจุดสิ้นสุด
• wrap-reverse: ของจะห่อแทนการล้นตู้เฟล็กซ์ พวกเขาจะซ้อนกันจากจุดสิ้นสุดไปจนถึงจุดเริ่มต้น

ลองตรวจสอบตัวอย่างกับคอนเทนเนอร์แบบยืดหยุ่นที่มี 5 รายการที่มีความกว้างที่กำหนด ตามค่าเริ่มต้น ค่าของflex-wrapคือ "nowrap" ดังนั้นรายการ flex จะล้นคอนเทนเนอร์ (ฉันใส่เป็นรูปภาพเพื่อหลีกเลี่ยงการล้นแนวนอนที่น่ารำคาญที่จะสร้างขึ้น):

ตอนนี้ หากเราเปลี่ยนโค้ดเพื่อตั้งค่า "wrap" สำหรับflex-wrapเมื่อรายการ flex จะล้นคอนเทนเนอร์ รายการเหล่านั้นจะรวมเป็นแถวใหม่แทน (การสาธิตสด):

แต่ถ้าเราตั้งค่าflex-wrapเป็น "wrap-reverse" ทิศทางของการห่อจะตรงกันข้าม แทนที่จะขึ้นแถวใหม่ องค์ประกอบที่ห่อจะผลักองค์ประกอบอื่นๆ เข้าไปในแถวใหม่

ตัวอย่างสุดท้ายที่มีflex-directionการตั้งค่าเป็น "คอลัมน์" ในกรณีนี้ องค์ประกอบต่างๆ จะจัดระเบียบตามแนวตั้งในคอลัมน์ ดังนั้นเมื่อรวมองค์ประกอบ ก็จะจัดในคอลัมน์แทนที่จะเป็นแถว:

ฉันหวังว่าตัวอย่างเหล่านี้จะเป็นประโยชน์และทำให้คุณสนุกกับการ์ตูนในวันนี้ เรียนรู้เพิ่มเติมเกี่ยวflex-wrapกับแหล่งข้อมูลต่อไปนี้:

• บทความ MDN เกี่ยวกับ flex-wrap
• เคล็ดลับ CSS: คู่มือฉบับสมบูรณ์สำหรับ Flexbox
• Josh W Comeau: คู่มือเชิงโต้ตอบสำหรับ Flexbox