CSS Grid Layout มี Element 2 ระดับ: Grid Container (Parent) — Element ที่ display: grid Grid Items (Children) — ลูกโดยตรงของ Container ตัวอย่าง Grid 6 Elements <!DOCTYPE html> <html> <head> <style> .container { display: grid; grid-templat

ใช้ align-content: flex-start จัด Flex Lines (หลายบรรทัด) ชิดจุดเริ่มต้นของ Cross Axis ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; height: 200px; background-color: blue; align-content

ใน CSS Grid Layout เส้นแนวตั้งเรียกว่า Grid Columns (Grid Column Lines) คำอธิบาย: Grid Columns คือช่องทางแนวตั้งที่ Grid Items วางอยู่ กำหนดด้วย grid-template-columns เช่น auto auto (2 คอลัมน์), 1fr 2fr 1fr (3 คอลัมน์สัดส่วน 1:2:1)

ใช้ flex-wrap ระบุว่า Flex Items ควร Wrap (ขึ้นบรรทัดใหม่) หรือไม่เมื่อพื้นที่ไม่พอ ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; flex-wrap: wrap; /* ให้ Wrap เมื่อไม่พอพื

ใช้ flex-basis กำหนดขนาดเริ่มต้นของ Flex Item ก่อนที่จะมีการ Grow หรือ Shrink ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; } .mycontainer > div { backg

ใช้ Flexbox Layout Module ออกแบบ Layout ที่ยืดหยุ่น Responsive ได้ง่าย ประกอบด้วย Flex Container และ Flex Items คุณสมบัติของ Flex Container: flex-direction — ทิศทาง Main Axis (row, column, row-reverse, column-reverse) flex-wrap — การWrap (nowrap, wrap, wrap-reverse) flex-flow — Shorthand ของ direct

ใช้คุณสมบัติ opacity เพื่อเพิ่มความโปร่งใสให้ปุ่ม สร้างลุคเหมือน Disabled Button ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .btn1 { color: black; text-align: center; font-size: 15px; } .btn2 { col

หน้าเว็บควรเข้ากันได้กับทุกอุปกรณ์ (Mobile, Tablet, Desktop) โดยไม่มีข้อบกพร่องด้านการออกแบบ เพื่อดึงดูดผู้ใช้มากขึ้น Responsive Web Design (RWD) คือการสร้าง Design ที่เข้ากันได้กับทุกอุปกรณ์ด้วย HTML และ CSS หลักการสำคัญ: Fluid Grid — ใช้หน่วยสัมพัทธ์ (%) แทนคงที่ (px) Flexible Images — max-width:

Viewport ในการออกแบบเว็บคือพื้นที่ที่มองเห็นได้ของหน้าเว็บบนอุปกรณ์ ตั้งค่า Viewport ด้วย: <meta name=viewport content=width=device-width, initial-scale=1.0> คำอธิบาย: <meta> — สั่งเบราว์เซอร์ควบคุมมิติของหน้าเว็บ width=device-width — ตั้งความกว้างเท่าหน้าจออุปกรณ์ initial-scale=1.0 — ร

ตั้งค่า Viewport ด้วย Meta Tag ดังนี้: <meta name=viewport content=width=device-width, initial-scale=1.0> คำอธิบาย: <meta> — สั่งเบราว์เซอร์ควบคุมมิติของหน้าเว็บ width=device-width — ตั้งความกว้างเท่ากับความกว้างหน้าจออุปกรณ์ initial-scale=1.0 — ระดับซูมเริ่มต้น 100% ความสำคัญ: ต้องวาง

สร้าง Layout แบบ Grid ที่ Responsive ด้วย float และ box-sizing: border-box ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> * { box-sizing: border-box; } .header

ตั้ง width: 100% และ height: auto เพื่อทำให้ Image Responsive ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> img { width: 100%; height: auto; } </st

ใช้ max-width: 100% และ height: auto เพื่อทำให้ Image Responsive ไม่เกินขนาดต้นฉบับ ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> img { max-width: 100%; height: a

คุณสมบัติ flex-flow เป็น Shorthand รวม flex-direction และ flex-wrap ในบรรทัดเดียว ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: orange; flex-flow: column wrap; /* direction: colum

ใช้ background-size: contain หรือ cover ร่วมกับ width: 100% เพื่อทำให้ Background Image Responsive ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> div { width: 100%;

เพื่อทำให้ Video Player ตอบสนองตามขนาดหน้าจอ (Responsive) ให้ตั้ง width: 100% และ height: auto ตัวอย่าง <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1.0> <style> video { width: 100%;

ใช้ :hover สำหรับเอฟเฟกต์ Hover และ border-radius สำหรับมุมโค้ง ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .demo { display: inline-block; } .demo a { color: red; padding: 5px 12px; text-decoration

ใช้ justify-content: space-between เพื่อกระจาย Flex Items ให้มีระยะห่างเท่ากัน Item แรกชิดซ้าย Item สุดท้ายชิดขวา ตัวอย่าง <!DOCTYPE html> <html> <head> <style> .mycontainer { display: flex; background-color: red; justify-conten

column-rule-style คืออะไร? คุณสมบัติ column-rule-style กำหนด รูปแบบเส้นแบ่ง ระหว่างคอลัมน์ใน Multi-column Layout คล้ายกับ border-style ค่าที่ใช้ได้ ค่า รูปแบบ none (default) ไม่มีเส้นแบ่ง solid เส้นทึบ dashed

column-rule-width คืออะไร? คุณสมบัติ column-rule-width กำหนด ความหนาของเส้นแบ่ง ระหว่างคอลัมน์ใน Multi-column Layout ทำงานร่วมกับ column-rule-style และ column-rule-color ค่าที่ใช้ได้ Keyword: thin, medium (default), thick Length: px, em, rem, pt (เช่น 1px, 2px, 0.1em) ไม่รองรับค่าลบ ตัวอย