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