Flex เป็นตัวย่อของกล่องแบบยืดหยุ่น ซึ่งแปลว่า "รูปแบบที่ยืดหยุ่น" ซึ่งใช้เพื่อให้เกิดความยืดหยุ่นสูงสุดสำหรับรูปแบบกล่อง ; องค์ประกอบแบบอินไลน์สามารถตั้งค่าได้โดยการใช้ "display:inline-flex" ควรสังเกตว่าหากตั้งค่ารูปแบบดิ้น แอตทริบิวต์ลอย ชัดเจน และจัดแนวตั้งขององค์ประกอบย่อยจะไม่ถูกต้อง
1. แนวคิดพื้นฐาน
เค้าโครงแบบยืดหยุ่นคือแบบจำลองเค้าโครง ซึ่งมักเรียกว่า flexbox หลังจากใช้เค้าโครงแบบยืดหยุ่น จะให้ความสามารถในการจัดสรรพื้นที่และการจัดตำแหน่งที่มีประสิทธิภาพสำหรับองค์ประกอบลูก
ก่อนที่จะใช้เค้าโครงแบบยืดหยุ่น เค้าโครงที่ใช้กันทั่วไปได้แก่: เค้าโครงแบบไหล เค้าโครงแบบลอย เค้าโครงตำแหน่ง ฯลฯ ข้อเสียคือองค์ประกอบลูกจำเป็นต้องควบคุมตำแหน่งในองค์ประกอบหลัก และยังต้องใส่ใจกับการยุบความสูงขององค์ประกอบหลักด้วย
ข้อดีของเฟล็กซ์คือการหลีกเลี่ยงรูปแบบเค้าโครงที่ไม่ยืดหยุ่น สร้างโหมดเค้าโครงเพิ่มเติมเพื่อให้คุณเลือก และแก้ไขปัญหาต่างๆ เช่น การจัดแนว การกระจาย และการตอบสนองขององค์ประกอบย่อย ข้อเสียคือสามารถพึ่งพาโหมดเค้าโครงของตัวเองเท่านั้น และไม่สามารถเปลี่ยนแปลงได้หากมีการเปลี่ยนแปลงเล็กน้อย
องค์ประกอบที่ใช้เค้าโครงแบบยืดหยุ่นเรียกว่าคอนเทนเนอร์แบบยืดหยุ่น หรือเรียกสั้นๆ ว่า "คอนเทนเนอร์" องค์ประกอบลูกทั้งหมดจะสร้างสมาชิกคอนเทนเนอร์โดยอัตโนมัติ เรียกว่ารายการดิ้น (รายการดิ้น) เรียกว่า "รายการ"
คอนเทนเนอร์มีสองแกนหลักตามค่าเริ่มต้น: แกนหลักแนวนอน (แกนหลัก) และแกนขวางแนวตั้ง (แกนขวาง) ตำแหน่งเริ่มต้นของแกนหลัก (นั่นคือ จุดตัดของเส้นขอบ) เรียกว่าจุดเริ่มต้นหลัก และ ตำแหน่งสิ้นสุดเรียกว่าจุดสิ้นสุดหลัก ตำแหน่งเริ่มต้นของแกนกากบาท เรียกว่าจุดสิ้นสุดแบบกากบาท และตำแหน่งสิ้นสุดเรียกว่าจุดสิ้นสุดแบบกากบาท รายการจะถูกจัดเรียงตามแกนหลักตามค่าเริ่มต้น พื้นที่แกนหลักที่ถูกครอบครองโดยรายการเดียวเรียกว่าขนาดหลัก และพื้นที่แกนขวางที่ถูกครอบครองโดยรายการเดียวเรียกว่าขนาดข้าม
คุณสมบัติต่อไปนี้มีให้ใน CSS เพื่อใช้เค้าโครง Flex:
ตามขอบเขตที่แตกต่างกัน คุณสมบัติเหล่านี้สามารถแบ่งออกเป็นสองประเภท: คุณสมบัติคอนเทนเนอร์ (flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content) และคุณสมบัติของรายการ (order, align -self , ดิ้น, ดิ้น-เติบโต, ดิ้น-หด, ดิ้น-พื้นฐาน) เรามาแนะนำการใช้คุณลักษณะเหล่านี้กันดีกว่า
2. คุณสมบัติคอนเทนเนอร์
(1) ทิศทางแบบยืดหยุ่น : ระบุทิศทางการจัดเรียงขององค์ประกอบย่อยในกล่องยืดหยุ่น
ค่าทางเลือกสำหรับแอตทริบิวต์มีดังนี้:
คุณสมบัติทิศทางแบบยืดหยุ่นจะกำหนดทิศทางของแกนหลัก (นั่นคือ ทิศทางการจัดเรียงของรายการ)
.box{ทิศทางแบบยืดหยุ่น:แถว|แถวย้อนกลับ|คอลัมน์|คอลัมน์ย้อนกลับ;}คุณลักษณะนี้มี 4 ค่า
● แถว (ค่าเริ่มต้น): แกนหลักอยู่ในแนวนอนและจุดเริ่มต้นอยู่ที่ด้านซ้ายสุด
●แถว-กลับ: แกนหลักอยู่ในแนวนอนและจุดเริ่มต้นอยู่ที่ด้านขวาสุด
●คอลัมน์: แกนหลักอยู่ในแนวตั้ง และจุดเริ่มต้นอยู่ที่ขอบด้านบน
●คอลัมน์-ย้อนกลับ: แกนหลักอยู่ในแนวตั้งและจุดเริ่มต้นอยู่ที่ขอบล่าง
เอฟเฟกต์ด้านบนแสดงในรูปด้านล่าง:
(2) flex-wrap : ระบุวิธีการห่อขององค์ประกอบย่อยในกล่องยืดหยุ่น
ตามค่าเริ่มต้น รายการจะถูกจัดเรียงบนเส้น (หรือที่เรียกว่า "แกน") แอตทริบิวต์ flex-wrap กำหนดวิธีการตัดเส้นหากไม่สามารถจัดเรียงแกนได้ มีค่าสามค่า:
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap (ค่าเริ่มต้น): ไม่มีการตัดบรรทัด ผลการจัดเรียงจะเป็นดังนี้:
●wrap: wrap บรรทัดแรกอยู่ด้านบน ผลการจัดเรียงจะเป็นดังนี้:
●wrap-reverse: wrap บรรทัดแรกอยู่ด้านล่าง ผลการจัดเรียงจะเป็นดังนี้:
(3) flex-flow : คุณสมบัตินี้ทำหน้าที่กับคอนเทนเนอร์กล่องดิ้นและใช้ในการควบคุมทิศทางการจัดเรียงและการพันเส้นขององค์ประกอบในคอนเทนเนอร์ คุณสมบัตินี้เป็นคุณสมบัติผสมที่ประกอบด้วยทิศทางแบบยืดหยุ่นและแบบยืดหยุ่น
.box{ดิ้นไหล:<ดิ้นทิศทาง><ดิ้นห่อ>;}(4) justify-content : คุณลักษณะนี้ทำหน้าที่กับองค์ประกอบย่อยในคอนเทนเนอร์กล่องที่ยืดหยุ่น และใช้เพื่อควบคุมการกระจายขององค์ประกอบย่อยในทิศทางการจัดเรียง
คุณสมบัติ justify-content กำหนดการจัดตำแหน่งของรายการบนแกนหลัก
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}คุณลักษณะนี้มี 5 ค่า:
● ดิ้นเริ่มต้น (ค่าเริ่มต้น): จัดชิดซ้าย;
●flex-end: จัดชิดขวา;
●ศูนย์กลาง: ศูนย์กลาง;
●ช่องว่างระหว่าง: จัดแนวปลายทั้งสองด้าน และระยะห่างระหว่างรายการเท่ากัน
●ช่องว่างรอบ: ระยะห่างทั้งสองด้านของแต่ละรายการจะเท่ากัน ดังนั้นระยะห่างระหว่างรายการจึงใหญ่เป็นสองเท่าของระยะห่างระหว่างรายการและเส้นขอบ
เอฟเฟกต์ด้านบนแสดงในรูปด้านล่าง:
(5) align-items : คุณลักษณะนี้ทำหน้าที่กับคอนเทนเนอร์กล่องแบบยืดหยุ่น และใช้เพื่อควบคุมการจัดตำแหน่งขององค์ประกอบย่อยทั้งหมดในกล่องแบบยืดหยุ่นในทิศทางแนวตั้งของทิศทางการจัดเรียง
คุณสมบัติ align-item กำหนดวิธีการจัดแนวรายการบนแกนไขว้
.box{align-items:flex-start|flex-end|center|baseline|stretch;}คุณลักษณะนี้มี 5 ค่า การจัดตำแหน่งเฉพาะจะสัมพันธ์กับทิศทางของแกนกากบาท โดยถือว่าแกนกากบาทมาจากบนลงล่าง:
●flex-start: จัดตำแหน่งจุดเริ่มต้นของแกนไขว้
●flex-end: จัดตำแหน่งกึ่งกลางของแกนกากบาท
●ศูนย์กลาง: จัดตำแหน่งกึ่งกลางของแกนกากบาท
●baseline: การจัดแนวพื้นฐานของบรรทัดแรกของข้อความของรายการ
●stretch (ค่าเริ่มต้น): หากรายการไม่ได้ตั้งค่าความสูงหรือตั้งค่าเป็นอัตโนมัติ รายการนั้นจะครอบคลุมความสูงทั้งหมดของคอนเทนเนอร์
เอฟเฟกต์ด้านบนแสดงในรูปด้านล่าง:
3. คุณสมบัติของโครงการ
(1) คุณลักษณะการสั่งซื้อ
แอตทริบิวต์ order ใช้เพื่อกำหนดลำดับที่รายการปรากฏในคอนเทนเนอร์ คุณสามารถกำหนดตำแหน่งของรายการในคอนเทนเนอร์ผ่านค่าเฉพาะได้ รูปแบบไวยากรณ์ของแอตทริบิวต์มีดังนี้:
ลำดับ:หมายเลข;
โดยที่ number คือตำแหน่งของสินค้าในคอนเทนเนอร์ และค่าเริ่มต้นคือ 0
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; เส้นขอบ:1pxsolidblack;}.flexdiv:nth-child(1){คำสั่งซื้อ:3;}.flexdiv:nth-child(2){คำสั่งซื้อ:1;}.flexdiv:nth-child(3){คำสั่งซื้อ:2;} .flexdiv:nth-child(4){order:5;}.flexdiv:nth-child(5){order:4;</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>ผลการวิ่ง:
(2) จัดคุณลักษณะตนเอง
คุณลักษณะ align-s elf ช่วยให้คุณสามารถตั้งค่าการจัดตำแหน่งที่แตกต่างจากรายการอื่นๆ ได้ คุณลักษณะนี้สามารถแทนที่ค่าของแอตทริบิวต์ align-items ได้ ค่าตัวเลือกสำหรับแอตทริบิวต์ align-self มีดังนี้:
ตัวอย่าง:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{width: 60px;height:60px;border:1pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</ div><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>ผลการวิ่ง:
(3) คุณลักษณะดิ้น
คุณลักษณะ Flex เป็นตัวย่อของคุณลักษณะทั้งสามแบบ flex-grow, flex-shrink และ flex-basis รูปแบบไวยากรณ์มีดังนี้:
ดิ้น:ดิ้น-growflex-shrinkflex-พื้นฐาน;
คำอธิบายพารามิเตอร์มีดังนี้:
● ดิ้นเติบโต: (พารามิเตอร์ที่จำเป็น) ตัวเลขที่ใช้ในการกำหนดจำนวนการเติบโตของรายการที่เกี่ยวข้องกับรายการอื่น ๆ ค่าเริ่มต้นคือ 0;
●flex-shrink: (พารามิเตอร์ทางเลือก) ตัวเลขที่ใช้ในการตั้งค่าการหดตัวของรายการโดยสัมพันธ์กับรายการอื่นๆ ค่าเริ่มต้นคือ 1;
●flex-basis: (พารามิเตอร์ทางเลือก) ความยาวของรายการ ค่าทางกฎหมายคืออัตโนมัติ (ค่าเริ่มต้น ระบุอัตโนมัติ) สืบทอด (ระบุรับค่าของแอตทริบิวต์นี้จากองค์ประกอบหลัก) หรือเพิ่ม %, px, em ฯลฯ ให้เป็นค่าเฉพาะ รูปแบบของหน่วย
นอกจากนี้ แอตทริบิวต์ flex ยังมีค่าทางลัดสองค่า ได้แก่ อัตโนมัติ (1 1 อัตโนมัติ) และ ไม่มี (0 0 อัตโนมัติ)
รหัสตัวอย่างจะเป็นดังนี้:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.flexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div ><div>เอ</div><div>B</div><div>C</div><div>D</div><div>E</div></div></body>< /html>ผลการวิ่ง:
