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

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

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

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

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

คุณใช้เลย์เอาต์ Flex ทำสิ่งใดได้บ้าง

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

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

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

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

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

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

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

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

มาดูกันว่า Flexbox ทำงานอย่างไรโดยจัดกลุ่มรายการขนาดต่างๆ เข้าด้วยกันและใช้ 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 จะเริ่มแสดงลักษณะการทำงานบางอย่างของ Flexbox ทันทีโดยใช้ค่าเริ่มต้น

ค่าเริ่มต้นมีความหมายดังนี้

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

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

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

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

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

การเปลี่ยนลำดับของรายการและการเข้าถึง

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

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

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

ดูข้อมูลเพิ่มเติมได้ที่

• การจัดเรียงเนื้อหาใหม่
• ยกเลิกการเชื่อมต่อ Flexbox และแป้นพิมพ์การไปยังส่วนต่างๆ แล้ว

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

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

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

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

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

การรวมรายการ Flex

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

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

หากต้องการให้รายการตัดขึ้นบรรทัดใหม่ ให้เพิ่ม flex-wrap: wrap ลงในคอนเทนเนอร์ Flex

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

เมื่อคอนเทนเนอร์ Flex ตัดขึ้นบรรทัดใหม่ ระบบจะสร้างบรรทัด Flex หลายรายการ ในแง่ของการกระจายพื้นที่ บรรทัดแต่ละบรรทัดจะทํางานเหมือนคอนเทนเนอร์ Flex ใหม่ ดังนั้น หากคุณตัดบรรทัด คุณจะจัดให้บรรทัด 2 อยู่ตรงกับบรรทัดด้านบนในบรรทัด 1 ไม่ได้ นี่คือความหมายของ Flexbox ว่าเป็นมิติเดียว คุณสามารถควบคุมการปรับแนวในแกนเดียว แถว หรือคอลัมน์ ไม่ใช่ทั้ง 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 จะทำให้รายการมีขนาดแตกต่างกัน เนื่องจากพื้นที่ที่ใช้ร่วมกันระหว่างรายการต่างๆ จะแบ่งออกหลังจากจัดวางแต่ละรายการเป็นขนาด max-content ดังนั้น รายการขนาดใหญ่จึงมีพื้นที่มากขึ้น เพื่อบังคับให้ทุกรายการมีขนาดที่สอดคล้องกันและไม่สนใจขนาดของการเปลี่ยนแปลงเนื้อหา 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 รายการที่ 2 มี flex: 2 และรายการที่ 3 มี flex: 3 เมื่อรายการเหล่านี้มีจำนวนมากกว่า 0 ระบบจะแบ่งพื้นที่ว่างในคอนเทนเนอร์ Flex เป็น 6 ส่วน รายการแรกจะได้รับ 1 ส่วน รายการที่ 2 จะได้รับ 2 ส่วน และรายการที่ 3 จะได้รับ 3 ส่วน

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

.item1 {
  flex: 1 1 auto;
}

.item2 {
  flex: 2 1 auto;
}

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

การจัดเรียงรายการ Flex ใหม่

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

ตัวอย่างด้านล่างแสดงลําดับนี้

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

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

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

.container {
  align-content: center;
}

ลองใช้ฟีเจอร์นี้ในการสาธิต ตัวอย่างนี้มีบรรทัดรวมรายการ Flex และคอนเทนเนอร์มี block-size เพื่อให้เรามีพื้นที่เหลือ

ชวเลข place-content

หากต้องการตั้งค่าทั้ง justify-content และ align-content คุณสามารถใช้ place-content กับบัญชีใดก็ได้ หรือ 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 หรือปรับเส้นตั้งในกรณีของชุดรายการ ที่ถูกห่อคลุมไว้

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

.container {
  display: flex;
}

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

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

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

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

การสาธิตถัดไปมีบรรทัดของรายการแบบยืดหยุ่น 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 จึงไม่มี justify-self

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

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

โปรดทราบว่า Flexbox ทำงานร่วมกับระยะขอบอัตโนมัติได้เป็นอย่างดี หากต้องการแยกรายการออกจากกลุ่ม หรือแยกกลุ่มออกเป็น 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;
}

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

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

แหล่งข้อมูล

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