FlexBox

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

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

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

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

โดยปกติแล้ว FlexBox จะใช้เพื่อแสดงรายการจำนวนเล็กน้อยภายในเลย์เอาต์หน้าจอโดยรวม สำหรับเลย์เอาต์หน้าจอโดยรวม Grid มักจะเป็นตัวเลือกที่ดีกว่า FlexBox ไม่รองรับการโหลดแบบ Lazy Loading ของรายการ หากต้องการแสดงรายการจำนวนมาก ให้ใช้รายการและตารางกริดแบบ Lazy หากต้องการรวมรายการ ให้ใช้ 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 - จะตัดรายการหรือไม่หากขนาดหลักไม่เพียงพอ
  • 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 พื้นฐาน

ก่อนหน้า
ตั้งค่าพร็อพเพอร์ตี้ของสินค้า
ถัดไป
เริ่มใช้งาน