FlexBox

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

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

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

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

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

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

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

FlexBox ที่มีแกนหลักแนวนอนและแกนไขว้แนวตั้ง
รูปที่ 1 แกนและขนาดเมื่อFlexBoxทิศทางเป็นRow
FlexBox ที่มีแกนหลักเป็นแนวตั้งและแกนไขว้เป็นแนวนอน
รูปที่ 2 แกนและขนาดเมื่อFlexBoxทิศทางเป็นColumn

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

คุณใช้พร็อพเพอร์ตี้ 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 พื้นฐาน

ก่อนหน้า
สิ่งที่ควรและไม่ควรทำแบบปรับเปลี่ยนได้
ถัดไป
เริ่มใช้งาน