พอดแคสต์ CSS - 010: Flexbox
รูปแบบการออกแบบที่อาจซับซ้อนในการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์คือแถบด้านข้างที่อยู่ในแนวเดียวกับเนื้อหาบางส่วน เมื่อมีพื้นที่วิวพอร์ต รูปแบบนี้จะใช้งานได้ดี แต่เมื่อมีการลดขนาดพื้นที่ เลย์เอาต์ที่มั่นคงอาจสร้างปัญหาได้
โมเดลเลย์เอาต์แบบกล่องแบบยืดหยุ่น (flexbox) คือโมเดลเลย์เอาต์ที่ออกแบบมาสำหรับเนื้อหาแบบมิติเดียว ซึ่งเชี่ยวชาญในการนำสินค้าจำนวนมากที่มีขนาดแตกต่างกัน และแสดงการจัดวางที่ดีที่สุดสำหรับสินค้าเหล่านั้น
นี่คือรูปแบบเลย์เอาต์ที่เหมาะกับรูปแบบแถบด้านข้างนี้ Flexbox ไม่เพียงช่วยจัดวางแถบด้านข้างและเนื้อหาให้เป็นแบบในหน้า แต่ยังมีพื้นที่ไม่เพียงพอ แถบด้านข้างยังจะขึ้นบรรทัดใหม่อีกด้วย แทนที่จะกำหนดขนาดที่ตายตัวเพื่อให้เบราว์เซอร์ทำตามด้วย Flexbox คุณใช้ขอบเขตที่ยืดหยุ่นเพื่อบอกใบ้ว่าเนื้อหาจะแสดงได้อย่างไรแทน
คุณใช้เลย์เอาต์แบบยืดหยุ่นทําอะไรได้บ้าง
เลย์เอาต์แบบยืดหยุ่นมีฟีเจอร์ต่อไปนี้ ซึ่งคุณจะสำรวจได้ในคู่มือนี้
- โดยจะแสดงเป็นแถวหรือคอลัมน์ก็ได้
- โดยจะเคารพโหมดการเขียนของเอกสาร
- ข้อความเหล่านี้จะแยกเป็นบรรทัดเดียวโดยค่าเริ่มต้น แต่สามารถขอให้ตัดคำหลายบรรทัดได้
- รายการในเลย์เอาต์สามารถจัดเรียงใหม่ได้ โดยอยู่ห่างจากลำดับใน DOM
- โดยสามารถกระจายพื้นที่ภายในสิ่งของต่างๆ ได้ เพื่อให้ข้อความมีขนาดใหญ่ขึ้นและเล็กลงตามพื้นที่ว่างที่อยู่ในอุปกรณ์หลัก
- คุณจะกระจายช่องว่างรอบรายการและเส้น Flex ในเลย์เอาต์ที่รวมไว้ได้โดยใช้คุณสมบัติการปรับแนวของ Box
- สามารถจัดตำแหน่งรายการบนแกนกากบาท
แกนหลักและแกนกากบาท
กุญแจสำคัญในการทำความเข้าใจ Flexbox คือการทำความเข้าใจแนวคิดของแกนหลักและแกนกากบาท
แกนหลักคือแกนที่ตั้งค่าโดยพร็อพเพอร์ตี้ flex-direction
หากค่านั้นคือ row
แกนหลักของคุณจะอยู่ในแถว หากเป็น column
แกนหลักจะอยู่ในคอลัมน์
รายการ Flex จะเคลื่อนไหวเป็นกลุ่มบนแกนหลัก อย่าลืมว่าเรามีสิ่งต่างๆ มากมายและกำลังพยายามหาเลย์เอาต์ที่ดีที่สุดสำหรับกลุ่ม
แกนกากบาทจะวิ่งในทิศทางอื่นไปยังแกนหลัก ดังนั้นหาก flex-direction
เท่ากับ row
แกนกากบาทจะวิ่งไปตามคอลัมน์
คุณทำ 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:
รายการจัดวางเป็นแถวจากส่วนท้ายของคอนเทนเนอร์ Flexcolumn
: รายการจัดวางเป็นคอลัมน์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 จะขยายออกนอกกล่องของคอนเทนเนอร์](https://web.dev/static/learn/css/flexbox/image/a-flex-container-nine-it-e0d8b646b8c9c.jpg?authuser=6&hl=th)
รายการที่แสดงโดยใช้ค่าเริ่มต้นจะลดลงเหลือเล็กที่สุดเท่าที่ทำได้ จนเหลือเท่ากับ 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
column
โดยค่าเริ่มต้น คอนเทนเนอร์ Flex จะตัดรายการย่อย
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
การสาธิตถัดไปมีรายการ 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
แหล่งข้อมูล
- MDN CSS Flexible Box Layout มีคำแนะนำโดยละเอียดพร้อมตัวอย่าง
- คู่มือเคล็ดลับ CSS สำหรับ Flexbox
- สิ่งที่จะเกิดขึ้นเมื่อคุณสร้างคอนเทนเนอร์ Flexbox Flex
- ทุกสิ่งที่คุณจำเป็นต้องทราบเกี่ยวกับการปรับตำแหน่งใน Flexbox
- กล่องยืดหยุ่นนั้นใหญ่แค่ไหน
- กรณีการใช้งานสำหรับ Flexbox
- ตรวจสอบและแก้ไขข้อบกพร่องของเลย์เอาต์ CSS Flexbox ใน Chrome DevTools