เฟล็กซ์บ็อกซ์

พอดแคสต์ CSS - 010: Flexbox

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

โมเดลเลย์เอาต์แบบกล่องแบบยืดหยุ่น (flexbox) คือโมเดลเลย์เอาต์ที่ออกแบบมาสำหรับเนื้อหาแบบมิติเดียว ซึ่งเชี่ยวชาญในการนำสินค้าจำนวนมากที่มีขนาดแตกต่างกัน และแสดงการจัดวางที่ดีที่สุดสำหรับสินค้าเหล่านั้น

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

คุณใช้เลย์เอาต์แบบยืดหยุ่นทําอะไรได้บ้าง

เลย์เอาต์แบบยืดหยุ่นมีฟีเจอร์ต่อไปนี้ ซึ่งคุณจะสำรวจได้ในคู่มือนี้

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

แกนหลักและแกนกากบาท

กุญแจสำคัญในการทำความเข้าใจ Flexbox คือการทำความเข้าใจแนวคิดของแกนหลักและแกนกากบาท แกนหลักคือแกนที่ตั้งค่าโดยพร็อพเพอร์ตี้ flex-direction หากค่านั้นคือ row แกนหลักของคุณจะอยู่ในแถว หากเป็น column แกนหลักจะอยู่ในคอลัมน์

ช่อง 3 ช่องติดกันมีลูกศรชี้จากซ้ายไปขวา ลูกศรมีป้ายกำกับแกนหลัก

รายการ Flex จะเคลื่อนไหวเป็นกลุ่มบนแกนหลัก อย่าลืมว่าเรามีสิ่งต่างๆ มากมายและกำลังพยายามหาเลย์เอาต์ที่ดีที่สุดสำหรับกลุ่ม

แกนกากบาทจะวิ่งในทิศทางอื่นไปยังแกนหลัก ดังนั้นหาก flex-direction เท่ากับ row แกนกากบาทจะวิ่งไปตามคอลัมน์

กล่อง 3 ช่องที่มีความสูงต่างกันวางอยู่ข้างกันมีลูกศรชี้จากซ้ายไปขวา ลูกศรมีป้ายกำกับเป็นแกนหลัก มีลูกศรอีกอันหนึ่งชี้บนลงล่าง อันนี้มีป้ายกำกับว่าแกนข้าม

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

กำลังสร้างคอนเทนเนอร์ Flex

มาดูกันว่า Flexbox ทำงานอย่างไรโดยนำกลุ่มรายการขนาดต่างๆ มาจัดวางไว้ด้วยกัน

<div class="container" id="container">
  <div>One</div>
  <div>Item two</div>
  <div>The item we will refer to as three</div>
</div>

หากต้องการใช้ Flexbox คุณต้องประกาศว่าต้องการใช้บริบทการจัดรูปแบบแบบยืดหยุ่น ไม่ใช่การบล็อกและเลย์เอาต์แบบอินไลน์ตามปกติ ซึ่งทำได้โดยเปลี่ยนค่าของพร็อพเพอร์ตี้ display เป็น flex

.container {
  display: flex;
}

ตามที่คุณได้เรียนรู้ในคู่มือการออกแบบ คุณจะได้รับกล่องระดับบล็อกที่มีรายการ Flex ย่อย รายการ Flex จะเริ่มแสดงลักษณะการทำงานของ Flexbox ทันทีโดยใช้ค่าเริ่มต้น

ค่าเริ่มต้นหมายความว่า

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

การควบคุมทิศทางของรายการ

แม้ว่าคุณจะยังไม่ได้เพิ่มพร็อพเพอร์ตี้ flex-direction แต่รายการจะแสดงเป็นแถวเนื่องจากค่าเริ่มต้นของ flex-direction คือ row หากต้องการแถวแนวนอน คุณก็ไม่จำเป็นต้องเพิ่มพร็อพเพอร์ตี้ หากต้องการเปลี่ยนทิศทาง ให้เพิ่มพร็อพเพอร์ตี้และค่าหนึ่งใน 4 ค่าต่อไปนี้

  • row: รายการจะจัดวางเป็นแถว
  • row-reverse: รายการจัดวางเป็นแถวจากส่วนท้ายของคอนเทนเนอร์ Flex
  • column: รายการจัดวางเป็นคอลัมน์
  • column-reverse : รายการจัดเลย์เอาต์เป็นคอลัมน์จากส่วนท้ายของคอนเทนเนอร์ Flex

คุณลองใช้ค่าทั้งหมดได้โดยใช้กลุ่มสินค้าของเราในการสาธิตด้านล่าง

การย้อนกลับโฟลว์รายการและการเข้าถึง

คุณควรระมัดระวังเมื่อใช้พร็อพเพอร์ตี้ที่จัดเรียงการแสดงภาพใหม่ให้ห่างจากการจัดเรียงสิ่งต่างๆ ในเอกสาร HTML เนื่องจากอาจส่งผลเสียต่อความสามารถเข้าถึงได้ง่าย ค่า row-reverse และ column-reverse เป็นตัวอย่างที่ดี การเรียงลําดับใหม่จะเกิดขึ้นตามลําดับภาพเท่านั้น ไม่ใช่ลําดับเชิงตรรกะ สิ่งสำคัญคือต้องเข้าใจว่าลำดับเชิงตรรกะเป็นลำดับที่โปรแกรมอ่านหน้าจออ่านเนื้อหาออก และใครก็ตามที่ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์จะทำตามคำสั่ง

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

สิ่งใดก็ตามที่เปลี่ยนลำดับของรายการใน Flexbox หรือตารางกริดได้อาจก่อให้เกิดปัญหานี้ได้ ดังนั้นการจัดลําดับใหม่จึงควรมีการทดสอบอย่างละเอียดเพื่อตรวจสอบว่าเว็บไซต์ไม่เหมาะที่จะใช้สําหรับผู้ใช้บางราย

สำหรับข้อมูลเพิ่มเติม โปรดดูที่:

โหมดและทิศทางการเขียน

รายการ Flex จะจัดวางเป็นแถวโดยค่าเริ่มต้น แถวจะทํางานในทิศทางที่ประโยคไหลไปในโหมดการเขียนและทิศทางของสคริปต์ ซึ่งหมายความว่า หากคุณทำงานในภาษาอาหรับ ซึ่งมีทิศทางสคริปต์จากขวาไปซ้าย (RTl) รายการจะอยู่ในแถวขวา ลำดับแท็บจะเริ่มต้นทางด้านขวาด้วยเนื่องจากเป็นลักษณะการอ่านประโยคในภาษาอาหรับ

ถ้าคุณใช้โหมดการเขียนแนวตั้ง เช่น แบบอักษรภาษาญี่ปุ่นบางแบบ จะมีแถวที่ทำงานในแนวตั้งจากบนลงล่าง ลองเปลี่ยน flex-direction ในการสาธิตนี้ซึ่งใช้โหมดการเขียนแนวตั้ง

ดังนั้น ลักษณะการทำงานโดยค่าเริ่มต้นของรายการ Flex จะลิงก์กับโหมดการเขียนของเอกสาร บทแนะนำส่วนใหญ่เขียนโดยใช้ภาษาอังกฤษ หรือโหมดการเขียนแนวนอนอีกแบบหนึ่งจากซ้ายไปขวา ซึ่งจะช่วยให้สรุปง่ายๆ ว่ารายการแบบยืดหยุ่นแสดงทางด้านซ้าย และแสดงแนวนอน

การใช้แกนหลักและแกนกากบาท รวมถึงโหมดการเขียนที่จะต้องพิจารณา การที่เราพูดถึง start และ end แทนด้านบน ด้านล่าง ด้านซ้าย และด้านขวาใน Flexbox อาจเข้าใจได้ง่ายกว่า แต่ละแกนมีจุดเริ่มต้นและจุดสิ้นสุด จุดเริ่มต้นของแกนหลักเรียกว่าจุดเริ่มต้นหลัก ดังนั้นรายการ Flex ของเราในช่วงแรกจะเรียงจากระดับเริ่มต้น จุดสิ้นสุดของแกนคือ main-end จุดเริ่มต้นของแกนไขว้คือครอสเริ่มต้น และสิ้นสุดครอสเอนด์

แผนภาพที่มีป้ายกำกับของคำข้างต้น

กำลังรวมรายการ Flex

ค่าเริ่มต้นของพร็อพเพอร์ตี้ flex-wrap คือ nowrap ซึ่งหมายความว่า หากพื้นที่ว่างในคอนเทนเนอร์ไม่เพียงพอ สินค้าจะล้นเกิน

คอนเทนเนอร์เฟล็กซ์ที่มี 9 รายการอยู่ข้างใน สิ่งของเหล่านั้นหดเล็กลงจนมีคำหนึ่งคำอยู่ในบรรทัด แต่ไม่มีพื้นที่เพียงพอที่จะแสดงแบบเคียงข้างกัน รายการ Flex จะขยายออกนอกกล่องของคอนเทนเนอร์
เมื่อมีรายการแบบยืดหยุ่นที่มีขนาดเท่ากับเนื้อหาขั้นต่ำจะเริ่มล้นคอนเทนเนอร์

รายการที่แสดงโดยใช้ค่าเริ่มต้นจะลดลงเหลือเล็กที่สุดเท่าที่ทำได้ จนเหลือเท่ากับ min-content ก่อนที่จะเกิดรายการเพิ่มเติม

หากต้องการทำให้รายการรวม ให้เพิ่ม flex-wrap: wrap ไปยังคอนเทนเนอร์ Flex

.container {
  display: flex;
  flex-wrap: wrap;
}

เมื่อคอนเทนเนอร์ Flex รวมอยู่ จะสร้างเส้น Flex หลายเส้น ในแง่ของการกระจายพื้นที่ แต่ละบรรทัดจะทำหน้าที่เหมือนคอนเทนเนอร์ Flex ใหม่ ดังนั้นหากคุณกำลังรวมแถว จะไม่มีข้อมูลในแถวที่ 2 เพื่อไปอยู่ในแถวลำดับที่ 1 ซึ่งความหมายโดย Flexbox ก็คือมิติเดียว คุณสามารถควบคุมการจัดแนวในแกน 1 แถว หรือคอลัมน์เดียว ไม่ใช่ทั้ง 2 อย่างพร้อมกันแบบตารางกริด

ชวเลขแบบ Flex-flow

คุณตั้งค่าพร็อพเพอร์ตี้ flex-direction และ flex-wrap โดยใช้ชวเลข flex-flow ได้ เช่น หากต้องการตั้งค่า flex-direction เป็น column และอนุญาตให้รวมรายการ ให้ทำดังนี้

.container {
  display: flex;
  flex-flow: column wrap;
}

การควบคุมพื้นที่ภายในรายการ Flex

สมมติว่าคอนเทนเนอร์ของเรามีพื้นที่เกินกว่าที่จำเป็นในการแสดงรายการ รายการจะปรากฏตั้งแต่ตอนเริ่มต้นและไม่ขยายจนเต็มพื้นที่ พวกเขาหยุดขยายขนาดเนื้อหาได้สูงสุด เนื่องจากค่าเริ่มต้นของพร็อพเพอร์ตี้ flex- คือ

  • flex-grow: 0: รายการไม่เพิ่มขึ้น
  • flex-shrink: 1: สินค้าอาจมีขนาดเล็กกว่า flex-basis ได้
  • flex-basis: auto: รายการมีขนาดพื้นฐาน auto

ซึ่งอาจแสดงด้วยค่าคีย์เวิร์ด flex: initial พร็อพเพอร์ตี้ชวเลข flex หรือลองจิจูดของ flex-grow, flex-shrink และ flex-basis ใช้กับส่วนย่อยของคอนเทนเนอร์ Flex

