พอดแคสต์ 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:
รายการจะจัดวางเป็นแถวจากด้านท้ายของคอนเทนเนอร์ Flexcolumn
: รายการแสดงเป็นคอลัมน์column-reverse
: รายการจะจัดวางเป็นคอลัมน์จากด้านท้ายของคอนเทนเนอร์ Flex
คุณลองใช้ค่าทั้งหมดได้โดยใช้กลุ่มรายการในเดโมด้านล่าง
การเปลี่ยนลำดับของรายการและการเข้าถึง
คุณควรระมัดระวังเมื่อใช้พร็อพเพอร์ตี้ที่เรียงลำดับการแสดงผลภาพใหม่จากลำดับในเอกสาร HTML เนื่องจากอาจส่งผลเสียต่อการช่วยเหลือพิเศษ
ค่า row-reverse
และ column-reverse
เป็นตัวอย่างที่ดีของกรณีนี้
การเรียงลำดับใหม่จะเกิดขึ้นกับลำดับภาพเท่านั้น ไม่ใช่ลำดับเชิงตรรกะ
เรื่องนี้เป็นสิ่งสำคัญที่ต้องเข้าใจ เนื่องจากลำดับเชิงตรรกะคือลำดับที่โปรแกรมอ่านหน้าจอจะอ่านออก
เนื้อหา
แล้วทุกคนที่นำทางโดยใช้แป้นพิมพ์ก็จะตามมาเอง
คุณสามารถดูได้ในวิดีโอต่อไปนี้ว่า ในการจัดวางแถวแบบย้อนกลับ การกดแท็บระหว่างลิงก์ถูกตัดการเชื่อมต่อเนื่องจากการไปยังส่วนต่างๆ ด้วยแป้นพิมพ์จะทำตาม DOM ไม่ใช่ภาพ จอแสดงผล
ทุกอย่างที่เปลี่ยนแปลงลําดับของรายการใน 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
flex-direction
เริ่มต้นคือ
column
row
โดยค่าเริ่มต้น คอนเทนเนอร์ Flex จะตัดองค์ประกอบย่อย
รายการแบบยืดหยุ่นของเด็กถูกย่องลง คุณสมบัติ Flex ใดที่ช่วยบรรเทาปัญหานี้ได้
flex-basis
flex-shrink
flex-grow
ภาพรวมการจัดวาง 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
การสาธิตถัดไปมีบรรทัดของรายการแบบยืดหยุ่น 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;
}
หากต้องการจัดแนวแนวตั้งด้วย Flexbox ให้ใช้
.container {
display: flex;
direction: ltr;
}
ในการจัดแนวตามแนวนอนกับ Flexbox ให้ใช้
.container {
display: flex;
direction: ltr;
}
โดยค่าเริ่มต้น รายการ Flex จะจัดแนวตาม stretch
หากต้องการเนื้อหา
ขนาดที่ใช้สำหรับรายการย่อย คุณจะใช้รูปแบบใดต่อไปนี้
height: auto
justify-content: flex-start
align-content: start
align-items: flex-start
แหล่งข้อมูล
- เลย์เอาต์กล่องแบบยืดหยุ่นของ CSS ใน MDN มีชุดคำแนะนำโดยละเอียดพร้อมตัวอย่าง
- คู่มือ Flexbox ของ CSS Tricks
- สิ่งที่จะเกิดขึ้นเมื่อสร้างคอนเทนเนอร์ Flexbox Flex
- ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับการจัดวางใน Flexbox
- กล่องที่ยืดหยุ่นได้ใหญ่แค่ไหน
- กรณีการใช้งานสำหรับ Flexbox
- ตรวจสอบและแก้ไขข้อบกพร่องของเลย์เอาต์ CSS Flexbox ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome