FlexBox

FlexBox เป็นคอนเทนเนอร์ที่จัดวางรายการในทิศทางเดียว โดยสามารถปรับขนาด ห่อหุ้ม จัดแนว และกระจายพื้นที่ระหว่างรายการเพื่อเติมพื้นที่ว่างที่มีอยู่ให้ได้ประสิทธิภาพสูงสุด ซึ่งเป็นเลย์เอาต์ที่มีประโยชน์สำหรับรายการที่มีขนาดแตกต่างกันและสำหรับการปรับขนาดรายการเมื่อพื้นที่ว่างที่มีอยู่เปลี่ยนแปลงไป

ด้วย FlexBox คุณจะทำสิ่งต่อไปนี้ได้

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

กรณีที่ควรใช้ FlexBox

โดยปกติแล้ว FlexBox จะใช้เพื่อแสดงรายการจำนวนเล็กน้อย ภายในเลย์เอาต์หน้าจอโดยรวม สำหรับเลย์เอาต์หน้าจอโดยรวม Grid มักจะเป็นตัวเลือกที่ดีกว่า FlexBox ไม่รองรับการโหลดรายการแบบ Lazy หากต้องการแสดงรายการจำนวนมาก ให้ใช้ รายการและกริดแบบ Lazy หากต้องการรวมรายการ ให้ใช้ FlexBox แทน FlowRow และ FlowColumn

คำศัพท์และแนวคิด

FlexBox จะจัดวางรายการใน บรรทัดแนวนอนหรือแนวตั้ง ทิศทางของบรรทัดเหล่านี้กำหนด แกนหลัก แกนไขว้จะทำมุม 90 องศากับแกนหลัก ความยาวของ FlexBox ตามแกนหลักเรียกว่า ขนาดหลัก ความยาวแกนไขว้ที่สอดคล้องกันเรียกว่า ขนาดไขว้ ขนาดและแกนเหล่านี้เป็นพื้นฐานของลักษณะการทำงานของ FlexBox

ใช้พร็อพเพอร์ตี้

คุณสามารถใช้พร็อพเพอร์ตี้ FlexBox ได้ 2 วิธี ดังนี้

• กับคอนเทนเนอร์ FlexBox โดยใช้ FlexBox(config)
• กับรายการภายใน FlexBox โดยใช้ Modifier.flex

พร็อพเพอร์ตี้ของคอนเทนเนอร์ (config)

พร็อพเพอร์ตี้ของรายการ (Modifier.flex)

direction - ทิศทางการจัดวางรายการ wrap - จะรวมรายการหรือไม่หากขนาดหลัก ไม่เพียงพอ justifyContent - วิธีกระจาย รายการตามแกนหลัก alignItems - วิธีจัดแนว รายการตามแกนไขว้ alignContent - วิธีการกระจายพื้นที่ว่างเพิ่มเติมจากขนาดไขว้ เมื่อมีหลายบรรทัด rowGap / columnGap - เพิ่มพื้นที่ระหว่างรายการและบรรทัด ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เหล่านี้ได้ที่ตั้งค่าลักษณะการทำงานของคอนเทนเนอร์

basis - ขนาดของรายการก่อนที่จะกระจายพื้นที่ว่างเพิ่มเติมจากขนาดหลัก grow - ส่วนแบ่งของพื้นที่ว่างเพิ่มเติมจากขนาดหลัก ที่รายการนี้ควรได้รับ shrink - ส่วนแบ่งของพื้นที่ว่างที่ขาดไปจากขนาดหลัก ที่รายการนี้ควรได้รับ alignSelf - วิธีการกระจายพื้นที่ว่างเพิ่มเติมจากขนาดไขว้ ไปยังรายการนี้ ซึ่งจะลบล้าง alignItems order - ควบคุมลำดับการจัดวาง ดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้เหล่านี้ได้ที่ ตั้งค่าลักษณะการทำงานของรายการ

ทำความเข้าใจอัลกอริทึมการจัดวาง FlexBox

หนึ่งในฟีเจอร์ที่มีประสิทธิภาพมากที่สุดของ FlexBox คือความสามารถในการปรับขนาดรายการย่อยให้พอดีกับพื้นที่ว่างที่มีอยู่ การทำความเข้าใจวิธีที่ FlexBox ทำเช่นนี้จะช่วยให้คุณตั้งค่าพร็อพเพอร์ตี้ FlexBox เพื่อเพิ่มประสิทธิภาพ UI สำหรับขนาดที่เป็นไปได้ทั้งหมด

อัลกอริทึมการจัดวางของ FlexBox ทำงานดังนี้

1. คำนวณขนาดฐานของรายการย่อย: ใช้ค่า basis ของรายการย่อย เพื่อคำนวณขนาดเริ่มต้นตามแกนหลักก่อนที่จะกระจายพื้นที่ว่างเพิ่มเติม

2. จัดเรียงรายการย่อย: จัดเรียงรายการย่อยตามค่า order หาก มี

3. สร้างบรรทัด: สำหรับรายการย่อยแต่ละรายการ ให้ตรวจสอบว่าขนาดเริ่มต้นของรายการย่อยบวก gap จะพอดีกับพื้นที่ว่างที่เหลือในบรรทัดปัจจุบันหรือไม่ หากพอดี ให้วางรายการย่อยนี้ลงในบรรทัด หากไม่พอดี ให้วางรายการย่อยลงในบรรทัดใหม่หาก เปิดใช้การห่อหุ้ม หรือวางรายการย่อยลงในบรรทัดปัจจุบัน ซึ่งจะทำให้รายการย่อยล้นออกมา (รายการย่อยจะถูกขอบของ คอนเทนเนอร์บดบังบางส่วน)

4. จัดแนวหรือปรับขนาดรายการในแกนหลัก: สำหรับแต่ละบรรทัด ให้กระจายพื้นที่ว่างเพิ่มเติม ไปยังหรือระหว่างรายการโดยการปรับขนาดหรือ จัดแนวรายการ

5. จัดแนวหรือปรับขนาดรายการในแกนไขว้: สำหรับแต่ละบรรทัด ให้กระจายพื้นที่ว่างเพิ่มเติมไปยังหรือระหว่างรายการและบรรทัดโดยการยืดหรือจัดแนวรายการ

เมื่อคุ้นเคยกับแนวคิดของ FlexBox แล้ว ให้ดู เริ่มต้นใช้งาน เพื่อ สร้าง FlexBox พื้นฐาน