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

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

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

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

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

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

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

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

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

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

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

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

คุณสามารถทำ 2 อย่างบนแกนกากบาท คุณสามารถย้ายรายการทีละรายการหรือเป็นกลุ่ม เพื่อให้จัดเรียงในแนวเดียวกันและยืดหยุ่นได้ คอนเทนเนอร์ นอกจากนี้ หากคุณรวมเส้นเฟลกซ์ไว้ คุณสามารถใช้เส้นเหล่านั้นเป็นกลุ่มเพื่อควบคุมวิธีการกำหนดพื้นที่ให้กับบรรทัดเหล่านั้น คุณจะได้เห็นการใช้งานจริงทั้งหมดนี้ในเชิงปฏิบัติตลอดทั้งคู่มือนี้ ในตอนนี้ โปรดทราบว่าแกนหลักจะตามหลัง 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

ดูข้อมูลเพิ่มเติมได้จากหัวข้อต่อไปนี้

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

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

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

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

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

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

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

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

วันที่

เมื่อผู้เข้าชมถึงรายการ Flex ขนาดเนื้อหาขั้นต่ำจะเริ่มล้นคอนเทนเนอร์

รายการที่แสดงโดยใช้ค่าเริ่มต้นจะย่อเล็กสุดเท่าที่ทำได้ ให้เป็นขนาด 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 จะทำให้สินค้ามีขนาดแตกต่างกัน เนื่องจากพื้นที่ว่างที่แชร์กันระหว่างรายการต่างๆ จะถูกแชร์หลังจากวางแต่ละรายการ ขนาดเนื้อหาสูงสุด ดังนั้นไฟล์ขนาดใหญ่จะมีพื้นที่มากกว่า เพื่อบังคับให้ทุกรายการมีขนาดที่สอดคล้องกันและไม่สนใจขนาดของการเปลี่ยนแปลงเนื้อหา 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: none ด้วย ซึ่งจะทําให้รายการแบบยืดหยุ่นที่ไม่ยืดหยุ่นไม่ขยายหรือหด ซึ่งอาจเป็นประโยชน์ในกรณีที่คุณใช้ Flexbox เท่านั้นในการเข้าถึงคุณสมบัติการปรับแนว แต่ไม่ต้องการลักษณะการทำงานที่ยืดหยุ่น

ทำให้รายการเติบโตในอัตราที่แตกต่างกัน

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

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

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

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

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

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

row

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

column

การตั้งค่าทิศทางเฟลกซ์เป็นคอลัมน์เป็นวิธีที่ยอดเยี่ยมในการซ้อนองค์ประกอบ แต่ไม่ใช่ค่าเริ่มต้น

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

จริง

ต้องเปิดใช้การรวม

เท็จ

ใช้ flex-wrap: wrap กับ display: 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 สำหรับชุดของ ค่าที่เป็นไปได้

หมายเหตุ: เพื่อให้พร็อพเพอร์ตี้ justify-content ทําทุกอย่างได้ต้องมีพื้นที่เหลือในคอนเทนเนอร์บนแกนหลัก หากรายการมีขนาดเต็มแกน ก็จะไม่มีพื้นที่ให้แชร์ ดังนั้นพร็อพเพอร์ตี้จึงไม่ทํางาน

ด้วย 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 แกน หากคุณระบุทั้งรหัสแรกสำหรับ 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 ซึ่งเป็นเหตุผลที่ทำให้รายการอยู่ในแถวยืดยาวเท่ากับความสูงของรายการที่สูงที่สุดโดยค่าเริ่มต้น หากต้องการเปลี่ยนแปลง ให้เพิ่มพร็อพเพอร์ตี้ align-self ลงในรายการแบบยืดหยุ่น

.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

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

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

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

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

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

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

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

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

ทดสอบความรู้ของคุณเกี่ยวกับ 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 ปรับแนวเส้นเฟลกซ์ ไม่ใช่การจัดข้อความรายการย่อย

height: auto

การดําเนินการนี้จะไม่มีผล

align-items: flex-start

ใช่ เราต้องการปรับแนวโฆษณาชิด "ด้านบน" หรือเริ่มต้น ซึ่งจะนำค่าการขยายเริ่มต้นออกและใช้ความสูงของเนื้อหาแทน

แหล่งข้อมูล

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