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