เลย์เอาต์ทันสมัย 10 แบบใน CSS บรรทัดเดียว

โพสต์นี้ไฮไลต์ CSS ที่มีประสิทธิภาพเพียงไม่กี่บรรทัดซึ่งทำหน้าที่ยกน้ำหนักอย่างจริงจังและช่วยสร้างเลย์เอาต์ที่ทันสมัยและแข็งแกร่ง

อูนา คราเวตส์

เลย์เอาต์ CSS สมัยใหม่ช่วยให้นักพัฒนาซอฟต์แวร์เขียนกฎการจัดรูปแบบที่เป็นประโยชน์และมีประสิทธิภาพสูงได้ด้วยการกดแป้นพิมพ์เพียงไม่กี่ครั้ง จากที่กล่าวข้างต้นและการโพสต์หลังจากนั้นเป็นการตรวจสอบ CSS ที่มีประสิทธิภาพ 10 บรรทัด ซึ่งทำหน้าที่ยกน้ำหนักอย่างจริงจัง

หากต้องการติดตามหรือเล่นเดโมเหล่านี้ด้วยตัวเอง โปรดดูการฝัง Glitch ด้านบนหรือไปที่ 1linelayouts.glitch.me

01. กึ่งกลางสุด: place-items: center

สำหรับเลย์เอาต์แบบ "บรรทัดเดียว" แรก เราจะมาไขปริศนาที่ยิ่งใหญ่ที่สุดในพื้นที่ CSS ทั้งหมด: ทำให้ทุกอย่างอยู่ตรงกลาง เราอยากให้คุณทราบว่าการใช้ place-items: center นั้นง่ายกว่าที่คุณคิด

ก่อนอื่นให้ระบุ grid เป็นเมธอด display แล้วเขียน place-items: center ในองค์ประกอบเดียวกัน place-items เป็นชวเลขเพื่อตั้งค่าทั้ง align-items และ justify-items พร้อมกัน หากตั้งค่าเป็น center ทั้ง align-items และ justify-items จะตั้งค่าเป็น center

.parent {
  display: grid;
  place-items: center;
}

วิธีนี้จะช่วยให้เนื้อหาอยู่ในจุดศูนย์กลางอย่างสมบูรณ์โดยไม่คำนึงถึงขนาดภายใน

02. แพนเค้กสำเร็จรูป: flex: <grow> <shrink> <baseWidth>

ต่อไปเป็นแพนเค้กแยกชิ้นส่วนแล้ว นี่คือเลย์เอาต์ทั่วไปสำหรับเว็บไซต์การตลาด เช่น ซึ่งอาจมีแถว 3 รายการ ซึ่งมักจะมีรูปภาพ ชื่อ และข้อความบางส่วนที่อธิบายคุณลักษณะบางอย่างของผลิตภัณฑ์ สำหรับอุปกรณ์เคลื่อนที่ เราจะต้องการให้รูปภาพเหล่านั้นเรียงซ้อนกันสวยงามและจะขยายเมื่อเราเพิ่มขนาดหน้าจอ

การใช้ Flexbox สำหรับเอฟเฟกต์นี้จะทำให้คุณไม่ต้องใช้คำค้นหาสื่อเพื่อปรับตำแหน่งขององค์ประกอบเหล่านี้เมื่อปรับขนาดหน้าจอ

ชวเลข flex ย่อมาจาก flex: <flex-grow> <flex-shrink> <flex-basis>

ด้วยเหตุนี้ หากต้องการให้กล่องมีขนาด <flex-basis> พอดี ให้ย่อขนาดที่เล็กลง แต่ไม่ต้องยืดออกเพื่อเติมพื้นที่เพิ่มเติม ให้เขียนว่า flex: 0 1 <flex-basis> ในกรณีนี้ <flex-basis> ของคุณคือ 150px จึงมีลักษณะเป็น

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

หากคุณต้องการให้กล่องยืดออกจนเต็มพื้นที่เมื่อตัดข้อความไปยังบรรทัดถัดไป ให้ตั้งค่า <flex-grow> เป็น 1 ซึ่งจะมีลักษณะดังต่อไปนี้

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

ตอนนี้เมื่อคุณเพิ่มหรือลดขนาดหน้าจอ รายการ Flex เหล่านี้จะหดตัวและใหญ่ขึ้น

03. แถบด้านข้างบอกว่า grid-template-columns: minmax(<min>, <max>) …)

การสาธิตนี้ใช้ประโยชน์จากฟังก์ชัน minmax สำหรับเลย์เอาต์แบบตารางกริด สิ่งที่เราทําคือการตั้งค่าขนาดแถบด้านข้างขั้นต่ำเป็น 150px แต่สําหรับหน้าจอขนาดใหญ่ ให้ขยายขนาดได้ถึง 25% แถบด้านข้างจะใช้พื้นที่ 25% ในแนวนอนเสมอจนกว่า 25% จะมีขนาดเล็กกว่า 150px

เพิ่มเป็นค่าของ grid-template-column ด้วยค่าต่อไปนี้: minmax(150px, 25%) 1fr รายการในคอลัมน์แรก (แถบด้านข้างในกรณีนี้) ได้รับ minmax เป็น 150px ที่ 25% และรายการที่ 2 (ส่วน main ที่นี่) จะใช้พื้นที่ที่เหลือเป็นแทร็ก1frแทร็กเดียว

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. กองแพนเค้ก: grid-template-rows: auto 1fr auto

ตัวอย่างนี้ไม่ห่อลูกด้วยชิ้นส่วนเมื่อขนาดหน้าจอเปลี่ยนแปลง ซึ่งต่างจากแพนเค้ก Deconstructed โดยทั่วไปมักเรียกว่าส่วนท้ายแบบติดหนึบ เลย์เอาต์นี้มักใช้กับทั้งเว็บไซต์และแอปในแอปพลิเคชันบนอุปกรณ์เคลื่อนที่ (ส่วนท้ายมักจะเป็นแถบเครื่องมือ) และเว็บไซต์ (แอปพลิเคชันหน้าเว็บเดียวมักใช้เลย์เอาต์ส่วนกลางนี้)

การเพิ่ม display: grid ลงในคอมโพเนนต์จะทำให้มีตารางกริดของคอลัมน์เดียว แต่พื้นที่หลักจะสูงเท่ากับเนื้อหาที่มีส่วนท้ายอยู่ด้านล่างเท่านั้น

หากต้องการให้ส่วนท้ายยึดติดกับด้านล่าง ให้เพิ่มรายการต่อไปนี้ 

.parent {
  display: grid;
  grid-template-rows: auto 1fr auto;
}

การดำเนินการนี้จะตั้งค่าเนื้อหาส่วนหัวและส่วนท้ายให้รับขนาดรายการย่อยโดยอัตโนมัติ และใช้พื้นที่ที่เหลือ (1fr) กับพื้นที่หลัก ส่วนแถวที่มีขนาด auto จะใช้ขนาดของเนื้อหาขั้นต่ำของรายการย่อย ดังนั้น เมื่อเนื้อหามีขนาดใหญ่ขึ้น แถวจะมีขนาดเพิ่มขึ้นเพื่อปรับขนาด

พฤษภาคม เลย์เอาต์จอกศักดิ์สิทธิ์แบบคลาสสิก: grid-template: auto 1fr auto / auto 1fr auto

สำหรับเลย์เอาต์สิ่งศักดิ์สิทธิ์แบบคลาสสิกจะมีส่วนหัว ส่วนท้าย แถบด้านข้างทางซ้าย แถบด้านข้างทางขวา และเนื้อหาหลัก ซึ่งคล้ายกับเลย์เอาต์ก่อนหน้านี้ แต่ตอนนี้มีแถบด้านข้างแล้ว

หากต้องการเขียนตารางกริดนี้ทั้งหมดโดยใช้โค้ดบรรทัดเดียว ให้ใช้พร็อพเพอร์ตี้ grid-template ซึ่งทำให้คุณสามารถตั้งค่าทั้งแถวและคอลัมน์ได้พร้อมกัน

พร็อพเพอร์ตี้และค่าคู่กันคือ grid-template: auto 1fr auto / auto 1fr auto เครื่องหมายทับ (/) ระหว่างรายการที่คั่นด้วยการเว้นวรรครายการแรกและรายการที่ 2 คือตัวแบ่งระหว่างแถวและคอลัมน์

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

เช่นเดียวกับในตัวอย่างสุดท้าย ที่ส่วนหัวและส่วนท้ายมีเนื้อหาที่ปรับขนาดอัตโนมัติ แถบด้านข้างทางซ้ายและขวาจะถูกปรับขนาดโดยอัตโนมัติตามขนาดภายในของบุตรหลาน แต่คราวนี้จะเป็นขนาดแนวนอน (ความกว้าง) แทนที่จะเป็นแนวตั้ง (ความสูง)

ปี 6 ตารางกริด 12 ช่วง: grid-template-columns: repeat(12, 1fr)

ต่อไปเราจะพบกับความคลาสสิกอีกอย่างหนึ่ง ได้แก่ ตารางกริดแบบ 12 ช่วง คุณเขียนตารางกริดใน CSS ได้อย่างรวดเร็วด้วยฟังก์ชัน repeat() การใช้ repeat(12, 1fr); สําหรับคอลัมน์เทมเพลตตารางกริดจะให้ 1fr คอลัมน์ละ 12 คอลัมน์

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

ตอนนี้คุณมีตารางแทร็ก 12 คอลัมน์แล้ว เราก็สามารถวางลูกๆ ของเราลงในตารางกริดได้ วิธีหนึ่งที่ทำได้คือการวางตารางโดยใช้เส้นตาราง ตัวอย่างเช่น grid-column: 1 / 13 จะครอบคลุมตั้งแต่บรรทัดแรกถึงบรรทัดแรกสุดท้าย (13) และครอบคลุม 12 คอลัมน์ grid-column: 1 / 5; จะครอบคลุม 4 รายการแรก

การใช้คีย์เวิร์ด span เป็นการเขียนอีกวิธีหนึ่ง ใช้ span เพื่อกำหนดบรรทัดเริ่มต้น และจำนวนคอลัมน์ที่จะครอบคลุมจากจุดเริ่มต้นนั้น ในกรณีนี้ grid-column: 1 / span 12 จะมีค่าเท่ากับ grid-column: 1 / 13 และ grid-column: 2 / span 6 มีค่าเท่ากับ grid-column: 2 / 8

.child-span-12 {
  grid-column: 1 / span 12;
}

07 RAM (ซ้ำ, อัตโนมัติ, สูงสุด): grid-template-columns(auto-fit, minmax(<base>, 1fr))

สำหรับตัวอย่างที่ 7 นี้ ให้รวมเอาแนวคิดบางส่วนที่คุณได้เรียนรู้ไปแล้วเกี่ยวกับการสร้างเลย์เอาต์ที่ปรับเปลี่ยนตามอุปกรณ์เข้ากับองค์ประกอบย่อยที่จะถูกจัดวางโดยอัตโนมัติและยืดหยุ่น เยี่ยมไปเลย คำสำคัญที่จำได้คือ repeat, auto-(fit|fill) และ minmax()' ซึ่งคุณจำได้จากตัวย่อ RAM

เมื่อรวมกันแล้วจะมีลักษณะดังต่อไปนี้

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

คุณใช้การทำซ้ำอีกครั้ง แต่ครั้งนี้ใช้ auto-fit คำหลักแทนค่าตัวเลขที่ชัดเจน ซึ่งจะเปิดใช้งานการจัดตำแหน่งอัตโนมัติขององค์ประกอบย่อยเหล่านี้ นอกจากนี้ ยังมีค่าต่ำสุดพื้นฐานที่ 150px โดยมีค่าสูงสุด 1fr ซึ่งหมายความว่าหน้าจอขนาดเล็กจะใช้ความกว้างเต็ม 1fr และจะเริ่มเข้าสู่เส้นเดียวกันเมื่อความกว้างทั้ง 150px ต่อรายการ