หากต้องการให้รายการใหญ่ขึ้น ขณะที่อนุญาตให้รายการขนาดใหญ่มีพื้นที่มากกว่ารายการขนาดเล็ก ให้ใช้ flex:auto คุณลองใช้ฟีเจอร์นี้ได้โดยใช้เดโมด้านบน ซึ่งจะตั้งค่าพร็อพเพอร์ตี้เป็น

  • flex-grow: 1: รายการอาจมีขนาดใหญ่กว่า flex-basis
  • flex-shrink: 1: รายการอาจลดขนาดได้น้อยกว่า flex-basis
  • flex-basis: auto: รายการมีขนาดพื้นฐาน auto

การใช้ flex: auto จะทำให้รายการมีขนาดต่างๆ กัน เนื่องจากจะมีการแชร์พื้นที่ที่ใช้ร่วมกันระหว่างรายการต่างๆ หลังจากวางแต่ละรายการเป็นขนาดสูงสุด ดังนั้นรายการที่มีขนาดใหญ่จะมีพื้นที่มากขึ้น หากต้องการบังคับให้รายการทั้งหมดมีขนาดเท่ากันและไม่ต้องสนใจขนาดของเนื้อหา ให้เปลี่ยน flex:auto เป็น flex: 1 ในการสาธิต

การดำเนินการนี้จะแตกแพ็กเกจไปยัง:

  • flex-grow: 1: รายการอาจมีขนาดใหญ่กว่า flex-basis
  • flex-shrink: 1: รายการอาจลดขนาดได้น้อยกว่า flex-basis
  • flex-basis: 0: รายการมีขนาดพื้นฐาน 0

การใช้ flex: 1 บอกว่ารายการทั้งหมดมีขนาดเป็น 0 ดังนั้นพื้นที่ทั้งหมดในคอนเทนเนอร์ Flex จะพร้อมสำหรับกระจาย เนื่องจากรายการทั้งหมดมีปัจจัย flex-grow เท่ากับ 1 รายการทั้งหมดจึงเพิ่มขึ้นเท่าๆ กันและพื้นที่แชร์เท่าๆ กัน

อนุญาตให้ไอเทมเพิ่มขึ้นในอัตราที่แตกต่างกัน

คุณไม่จำเป็นต้องให้ปัจจัย flex-grow เป็น 1 สำหรับทุกรายการ คุณให้รายการแบบยืดหยุ่นได้ flex-grow ด้วยตัวประกอบต่างๆ ในการสาธิตที่อยู่ด้านล่าง รายการแรกมี flex: 1, flex: 2 รายการที่ 2 และ flex: 3 ที่ 3 เมื่อรายการเหล่านี้เพิ่มขึ้นจาก 0 พื้นที่ว่างในคอนเทนเนอร์ Flex จะแชร์ออกเป็น 6 รายการ ส่วนหนึ่งเป็นของรายการแรก โดยแบ่งเป็น 2 ส่วน ส่วนที่ 2 ส่วน 3 ส่วน

คุณทำแบบเดียวกันได้จาก flex-basis ของ auto แต่ต้องระบุ 3 ค่านี้ด้วย ค่าแรกคือ flex-grow, flex-shrinkที่ 2 และ flex-basis ที่ 3

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

ซึ่งเป็น Use Case ที่พบไม่บ่อยนักเนื่องจากการใช้ flex-basis เป็น auto คือการอนุญาตให้เบราว์เซอร์ทราบถึงการกระจายพื้นที่ว่าง หากต้องการทำให้วิดีโอหนึ่งๆ มีจำนวนเพิ่มขึ้นเกินกว่าที่อัลกอริทึมคิดไว้เล็กน้อย แต่รายการนั้นอาจมีประโยชน์

กำลังเรียงลำดับรายการ Flex ใหม่

