Flexbox (CSS Flexible Box Layout) เป็นวิธีจัดเรียงองค์ประกอบในคอนเทนเนอร์ (ซึ่งเรียกว่าคอนเทนเนอร์ Flex) องค์ประกอบที่อยู่ในคอนเทนเนอร์ (เรียกว่ารายการ Flex) จะขยายหรือย่อได้เพื่อเพิ่มประสิทธิภาพพื้นที่คอนเทนเนอร์โดยที่ยังคงการจัดลําดับและระยะห่างไว้ตามที่กำหนด คุณจะเห็นว่า Flexbox มีประโยชน์อย่างยิ่งหากต้องการจัดเรียงรายการขนาดต่างๆ เป็นแถวหรือคอลัมน์ โดยรายการขนาดใหญ่จะใช้พื้นที่มากกว่าไฟล์ขนาดเล็ก
การตั้งค่า Flexbox
คุณดูการตั้งค่า Flexbox ได้ในแผงการปรับเปลี่ยนตามอุปกรณ์ในแท็บ Flexbox
ใช้ Flexbox
หากต้องการใช้ Flexbox ให้เลือกช่องทําเครื่องหมายใช้ Flexbox องค์ประกอบที่อยู่ระดับบนสุด ณ ขณะนั้นๆ จะกลายเป็นคอนเทนเนอร์ Flex และคุณสมบัติต่างๆ ของ Flexbox จะพร้อมใช้งานในแผงการปรับเปลี่ยนตามอุปกรณ์
Flexbox จะไม่พร้อมใช้งานในกรณีต่อไปนี้
- องค์ประกอบหลักรายการปัจจุบันคือองค์ประกอบของข้อความ เช่น
<p>หรือ<h1> - องค์ประกอบหลักรายการปัจจุบันมีองค์ประกอบในหน้า เช่น
<span>หรือ<a>ซึ่งจะไม่มีผลหากองค์ประกอบหลักเป็นหน้าเว็บ
องค์ประกอบย่อยโดยตรงของคอนเทนเนอร์ Flex จะกลายเป็นรายการ Flex (ไม่รวมเลเยอร์ไกด์) รายการ Flex จะจัดเรียงตามแกนหลัก ซึ่งสามารถตั้งค่าเป็นแนวนอนหรือแนวตั้งก็ได้ นอกจากนี้ คุณยังกําหนดค่าทิศทางที่เนื้อหาไหลไปตามแกนได้ด้วย เนื่องจากการวางแนวและทิศทางของ Flexbox นั้นเปลี่ยนแปลงได้ คุณสมบัติจึงตั้งเป็นค่าต่างๆ เช่น "flex-เริ่มต้น" และ "flex-สิ้นสุด" แทนที่จะเป็นบน ล่าง ซ้าย หรือขวา
ทิศทาง
ทิศทางจะกําหนดวิธีการจัดเรียงรายการ Flex โดยการตั้งค่าแกนหลักและทิศทางการเคลื่อนที่ตามแกน
| ทิศทาง | พฤติกรรม | แกนหลัก |
|---|---|---|
| แถว | รายการ Flex จะจัดเรียงเป็นแถวตามทิศทางการไหลของข้อความ (เริ่มจากด้านซ้ายสําหรับภาษาที่อ่านจากซ้ายไปขวา เช่น อังกฤษ) |
แนวนอน |
| แถว-ย้อนกลับ | รายการ Flex จะจัดเรียงเป็นแถว ในทิศทางย้อนกลับของการไหลของข้อความ (เริ่มจากด้านขวาสําหรับภาษาที่อ่านจากซ้ายไปขวา เช่น อังกฤษ) |
แนวนอน |
| คอลัมน์ | รายการ Flex จะจัดเรียงเป็นคอลัมน์ไปตามทิศทางการไหลของเนื้อหา (โดยทั่วไปจะเริ่มจากด้านบน) |
แนวตั้ง |
| คอลัมน์-ย้อนกลับ | รายการ Flex มีการจัดเรียงเป็นคอลัมน์ในทิศทางย้อนกลับของการไหลของเนื้อหา (โดยทั่วไปจะเริ่มจากด้านล่าง) |
แนวตั้ง |
การเว้นระยะห่าง
ระยะห่างจะเว้นระหว่างรายการ Flex โดยอัตโนมัติ หรือใช้ระยะห่างคงที่
| การเว้นระยะห่าง | พฤติกรรม |
|---|---|
| มาตรฐาน | ระบบจะจัดเรียงรายการ Flex โดยอัตโนมัติในคอนเทนเนอร์ Flex ตามการตั้งค่าการจัดชิดขอบ การรวม (Wrap) และการจัดข้อความที่ระบุไว้ |
| คงที่ | ระบบจะจัดเรียงรายการ Flex ตามการเว้นระยะห่างย่อย (Child) และระยะห่างระหว่างขอบเขต (Boundary) ที่ระบุไว้ |
การจัดชิดขอบ
การจัดชิดขอบจะเป็นตัวกำหนดการจัดวางรายการ Flex ตามแกนหลัก การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างมาตรฐาน
| การจัดชิดขอบ | พฤติกรรม |
|---|---|
| flex-เริ่มต้น | รายการ Flex จะรวมกันอยู่ที่ขอบเริ่มต้นของแถวหรือคอลัมน์ |
| flex-สิ้นสุด | รายการ Flex จะรวมกันอยู่ที่ขอบสิ้นสุดของแถวหรือคอลัมน์ |
| ตรงกลาง | รายการ Flex มีจุดศูนย์กลางอยู่ตามแนวแกนหลัก |
| ระยะห่าง-ระหว่าง | ระยะห่างระหว่างรายการ Flex จะเว้นเท่าๆ กันไปตามแนวแกนหลัก โดยมีจุดเริ่มต้นและสิ้นสุดที่ขอบของคอนเทนเนอร์ |
| ระยะห่าง-โดยรอบ | ระยะห่างระหว่างรายการ Flex จะเว้นเท่าๆ กันไปตามแนวแกนหลัก โดยเว้นระยะห่างจากขอบทั้งสองด้านคนละครึ่ง |
| ระยะห่าง-เท่าๆ กัน | ระยะห่างระหว่างรายการ Flex จะเว้นเท่าๆ กันไปตามแนวแกนหลัก โดยมีระยะห่างเท่ากันที่ด้านใดด้านหนึ่งของจุดเริ่มต้นและจุดสิ้นสุด |
การปรับแนวแกนไขว้
การปรับแนวแกนไขว้คือวิธีการจัดเรียงรายการ Flex ตามแนวแกนไขว้ของแถวหรือคอลัมน์ปัจจุบัน
| การปรับแนวแกนไขว้ | พฤติกรรม |
|---|---|
| flex-เริ่มต้น | รายการ Flex จะจัดวางอยู่ที่ขอบเริ่มต้นของแกนไขว้ |
| flex-สิ้นสุด | รายการ Flex จะจัดวางอยู่ที่ขอบสิ้นสุดของแกนไขว้ |
| ตรงกลาง | รายการ Flex มีจุดศูนย์กลางอยู่ตามแนวแกนไขว้ |
| ยืด | รายการ Flex จะยืดจนเต็มพื้นที่ที่ใช้ได้ตามแกนไขว้ |
| เส้นฐาน | รายการ Flex จะจัดวางไปตามแนวแกนไขว้โดยให้เส้นฐานตรงกัน |
การรวม
การรวมเป็นตัวกําหนดว่าจะรวมเนื้อหาไว้ในคอนเทนเนอร์หรือไม่ การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างมาตรฐาน
| การรวม | พฤติกรรม |
|---|---|
| ไม่รวม | รายการ Flex จะจัดเรียงในแถวหรือคอลัมน์เดียว |
| รวม | รายการ Flex สามารถรวมเพื่อสร้างหลายแถวหรือหลายคอลัมน์ในกรณีที่รายการ Flex มีขนาดใหญ่เกินไปสําหรับบรรทัดเดียว |
| รวม-ย้อนกลับ | รายการ Flex สามารถรวมเพื่อสร้างหลายแถวหรือหลายคอลัมน์ในกรณีที่รายการ Flex มีขนาดใหญ่เกินไปสําหรับบรรทัดเดียว ทิศทางของแกนไขว้จะย้อนกลับ |
การปรับแนวการรวม
การปรับแนวการรวมจะกําหนดวิธีจัดเรียงแถวหรือคอลัมน์ตามแกนไขว้ (ซึ่งตั้งฉากกับแกนหลัก) หากมีแถวหรือคอลัมน์หลายรายการในคอนเทนเนอร์ Flex การตั้งค่านี้จะใช้ได้เมื่อเปิดใช้การเว้นระยะห่างและการตัดข้อความมาตรฐาน
| การปรับแนวการรวม | พฤติกรรม |
|---|---|
| flex-เริ่มต้น | แถวหรือคอลัมน์จะรวมกันอยู่ที่ขอบเริ่มต้นของคอนเทนเนอร์ |
| flex-สิ้นสุด | แถวหรือคอลัมน์จะรวมกันอยู่ที่ขอบสิ้นสุดของคอนเทนเนอร์ |
| ตรงกลาง | แถวหรือคอลัมน์จะอยู่ตรงกลางตามแกนไขว้ |
| ยืด | แถวหรือคอลัมน์จะยืดจนเต็มพื้นที่ที่ใช้ได้ตามแกนไขว้ เว้นแต่ว่าจะมีการกำหนดความสูงไว้ |
| ระยะห่าง-ระหว่าง | ระยะห่างระหว่างแถวหรือคอลัมน์จะเว้นเท่าๆ กันไปตามแนวแกนไขว้ โดยมีจุดเริ่มต้นและสิ้นสุดของแถวหรือคอลัมน์อยู่ที่ขอบของคอนเทนเนอร์ |
| ระยะห่าง-โดยรอบ | ระยะห่างระหว่างแถวหรือคอลัมน์จะเว้นเท่าๆ กันไปตามแนวแกนไขว้ โดยเว้นระยะห่างจากขอบทั้งสองด้านคนละครึ่ง |
การเว้นระยะห่างย่อย
ระยะห่างเป็นพิกเซลที่รักษาไว้ระหว่างวัตถุ 2 รายการในคอนเทนเนอร์ Flex การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างแบบคงที่
การเว้นระยะห่างขอบเขต
ระยะห่างเป็นพิกเซลที่รักษาไว้ระหว่างรายการด้านนอกกับคอนเทนเนอร์ Flex การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างแบบคงที่
ลำดับย่อย
องค์ประกอบที่มีอยู่ใน Flexbox จะแสดงอยู่ที่นี่ หากต้องการจัดลําดับใหม่ ให้ลากรายการไปยังตำแหน่งใหม่ในรายการ
นอกจากนี้คุณยังย้ายรายการ Flex ในพื้นที่งานเพื่อเรียงลําดับใหม่ได้ด้วย
คุณสมบัติย่อยของ Flexbox
รายการ Flex มีคุณสมบัติของตนเอง เลือกคุณสมบัติย่อยเพื่อดูและแก้ไขการตั้งค่า Flexbox
แม้ว่ารายการ Flex อาจมีการขยายขึ้นหรือย่อลง แต่ก็จะไม่เกินความกว้างและความสูงต่ำสุดและสูงสุด คุณสมบัติซ้ายและบนจะปิดใช้งานเนื่องจากรายการ Flex มีการจัดเรียงตามการตั้งค่าของ Flexbox แต่สามารถใช้คุณสมบัติการเปลี่ยนตำแหน่งเพื่อออฟเซ็ตตําแหน่งได้
การปรับแนวแกนไขว้
การปรับแนวแกนไขว้ของรายการ Flex จะลบล้างการปรับแนวแกนไขว้เริ่มต้นที่ตั้งไว้สําหรับคอนเทนเนอร์
| การปรับแนวแกนไขว้ | พฤติกรรม |
|---|---|
| auto | รายการ Flex ใช้การตั้งค่าการปรับแนวแกนไขว้ของคอนเทนเนอร์ Flex |
| เส้นฐาน | เส้นฐานของรายการ Flex จะปรับแนวให้ตรงกับเส้นฐานของ Flex รายการอื่นๆ ที่ใช้การจัดแนวเส้นฐาน |
| ตรงกลาง | รายการ Flex จะวางอยู่ที่ตําแหน่งกึ่งกลางของแกนไขว้ |
| flex-สิ้นสุด | รายการ Flex จะวางอยู่ที่ตำแหน่งตามแกนไขว้ที่ขอบสิ้นสุดของคอนเทนเนอร์ |
| flex-เริ่มต้น | รายการ Flex จะวางอยู่ที่ตำแหน่งตามแกนไขว้ที่ขอบเริ่มต้นของคอนเทนเนอร์ |
| ยืด | รายการ Flex จะยืดให้เต็มพื้นที่ตามแกนไขว้ เว้นแต่ว่าจะมีการกำหนดความสูงไว้ |
Flex ขยาย
แฟกเตอร์การขยาย Flex จะเป็นตัวกำหนดว่ารายการ Flex จะขยายเท่าใดเพื่อให้เต็มพื้นที่ที่มีในคอนเทนเนอร์ Flex โดยจะขยายไปตามแกนหลักและเป็นสัดส่วนกับแฟกเตอร์การขยายของรายการ Flex อื่นๆ ในแถวหรือคอลัมน์เดียวกัน การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างมาตรฐาน
เช่น หากแถวมีรายการ Flex 3 รายการที่มีแฟกเตอร์การขยายเป็น 1, 1 และ 2 รายการ Flex อันสุดท้ายจะขยายกินพื้นที่มากเป็น 2 เท่าของพื้นที่ที่มีในแถวมากกว่ารายการ Flex อื่นๆ
หากผลรวมของแฟกเตอร์การขยาย Flex ทั้งหมดสําหรับรายการในแถวหรือคอลัมน์น้อยกว่า 1 รายการ Flex อาจไม่ใช้พื้นที่ทั้งหมดที่มีอยู่
เมื่อแฟกเตอร์การขยาย Flex เท่ากับ 0 รายการ Flex จะไม่ขยาย
Flex ย่อ
แฟกเตอร์การย่อ Flex จะเป็นตัวกำหนดว่ารายการ Flex จะย่อเท่าใดเพื่อให้พอดีกับพื้นที่ในคอนเทนเนอร์ Flex โดยจะย่อไปตามแกนหลักและเป็นสัดส่วนกับแฟกเตอร์การย่อของรายการ Flex อื่นๆ ในแถวหรือคอลัมน์เดียวกัน การตั้งค่านี้จะใช้งานได้เมื่อใช้การเว้นระยะห่างมาตรฐาน
เช่น หากแถวมีรายการ Flex 3 รายการที่มีแฟกเตอร์การย่อเป็น 1, 1 และ 2 รายการ Flex อันสุดท้ายจะย่อมากกว่าเมื่อเทียบกับรายการ Flex อื่นๆ แฟกเตอร์การย่อ Flex จะพิจารณาขนาดของรายการ Flex
เมื่อแฟกเตอร์การย่อ Flex เท่ากับ 0 รายการ Flex จะไม่ย่อลง