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

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