คุณจัดเรียงรายการในคอนเทนเนอร์ Flex ได้โดยใช้พร็อพเพอร์ตี้ order พร็อพเพอร์ตี้นี้อนุญาตให้เรียงลำดับรายการในกลุ่มลำดับ รายการจะวางในทิศทางที่กำหนดด้วย flex-direction ซึ่งเป็นค่าต่ำสุดก่อน หากมีสินค้ามากกว่า 1 รายการที่มีค่าเดียวกัน ระบบจะแสดงพร้อมกับรายการอื่นๆ ที่มีค่านั้น

ตัวอย่างด้านล่างแสดงการจัดลำดับนี้

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับ Flexbox

flex-direction เริ่มต้นคือ

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

โดยค่าเริ่มต้น คอนเทนเนอร์ Flex จะตัดรายการย่อย

จริง
ต้องเปิดใช้การตัด
false
ใช้ flex-wrap: wrap กับ display: flex เพื่อตัดองค์ประกอบย่อยๆ

รายการย่อย Flex ถูกบีบเข้ามา พร็อพเพอร์ตี้ Flex ใดที่ช่วยลดเหตุการณ์นี้ได้

flex-grow
พร็อพเพอร์ตี้นี้อธิบายว่าองค์ประกอบจะขยายเกินขนาดพื้นฐานได้หรือไม่ ไม่ใช่ว่าองค์ประกอบควรทำงานอย่างไรภายใต้พื้นฐาน
flex-shrink
มี พร็อพเพอร์ตี้นี้จะอธิบายวิธีจัดการกับการปรับขนาดหากความกว้างต่ำกว่าเกณฑ์พื้นฐาน
flex-basis
วิธีนี้จะเป็นจุดเริ่มต้นของการปรับขนาด ไม่ใช่วิธีจัดการสถานการณ์การปรับขนาดที่มีความกว้างต่ำกว่าเกณฑ์ เช่น ในสถานการณ์ที่เป็นบีบขนาด

ภาพรวมการจัดวาง Flexbox

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

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

  • justify-content: การกระจายพื้นที่ว่างบนแกนหลัก
  • align-content: การกระจายวรรคในแกนไขว้
  • place-content: ชวเลขสำหรับตั้งค่าพร็อพเพอร์ตี้ข้างต้นทั้ง 2 รายการ

คุณสมบัติที่ใช้ในการจัดแนวใน Flexbox

  • align-self: จัดเรียงรายการเดียวบนแกนกากบาท
  • align-items: จัดรายการทั้งหมดให้เป็นกลุ่มบนแกนกากบาท

หากคุณทํางานบนแกนหลัก พร็อพเพอร์ตี้จะเริ่มต้นด้วย justify- บนแกนไขว้จะขึ้นต้นด้วย align-

การกระจายพื้นที่บนแกนหลัก

เมื่อใช้ HTML ก่อนหน้านี้ รายการ Flex จะจัดวางเป็นแถว จึงมีพื้นที่บนแกนหลัก รายการมีขนาดใหญ่ไม่พอที่จะเติมภาชนะบรรจุ Flex ทั้งหมด รายการเหล่านี้อยู่ที่จุดเริ่มต้นของคอนเทนเนอร์ Flex เนื่องจากค่าเริ่มต้นของ justify-content คือ flex-start ระบบจะแสดงรายการในตอนเริ่มต้นและพื้นที่ว่างที่เพิ่มขึ้นในตอนท้าย

เพิ่มพร็อพเพอร์ตี้ justify-content ลงในคอนเทนเนอร์ Flex แล้วให้ค่า flex-end แล้วแสดงรายการไว้ที่ส่วนท้ายสุดของคอนเทนเนอร์โดยวางพื้นที่ว่างไว้ตรงจุดเริ่มต้น

.container {
  display: flex;
  justify-content: flex-end;
}

นอกจากนี้คุณยังกระจายช่องว่างระหว่างรายการด้วย justify-content: space-between ได้ด้วย

ลองใช้ค่าบางค่าในการสาธิตและดู MDN สำหรับค่าที่เป็นไปได้ทั้งชุด

ด้วย flex-direction: column

