Flex Container Properties คืออะไร? คุณสมบัติของ Flex Container (Parent) คือคุณสมบัติที่ใช้กับองค์ประกอบที่มี display: flex หรือ inline-flex คุณสมบัติเหล่านี้ควบคุมการจัดวางและพฤติกรรมของ Flex Items (ลูก) ทั้งหมด รายการคุณสมบัติ Flex Container ทั้ง 6 คุณสมบัติ คุณสมบัติ คำอธิบา

flex-direction คืออะไร? คุณสมบัติ flex-direction กำหนด ทิศทาง (Direction) ของ Main Axis ซึ่งควบคุมว่า flex items จะเรียงตัวอย่างไร: แนวนอน (Row) หรือแนวตั้ง (Column) และลำดับปกติหรือกลับ ค่าทั้ง 4 ค่า ค่า Main Axis ลำดับ Cross Axis row (defaul

หลักการทำงาน เหมือนกับมุมล่างซ้าย แต่เปลี่ยนจาก left เป็น right ใช้ Relative Positioning บนคอนเทนเนอร์ และ Absolute Positioning บนข้อความ ขั้นตอนสำคัญ คอนเทนเนอร์: position: relative รูปภาพ: width: 100%; height: auto ข้อความ: position: absolute; bottom: 10px; right: 19px; ตัวอย่างการใช้งา

align-self คืออะไร? คุณสมบัติ align-self ใช้สำหรับ override การจัดตำแหน่ง Cross Axis ของ flex item เดียว โดยไม่กระทบ items อื่นๆ ในคอนเทนเนอร์เดียวกัน ทับซ้อนค่า align-items ของคอนเทนเนอร์ ค่าที่ใช้ได้ auto (default) - 繼承จาก align-items ของคอนเทนเนอร์ flex-start - ชิดจุดเริ่มต้น Cross Axis

justify-content: space-around คืออะไร? คุณสมบัติ justify-content ควบคุมการจัดเรียงบน Main Axis (แกนหลัก) ค่า space-around จะกระจายพื้นที่ว่าง รอบๆ แต่ละ flex item อย่างเท่าเทียม โดยพื้นที่ขอบจะเป็นครึ่งหนึ่งของพื้นที่ระหว่าง items ตัวอย่างการใช้งาน div { background-color: #ff5722; col

ความสัมพันธ์ระหว่าง flex-wrap และ align-content flex-wrap ควบคุมว่า items จะขึ้นบรรทัดใหม่หรือไม่ ส่วน align-content ควบคุมว่า บรรทัดทั้งหมด (flex lines) จะจัดตัวอย่างไรภายในคอนเทนเนอร์เมื่อมีพื้นที่ว่างบน Cross Axis เงื่อนไข: align-content ทำงานก็ต่อเมื่อ display: flex หรือ inline-flex flex-

flex-wrap คืออะไร? คุณสมบัติ flex-wrap ควบคุมว่า flex items จะ ขึ้นบรรทัดใหม่ (wrap) หรืออยู่บรรทัดเดียว (nowrap) เมื่อพื้นที่ไม่พอ ค่าที่ใช้ได้ ค่า คำอธิบาย nowrap (default) items อยู่บรรทัดเดียว อาจล้นออกนอกคอนเทนเนอร์ wrap i

align-content: space-around คืออะไร? คุณสมบัติ align-content ควบคุมการจัดเรียงบน Cross Axis (แกนตั้งฉากกับ main axis) เมื่อมีหลายบรรทัด (multi-line flex container) ค่า space-around จะกระจายพื้นที่ว่าง รอบๆ แต่ละบรรทัด flex line อย่างเท่าเทียม เงื่อนไขการทำงาน ต้องมี display: flex หรือ inline-fl

แนวคิดพื้นฐาน กลุ่มปุ่มแนวตั้ง (Vertical Button Group) จัดเรียงปุ่มจากบนลงล่าง เหมาะสำหรับ Sidebar, Menu หรือ Form actions ใช้ display: block หรือ Flexbox เพื่อจัดเรียง ตัวอย่างแบบคลาสสิก (ใช้ display: block) <!DOCTYPE html> <html> <head> <style> .mybtn .button {

หลักการทำงาน ใช้คุณสมบัติ opacity ลดความทึบของปุ่ม เพื่อสร้างลักษณะ Disabled หรือ ไม่สามารถกดได้ โดยไม่ต้องใช้ attribute disabled จริงๆ ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <style> .btn { color: black; text-align: center; font-size: 16px;

หลักการทำงาน ใช้ Relative Positioning บนคอนเทนเนอร์ และ Absolute Positioning บนข้อความ เพื่อจัดตำแหน่งข้อความบนรูปภาพได้อย่างแม่นยำ ขั้นตอนสำคัญ คอนเทนเนอร์: position: relative รูปภาพ: width: 100% เพื่อตอบสนองตามขนาดคอนเทนเนอร์ ข้อความ: position: absolute + bottom + left ตัวอย่างการใช้งาน

column-span คืออะไร? คุณสมบัติ column-span ใช้กำหนดให้องค์ประกอบ (element) ขยายครอบคลุมหลายคอลัมน์ แทนที่จะอยู่ในคอลัมน์เดียว เหมาะสำหรับหัวข้อ (headings) หรือรูปภาพที่ต้องการให้แสดงเต็มความกว้าง ค่าที่ใช้ได้ none (ค่าเริ่มต้น) - อยู่ในคอลัมน์เดียวตามปกติ all - ขยายครอบคลุมทุกคอลัมน์ ตัวอย่

column-width คืออะไร? คุณสมบัติ column-width ใช้กำหนด ความกว้างขั้นต่ำ ของแต่ละคอลัมน์ในเลย์เอาต์หลายคอลัมน์ บราวเซอร์จะคำนวณจำนวนคอลัมน์ที่พอดีโดยอัตโนมัติจากพื้นที่ที่มี ความแตกต่างระหว่าง column-width และ column-count คุณสมบัติ พฤติกรรม column-width

คุณสมบัติ columns คืออะไร? คุณสมบัติ columns เป็น shorthand property ที่รวม column-width และ column-count ไว้ในบรรทัดเดียว ใช้สำหรับสร้างเลย์เอาต์หลายคอลัมน์ (multi-column layout) แบบง่ายและรวดเร็ว ไวยากรณ์ columns: ; ตัวอย่างการใช้งาน <!DOCTYPE html> <html> <head> <style&

grid-template-rows คืออะไร? คุณสมบัติ grid-template-rows ใช้สำหรับกำหนดจำนวนแถว (rows) และความสูงของแต่ละแถวใน CSS Grid Layout ช่วยให้ควบคุมโครงสร้างกริดได้อย่างแม่นยำ ค่าที่ใช้ได้ ความยาวคงที่: px, em, rem, % หน่วยยืดหยุ่น: fr (fraction unit) ฟังก์ชัน: minmax(), repeat(), auto คำสำคัญ: m

ตัวแปรใน CSS คืออะไร? ตัวแปรใน CSS หรือที่เรียกว่า Custom Properties ใช้สำหรับกำหนดค่าคุณสมบัติ (property values) แบบกำหนดเองเพื่อนำไปใช้ซ้ำได้ทั่วทั้งหน้าเว็บ ทำให้การจัดการสี ฟอนต์ ขนาด และค่าต่างๆ ง่ายขึ้นและสอดคล้องกันมากขึ้น ไวยากรณ์ (Syntax) :root { --variable-name: value; } selector {

ใช้คุณสมบัติ font-size เพื่อเปลี่ยนขนาดของ Pagination Links ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration: no

คุณสมบัติ flex-shrink กำหนดความสามารถของ flex item ในการยุบตัวเล็กลงเมื่อพื้นที่ไม่พอ ค่าเริ่มต้นคือ 1 (ยุบได้) ตั้งเป็น 0 เพื่อป้องกันไม่ให้ยุบ ตัวอย่าง: ป้องกัน Q4 ไม่ให้ยุบ <!DOCTYPE html> <html>    <head>       <style>        

แนวนอนใน CSS Grid เรียกว่า Grid Rows สามารถกำหนดขนาดและจำนวนแถวได้ด้วยคุณสมบัติ grid-template-rows การใช้งาน .container { display: grid; grid-template-rows: 100px 200px auto; /* 3 แถว: คงที่ 100px, 200px, และส่วนที่เหลือ */ /* หรือใช้ repeat() */ grid-template-rows: repeat(3, 1fr); /* 3 แถว

ช่องว่างระหว่างแถวและคอลัมน์ใน CSS Grid เรียกว่า Grid Gaps สามารถกำหนดได้ด้วยคุณสมบัติ grid-gap, grid-row-gap, grid-column-gap หรือ shorthand gap การใช้งาน .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; /* shorthand สำหรับ row-gap และ column-gap */ /