พร็อพเพอร์ตี CSS ที่ช่วยสร้างเลย์เอาต์ที่ใช้งานได้ด้วยเพียงบรรทัดเดียว
-
จัดกึ่งกลาง! → place-items: center
-
แกะแพนเค้ก → flex: [grow] [shrink] [baseWidth]
-
ไซด์บาร์ → grid-template-columns: minmax([min],[max])
-
ซ้อนแพนเค้ก → grid-template-rows: auto 1fr auto
-
เว็บแบบคลาสสิก → grid-template: auto 1fr auto / auto 1fr auto
-
กริดแบบ 12 คอลัมน์ → grid-template-columns: repeat(12, 1fr)
-
RAM (Repeat, Auto, MinMax) → grid-template-columns: repeat(auto-fit, minmax([base], 1fr))
-
รักษาระยะห่างระหว่างกัน → justify-content: space-between
-
รักษาสไตล์ → width: clamp([min], [actual], [max])
-
รักษาสัดส่วน → aspect-ratio → [width] / [height]
1 ความคิดเห็น
place-itemsกับแพนเค้กมีประโยชน์มากจริง ๆ นะ