เมื่อใช้ auto-fit ช่องจะขยายเนื่องจากขนาดแนวนอนเกิน 150 พิกเซล เพื่อให้เต็มพื้นที่ที่เหลือทั้งหมด อย่างไรก็ตาม หากคุณเปลี่ยนค่านี้เป็น auto-fill ค่าจะไม่ยืดออกเมื่อเกินขนาดฐานในฟังก์ชัน minmax:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

ปี 8 รายการช่อง: justify-content: space-between

สำหรับเลย์เอาต์ถัดไป ประเด็นหลักที่จะแสดงที่นี่คือ justify-content: space-between ซึ่งจะวางองค์ประกอบย่อยรายการแรกและสุดท้ายไว้ที่ขอบของกรอบล้อมรอบ โดยเหลือพื้นที่เท่าๆ กันกระจายระหว่างองค์ประกอบต่างๆ สำหรับการ์ดเหล่านี้ การ์ดจะวางในโหมดการแสดงผลของ Flexbox โดยตั้งค่าทิศทางเป็นคอลัมน์โดยใช้ flex-direction: column

ซึ่งจะวางชื่อ คำอธิบาย และบล็อกรูปภาพไว้ในคอลัมน์แนวตั้งภายในการ์ดหลัก จากนั้นใช้ justify-content: space-between กับองค์ประกอบแรก (ชื่อ) และสุดท้าย (บล็อกรูปภาพ) ที่ขอบของ Flexbox จากนั้นใส่ข้อความอธิบายที่คั่นระหว่างองค์ประกอบเหล่านั้นโดยมีระยะห่างที่เท่ากันกับแต่ละปลายทาง

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

9 หนีบสไตล์ของฉัน: clamp(<min>, <actual>, <max>)

นี่คือจุดที่เราจะอธิบายเทคนิคบางอย่างที่มีการรองรับเบราว์เซอร์น้อยลง แต่มีนัยยะที่น่าสนใจบางอย่างสำหรับเลย์เอาต์และการออกแบบ UI ที่ตอบสนองตามอุปกรณ์ ในการสาธิตนี้ คุณจะกำหนดความกว้างโดยใช้แคลมป์ ดังนี้ width: clamp(<min>, <actual>, <max>)

ซึ่งจะตั้งค่าขนาดต่ำสุดและสูงสุดสัมบูรณ์ รวมถึงขนาดจริง ค่าอาจมีลักษณะดังนี้

.parent {
  width: clamp(23ch, 60%, 46ch);
}

ขนาดต่ำสุดคือ 23ch หรือ 23 อักขระ และขนาดสูงสุดคือ 46ch, 46 อักขระ หน่วยความกว้างของอักขระขึ้นอยู่กับขนาดแบบอักษรขององค์ประกอบ (โดยเฉพาะความกว้างของรูปอักขระ 0) ขนาด "จริง" คือ 50% ซึ่งแสดงถึง 50% ของความกว้างระดับบนสุดขององค์ประกอบนี้

สิ่งที่ฟังก์ชัน clamp() ทำที่นี่คือการทำให้องค์ประกอบนี้คงความกว้าง 50% จนถึง 50% มากกว่า 46ch (ในวิวพอร์ตความกว้าง) หรือเล็กกว่า 23ch (ในวิวพอร์ตขนาดเล็ก) คุณจะเห็นว่าเมื่อผมยืดและย่อขนาดระดับบนสุด ความกว้างของการ์ดนี้จะเพิ่มขึ้นจนถึงจุดต่ำสุดที่บีบและลดลงจนถึงจุดต่ำสุดที่บีบ จากนั้นจะเป็นศูนย์กลางในระดับบนสุด เนื่องจากเราได้ใช้พร็อพเพอร์ตี้เพิ่มเติมเพื่อจัดกึ่งกลาง วิธีนี้จะช่วยให้เลย์เอาต์อ่านได้ง่ายขึ้น เนื่องจากข้อความไม่กว้างเกินไป (เหนือ 46ch) หรือบิดและแคบเกินไป (น้อยกว่า 23ch)