หากคุณเปลี่ยน flex-direction เป็น column แล้ว justify-content จะทำงานในคอลัมน์ดังกล่าว หากต้องการเพิ่มพื้นที่ว่างในคอนเทนเนอร์เมื่อทำงานเป็นคอลัมน์ คุณจะต้องกำหนด height หรือ block-size ให้กับคอนเทนเนอร์ มิฉะนั้นคุณจะไม่มีพื้นที่เหลือสำหรับการเผยแพร่

ลองใช้ค่าต่างๆ ในเลย์เอาต์คอลัมน์ Flexbox

การกระจายช่องว่างระหว่างเส้น Flex

เมื่อใช้คอนเทนเนอร์ Flex ที่ปกปิดไว้ คุณจะมีช่องว่างสำหรับกระจายบนแกนไขว้ได้ ในกรณีนี้ คุณสามารถใช้พร็อพเพอร์ตี้ align-content ที่มีค่าเดียวกันกับ justify-content ค่าเริ่มต้นของ align-content คือ stretch ซึ่งต่างจาก justify-content ที่จัดรายการตาม flex-start โดยค่าเริ่มต้น เพิ่มพร็อพเพอร์ตี้ align-content ในคอนเทนเนอร์ Flex เพื่อเปลี่ยนลักษณะการทำงานเริ่มต้นนั้น

.container {
  align-content: center;
}

ลองใช้งานได้ในเดโม ตัวอย่างนี้รวมรายการแบบยืดหยุ่น และคอนเทนเนอร์มี block-size เพื่อให้เรามีพื้นที่ว่าง

ชวเลข place-content

หากต้องการตั้งค่าทั้ง justify-content และ align-content คุณจะใช้ place-content กับ 1 หรือ 2 ค่าได้ ระบบจะใช้ค่าเดียวกับทั้ง 2 แกน หากคุณระบุทั้ง 2 แกนว่าจะใช้ค่าแรกสำหรับ align-content และค่าที่ 2 จะใช้สำหรับ justify-content

.container {
  place-content: space-between;
  /* sets both to space-between */
}

.container {
  place-content: center flex-end;
  /* wrapped lines on the cross axis are centered,
  on the main axis items are aligned to the end of the flex container */
}

การปรับแนวรายการบนแกนไขว้

บนแกนไขว้ คุณยังสามารถจัดรายการภายในเส้นแบบยืดหยุ่นโดยใช้ align-items และ align-self ได้ด้วย โดยพื้นที่ว่างที่มีให้สำหรับการจัดแนวนี้จะขึ้นอยู่กับความสูงของคอนเทนเนอร์ Flex หรือบรรทัด Flex ในกรณีที่เป็นชุดรายการที่รวมไว้

ค่าเริ่มต้นของ align-self คือ stretch ซึ่งเป็นเหตุผลที่รายการแบบยืดหยุ่นในแถวยาวจนถึงความสูงของรายการที่สูงที่สุดโดยค่าเริ่มต้น หากต้องการเปลี่ยนการตั้งค่านี้ ให้เพิ่มพร็อพเพอร์ตี้ align-self ในรายการ Flex ใดก็ได้

.container {
  display: flex;
}

.item1 {
  align-self: flex-start;
}

ใช้ค่าใดก็ได้ต่อไปนี้เพื่อปรับรายการ

  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

ดูรายการค่าทั้งหมดใน MDN

การสาธิตถัดไปมีรายการ Flex 1 บรรทัดที่มี flex-direction: row รายการสุดท้ายกำหนดความสูงของคอนเทนเนอร์ Flex รายการแรกมีพร็อพเพอร์ตี้ align-self ซึ่งมีค่า flex-start ลองเปลี่ยนค่าในคุณสมบัตินั้นเพื่อดูว่าค่าเคลื่อนที่ภายในพื้นที่บนแกนไขว้อย่างไร

พร็อพเพอร์ตี้ align-self จะใช้กับแต่ละรายการ คุณใช้พร็อพเพอร์ตี้ align-items กับคอนเทนเนอร์ Flex เพื่อตั้งค่าพร็อพเพอร์ตี้ align-self แต่ละรายการเป็นกลุ่มได้

