การออกแบบหน้าเว็บให้ยืดหยุ่นสำหรับแสดงได้ทั้งบนหน้าจอคอมพิวเตอร์และมือถือได้ง่ายขึ้น ในปัจจุบันจะนิยมใช้ display แบบ flexbox แต่ด้วยความที่ไม่ค่อยได้ใช้บ่อย เวลาใช้ทีก็จะงงๆ เลยมาจดบันทึกไว้หน่อย
การจัดเรียงวัตถุต่างๆ แบบ flex ก็จะต้องกำหนด container สำหรับบรรจุให้มีคุณสมบัติ flexbox เสียก่อน เช่น
.container { display: flex; }
div { display: flex; }
form { display: flex; }
การจัดเรียงตามแนวนอนแกน x เรียกว่า main-axis
การจัดเรียงตามแนวตั้งแกน y เรียกว่า cross-axis
จากนั้นก็กำหนดคุณสมบัติเกี่ยวกับ flexbox ให้กับวัตถุภายใน (flex item) ต่างๆ ลงไป โดยหากต้องการจัดเรียงวัตถุแบบซับซ้อน ก็สามารถกำหนดความเป็น container ให้กับวัตถุซ้อนลงไปหลายชั้นได้อีก นั่นคือ flex item ก็สามารถเป็น container ได้เช่นกัน
คุณสมบัติที่กำหนดให้กับ flex container สำหรับการจัดเรียงมีดังนี้
1. flex-direction
เป็นการกำหนดการเรียงตัวของ flex item
- row (ค่าตั้งต้น) เรียงตามแนวนอน (จากซ้ายไปขวา)
- row-reverse เรียงตามแนวนอนแบบย้อนกลับ (จากขวาไปซ้าย)
- column เรียงตามแนวตั้ง (จากบนลงล่าง)
- colume-reverse เรียงตามแนวตั้งแบบย้อนกลับ (จากล่างขึ้นบน)
2. flex-wrap
เป็นการกำหนดว่ากรณีที่ขนาดของ flex item ทั้งหมดใหญ่เกินกว่าความกว้างของ flex container จะให้แสดงผลยังไง
- nowrap (ค่าตั้งต้น) จะบีบอัด flex item รวมอยู่ในแถวเดียวกัน โดยย่อขนาดความกว้างของวัตถุตามสัดส่วน
- wrap ให้คงความกว้างของ flex item เอาไว้ ถ้าอันไหนใส่แล้วล้นความกว้างของ flex container ก็จะปัดลงไปอยู่แถวใหม่
- wrap-reverse การปัด flex item จะเป็นการดันลงไปแบบย้อนกลับ
3. flex-flow
คือการกำหนด flex-direction และ flex-wrap แบบที่รวมกันอยู่ในบรรทัดเดียว
4. justify-content
สำหรับกำหนดค่าการจัดเรียง flex item ของแนวนอน (main axis)
- flex-start (ค่าตั้งต้น) กำหนดให้วัตถุเรียงชิดซ้าย
- flex-end กำหนดให้วัตถุเรียงชิดขวา
- center กำหนดให้วัตถุอยู่กึ่งกลาง
- space-between กำหนดให้วัตถุชิดซ้ายและขวา ระหว่างกลางให้เว้นว่างตามพื้นที่กระจายตัวของความกว้างวัตถุ
- space-around คล้ายกับ space-between แต่ด้านซ้ายและขวาให้เว้นว่างด้วย
- space-evenly คล้ายกับ space-between แต่การเว้นว่างด้านซ้าย ด้านขวา และระหว่างวัตถุ จะเป็นช่องว่างขนาดเท่ากันทั้งหมด
5. align-ttems
สำหรับกำหนดค่าการจัดเรียง flex item ของแนวตั้ง (cross axis)
flex-start (ค่าตั้งต้น) กำหนดให้วัตถุอยู่ชิดด้านบนสุดของ container
flex-end กำหนดให้วัตถุวางอยู่ชิดด้านล่างสุดของ container
center กำหนดให้วัตถุวางอยู่กึ่งกลางของ container
stretch กำหนดให้วัตถุทุกอัน ยืดความสูงตามขนาดของ container
6. gap
ใช้กำหนดช่องว่างระหว่างวัตถุ flex item เมื่อมีการจัดเรียงวัตถุแบบเพิ่มช่องว่าง (space-between, space-around, space-evenly) ซึ่งค่าที่กำหนดจะเป็นค่าขั้นต่ำ (minimum space) หากช่องว่างของจริงมีมากกว่าช่องว่างที่กำหนด ก็จะไม่เกิดผลใดๆ (รวมถึงช่องว่างของ grid และ multi-column)
row-gap ช่องว่างด้านข้าง
column-gap ช่องว่างด้านบนล่าง
gap หากใส่ค่าเดียว จะกำหนดช่องว่างรอบด้าน (สามารถกำหนดแยกได้ แบบเดียวกับที่กำหนดค่า margin, padding)
7. flex-grow
เป็นการกำหนดขนาดของ flex item ในกรณีที่ต้องการยืดหดให้เต็มพื้นที่ ขนาดใหญ่สุดคือ 1
8. order
สำหรับกำหนดลำดับการแสดงผล เช่นต้องการการเรียบตำแหน่งที่แตกต่างกันเวลาแสดงผลบนหน้าจอคอมพิวเตอร์กับอุปกรณ์มือถือ ตัวเลขน้อยจะแสดงก่อน
การจัดเรียงวัตถุ (Alignment)
คือการจัดตำแหน่งของ flex item ว่าจะให้ชิดหน้าหลังซ้ายขวาบนล่าง หรือจัดกึ่งกลาง
justify-content
กำหนดตำแหน่งตามแนวนอน (main axis)
flex-start
flex-end
center
align-items
กำหนดตำแหน่งตามแนวตั้ง (cross axis)
flex-start
flex-end
center
place-content คือรูปแบบคำสั่งย่อแบบรวบยอดของ justify-content และ align-content
align-self
คล้ายกับ align-items แต่ใช้ในการกำหนดที่ตัววัตถุ นั่นคือปกติแล้วการกำหนดค่าจะส่งผลกับทุกๆ วัตถุใน container แต่หากกำหนดค่า align-seft นั่นคือการกำหนดที่ตัววัตถุให้ต่างจาก container ที่มันอยู่
flex-start
flex-end
center
การควบคุมพื้นที่ภายในของ flex item
flex-grow
flex-shrink
flex-basis
รายการคุณสมบัติทั้งสามนี้ สามารถเขียนรวบยอดให้อยู่ในรายการเดียวได้คือ flex
[ Reference ]
ไม่มีความคิดเห็น:
แสดงความคิดเห็น