วิธีนี้เป็นวิธีที่ยอดเยี่ยมในการใช้การพิมพ์ที่ตอบสนองตามอุปกรณ์ ตัวอย่างเช่น คุณอาจเขียนว่า: font-size: clamp(1.5rem, 20vw, 3rem) ในกรณีนี้ ขนาดแบบอักษรของบรรทัดแรกจะถูกจำกัดระหว่าง 1.5rem ถึง 3rem เสมอ แต่จะขยายและย่อตามค่าจริง 20vw เพื่อให้พอดีกับความกว้างของวิวพอร์ต

ซึ่งเป็นเทคนิคที่ยอดเยี่ยมเพื่อให้แน่ใจว่าคุณจะอ่านค่าขนาดต่ำสุดและสูงสุดได้ แต่อย่าลืมว่าวิธีนี้ไม่รองรับในเบราว์เซอร์สมัยใหม่ทั้งหมด ดังนั้นให้ตรวจสอบว่าคุณมีไฟล์สำรองและทำการทดสอบ

10. ความเคารพต่อผู้ชม: aspect-ratio: <width> / <height>

และสุดท้าย เครื่องมือรูปแบบสุดท้ายนี้เป็นการทดลองมากที่สุดจากในกลุ่ม เพิ่งมีการเปิดตัว Chrome Canary ใน Chromium 84 และ Firefox ได้พยายามดำเนินการอย่างเต็มที่เพื่อติดตั้งใช้งาน แต่ขณะนี้ยังไม่ได้เปิดตัวในเบราว์เซอร์รุ่นที่มีความเสถียร

อย่างไรก็ตาม เราขอพูดถึงเรื่องนี้เนื่องจากปัญหานี้เกิดขึ้นบ่อย และนั่นเป็นเพียงแค่การคงรักษาสัดส่วนภาพของรูปภาพเท่านั้น

เมื่อใช้พร็อพเพอร์ตี้ aspect-ratio ขณะที่ฉันปรับขนาดการ์ด บล็อกภาพสีเขียวจะคงสัดส่วนภาพ 16 x 9 นี้ไว้ เราเคารพสัดส่วนภาพของ aspect-ratio: 16 / 9 

.video {
  aspect-ratio: 16 / 9;
}

หากต้องการรักษาสัดส่วนภาพ 16 x 9 ไว้โดยไม่มีพร็อพเพอร์ตี้นี้ คุณจะต้องใช้การแฮ็ก padding-top และเพิ่มระยะห่างจากขอบ 56.25% เพื่อตั้งค่าอัตราส่วนอัตราส่วนด้านบนต่อความกว้าง ในเร็วๆ นี้เราจะมีพร็อพเพอร์ตี้สำหรับการดำเนินการนี้เพื่อหลีกเลี่ยงการถูกแฮ็กและความจำเป็นในการคำนวณเปอร์เซ็นต์ คุณสามารถสร้างสี่เหลี่ยมจัตุรัสที่มีอัตราส่วน 1 / 1 ซึ่งก็คืออัตราส่วน 2 ต่อ 1 ด้วย 2 / 1 หรืออะไรก็ได้ตามที่ต้องการ เพื่อปรับขนาดรูปภาพตามอัตราส่วนขนาดที่ตั้งไว้

.square {
  aspect-ratio: 1 / 1;
}

ถึงแม้ฟีเจอร์นี้จะยังเกิดขึ้นอยู่เรื่อยๆ แต่ก็เป็นข้อควรทราบเพราะช่วยแก้ไขปัญหาของนักพัฒนาซอฟต์แวร์หลายครั้งที่ผมต้องเผชิญ โดยเฉพาะเมื่อพูดถึงวิดีโอและ iframe

บทสรุป

ขอขอบคุณที่ติดตามเส้นทางนี้ผ่าน CSS ที่มีประสิทธิภาพ 10 บรรทัด หากต้องการเรียนรู้เพิ่มเติม โปรดดูวิดีโอแบบเต็ม และลองใช้การสาธิตด้วยตัวคุณเอง