.container {
  display: flex;
  align-items: flex-start;
}

ในการสาธิตครั้งถัดไปนี้ ให้ลองเปลี่ยนค่า align-items เพื่อจัดรายการทั้งหมดบนแกนไขว้ให้เป็นกลุ่ม

เหตุใดจึงไม่มีการให้เหตุผลใน Flexbox

รายการ Flex ทำหน้าที่เป็นกลุ่มบนแกนหลัก ดังนั้นจึงไม่มีแนวคิดในการแยกแต่ละรายการออกจากกลุ่มนั้น

ในเลย์เอาต์แบบตารางกริด พร็อพเพอร์ตี้ justify-self และ justify-items จะทำงานบนแกนในบรรทัดเพื่อจัดแนวรายการบนแกนนั้นภายในพื้นที่ตารางกริด เนื่องจากเลย์เอาต์ Flex จะจัดการกับรายการแบบเป็นกลุ่ม ระบบจึงไม่นำพร็อพเพอร์ตี้เหล่านี้ไปใช้ในบริบทแบบยืดหยุ่น

โปรดทราบว่า Flexbox ทำงานได้อย่างดีกับขอบอัตโนมัติ หากคุณจำเป็นต้องแยกสินค้า 1 รายการออกจากกลุ่ม หรือแยกกลุ่มเป็น 2 กลุ่ม คุณสามารถใช้ส่วนต่างกำไรเพื่อทำเช่นนี้ได้ ในตัวอย่างด้านล่าง รายการสุดท้ายมีระยะขอบด้านซ้าย auto ขอบอัตโนมัติจะดูดซับพื้นที่ว่างทั้งหมดตามทิศทางที่ใช้ ซึ่งหมายความว่าระบบจะดันรายการไปทางขวา ซึ่งเป็นการแยกกลุ่ม

วิธีจัดสิ่งของให้อยู่กึ่งกลางในแนวตั้งและแนวนอน

คุณสามารถใช้คุณสมบัติการจัดแนวเพื่อจัดรายการให้อยู่กึ่งกลางในอีกกล่องหนึ่งได้ พร็อพเพอร์ตี้ justify-content จัดเรียงรายการบนแกนหลักซึ่งเป็นแถว พร็อพเพอร์ตี้ align-items บนแกนกากบาท

.container {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับ Flexbox

.container {
  display: flex;
  direction: ltr;
}

หากต้องการจัดเรียงในแนวตั้งด้วย Flexbox ให้ใช้

จัดเรียงคีย์เวิร์ด
เยี่ยม
จัดชิดขอบคีย์เวิร์ด
เสียใจ
 
.container {
  display: flex;
  direction: ltr;
}

หากต้องการปรับแนวนอนให้ตรงกับ Flexbox ให้ใช้

จัดเรียงคีย์เวิร์ด
เสียใจ
จัดชิดขอบคีย์เวิร์ด
เยี่ยม
 
.container {
  display: flex;
  direction: ltr;
}

โดยค่าเริ่มต้น รายการแบบยืดหยุ่นจะอยู่ในแนวเดียวกับ stretch หากต้องการขนาดเนื้อหา สำหรับรายการย่อย คุณจะใช้รูปแบบใดต่อไปนี้

justify-content: flex-start
คุณสมบัติการจัดชิดขอบมีไว้สำหรับการจัดแนวแนวนอน ไม่ใช่แนวตั้ง
align-content: start
content จะจัดเรียงบรรทัด Flex ไม่ใช่การจัดเรียงรายการย่อย
height: auto
การดําเนินการนี้จะไม่มีผล
align-items: flex-start
ใช่ เราต้องการจัดให้อยู่ในแนวดิ่งกับ "top" หรือ "ต้น" ซึ่งจะลบค่าเริ่มต้นที่ยืดออกและใช้ความสูงของเนื้อหาแทน

แหล่งข้อมูล