FlexBox

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

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

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

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

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

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

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

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

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

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

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

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

direction - ทิศทางเลย์เอาต์ของรายการ wrap - whether to wrap items if the main size is insufficient 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 พื้นฐาน