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 พื้นฐาน