ทำตามเทคนิคการจัดกึ่งกลาง 5 เทคนิคขณะทำตามชุดการทดสอบต่างๆ เพื่อดูว่าเทคนิคใดมีความยืดหยุ่นในการเปลี่ยนแปลงมากที่สุด
การอยู่ตรงกลางใน CSS เป็นความท้าทายที่โด่งดัง ซึ่งเต็มไปด้วยมุกตลกและการล้อเลียน ปี 2020 CSS ทุกคนโตขึ้นแล้วและตอนนี้เราสามารถหัวเราะกับมุกตลกเหล่านั้น ไม่ได้แหย่งไปด้วยกัน
หากชอบวิดีโอ นี่คือโพสต์นี้เวอร์ชัน YouTube
ความท้าทาย
การจัดกึ่งกลางมีหลายประเภท ไม่ว่าจะเป็นกรณีการใช้งานที่แตกต่างกัน จำนวนสิ่งที่อยู่ในจุดกึ่งกลาง ฯลฯ ผมจึงสร้าง The Resilience Ringer ขึ้นมาเพื่อแสดงให้เห็นถึงเหตุผลเบื้องหลังเทคนิค "การเอาชนะ" โดยเป็นชุดการทดสอบความเครียดสำหรับกลยุทธ์หลักแต่ละกลยุทธ์ เพื่อสร้างสมดุลให้คุณและสังเกตประสิทธิภาพของการทำงาน ในตอนท้าย ฉันเผยให้เห็นเทคนิคการให้คะแนนสูงสุดและ "มีคุณค่ามากที่สุด" หวังว่าคุณจะได้รับประโยชน์จากเทคนิคและโซลูชันใหม่ๆ ในเร็วๆ นี้
พลังแห่งการรับมือกับปัญหา
วงแหวนรับมือกับสถานการณ์คือการแสดงถึงความเชื่อของฉันที่ว่ากลยุทธ์หลักควรมีความยืดหยุ่นให้สอดคล้องกับเลย์เอาต์สากล วิวพอร์ตขนาดแปรผัน การแก้ไขข้อความ และเนื้อหาแบบไดนามิก หลักการเหล่านี้ช่วยกำหนดการทดสอบความยืดหยุ่นต่อไปนี้สำหรับเทคนิคการจัดกึ่งกลางให้ยั่งยืนดังนี้
- บีบ: การจัดกึ่งกลางควรรองรับการเปลี่ยนแปลงความกว้าง
- Squashed: การจัดกึ่งกลางควรรองรับการเปลี่ยนแปลงความสูงได้
- ทำซ้ำ: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามจำนวนรายการ
- แก้ไข: การจัดกึ่งกลางควรเป็นแบบไดนามิกตามความยาวและภาษาของเนื้อหา
- ขั้นตอน: การจัดกึ่งกลางควรใช้ได้กับทิศทางเอกสารและโหมดการเขียน
โซลูชันที่ประสบความสำเร็จควรแสดงให้เห็นถึงความสามารถในการรับมือโดยการรักษาเนื้อหาไว้ตรงกลางระหว่างที่ถูกบีบ บีบ ทำซ้ำ แก้ไข และเปลี่ยนไปใช้โหมดภาษาและทิศทางต่างๆ ศูนย์ที่มีความเชื่อถือได้และยืดหยุ่น คือศูนย์ที่ปลอดภัย
คำอธิบาย
เราได้ให้คำแนะนำเรื่องสีต่างๆ เพื่อช่วยให้คุณเก็บข้อมูลเมตาไว้ในบริบท
- เส้นขอบสีชมพูแสดงถึงการเป็นเจ้าของรูปแบบการจัดกึ่งกลาง
- กล่องสีเทาคือพื้นหลังบนภาชนะที่ค้นหาเพื่อให้วัตถุอยู่กึ่งกลาง
- เด็กแต่ละคนจะมีสีพื้นหลังเป็นสีขาว คุณจึงดูผลกระทบที่เทคนิคการจัดกึ่งกลางมีต่อขนาดของกล่องย่อยได้ (หากมี)
ผู้แข่งขัน 5 คน
เทคนิคหลัก 5 อย่างในการเข้าสู่ผู้ปลุกพลังสู่การรับมือกับปัญหานั้นมีเพียงแค่ 1 คนที่ได้รับมงกุฎแห่งการปรับตัว 👸
1. ศูนย์เนื้อหา
- Squish: เยี่ยมเลย
- สควอช: เยี่ยมเลย!
- ซ้ำกัน: เยี่ยมเลย
- แก้ไข: เยี่ยมเลย
- ขั้นตอน: เยี่ยมเลย
เพราะเกมจะเอาชนะความกระชับของ display: grid
และชวเลข place-content
ได้ยากเหลือเกิน เนื่องจากเป็นจุดศูนย์กลางและอธิบายเหตุผลสำหรับเด็กๆ รวมกัน จึงเป็นเทคนิคการจัดกึ่งกลางที่มั่นคงสำหรับกลุ่มองค์ประกอบที่มีไว้เพื่ออ่าน
.content-center {
display: grid;
place-content: center;
gap: 1ch;
}
- เนื้อหามีความโดดเด่นแม้มีข้อจำกัดด้านพื้นที่และเนื้อหาส่วนเกิน
- การแก้ไขและการบำรุงรักษาให้อยู่กึ่งกลางในที่เดียว
- ช่องว่างช่วยให้มีระยะห่างที่เท่ากันในหมู่เด็ก n คน
- ตารางกริดสร้างแถวโดยค่าเริ่มต้น
- ตำแหน่งย่อยที่กว้างที่สุด (
max-content
) จะกำหนดความกว้างสำหรับส่วนที่เหลือทั้งหมด ซึ่งจะมีการพูดคุยเพิ่มเติมใน Gentle Flex
เหมาะอย่างยิ่งสำหรับเลย์เอาต์มาโครที่มีย่อหน้าและบรรทัดแรก ต้นแบบ หรือ สิ่งต่างๆ ทั่วไปที่ต้องอ่านออกตรงกลาง
2. อ่อนโยน
- Squish: เยี่ยมเลย
- สควอช: เยี่ยมเลย
- ซ้ำกัน: เยี่ยมเลย
- แก้ไข: เยี่ยมเลย
- ขั้นตอน: เยี่ยมเลย
Gentle Flex เป็นกลยุทธ์ที่ยึดมั่นในเท่านั้น ทั้งนุ่มนวลและนุ่มนวล เนื่องจากจัดกึ่งกลางไม่เหมือน place-content: center
ตรงที่ขนาดกล่องสำหรับเด็กจะไม่เปลี่ยนแปลงไป รายการทั้งหมดจะเรียงซ้อน อยู่กึ่งกลาง และเว้นระยะห่างอย่างนุ่มนวลที่สุด
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
- จัดการเฉพาะการจัดวาง ทิศทาง และการกระจายเท่านั้น
- การแก้ไขและการบำรุงรักษาทั้งหมดรวมอยู่ในที่เดียว
- ช่องว่างช่วยให้มีระยะห่างที่เท่ากันในหมู่เด็ก n คน
- บรรทัดโค้ดส่วนใหญ่
เหมาะกับทั้งเลย์เอาต์มาโครและไมโคร
3. ออโต้บ็อต
- Squish: เยี่ยม
- สควอช: ดีมาก
- ซ้ำ: ปกติ
- แก้ไข: ดีมาก
- ขั้นตอน: ดีมาก
คอนเทนเนอร์ได้รับการตั้งค่าให้ยืดหยุ่นโดยไม่มีรูปแบบการจัดแนว ส่วนรายการย่อยโดยตรงจะมีขอบอัตโนมัติ มีความน่าคิดถึงและน่าทึ่งเกี่ยวกับ
margin: auto
ที่ทำงานในทุกๆ ด้านขององค์ประกอบ
.autobot {
display: flex;
}
.autobot > * {
margin: auto;
}
- เคล็ดลับสนุกๆ
- รวดเร็วและสกปรก
- ผลลัพธ์ที่ไม่ปกติเมื่อล้น
- การกระจายที่สัมพันธ์กันทำให้ไม่มีช่องว่างทำให้เลย์เอาต์สามารถเกิดกับด้านที่แตะ เด็กได้
- การถูก "ผลัก" เข้าไปอยู่ในตําแหน่งนั้นดูไม่เหมาะสมและอาจส่งผลให้ขนาดกล่องของเด็กเปลี่ยนแปลง
เหมาะสำหรับไอคอนจัดกึ่งกลางหรือองค์ประกอบเทียม
4. ศูนย์ Fluffy
- บีบ: แย่
- สควอช: แย่
- ซ้ำกัน: ไม่ดี
- แก้ไข: เยี่ยมเลย
- ขั้นตอน: เยี่ยมเลย (ตราบใดที่คุณใช้คุณสมบัติเชิงตรรกะ)
"ศูนย์ฝึกปุย" ผู้เข้าแข่งขันคือคู่แข่งที่มีเสียงดังที่สุดของเรา และเป็นเทคนิคการจัดกึ่งกลางเพียงอย่างเดียวที่องค์ประกอบ/เด็กเป็นเจ้าของได้อย่างเต็มที่ ลองดูขอบด้านในสีชมพู แบบเดี่ยวๆ ของเราสิ!
.fluffy-center {
padding: 10ch;
}
- ปกป้องเนื้อหา
- ปรมาณู
- การทดสอบทุกรายการมีกลยุทธ์ศูนย์กลางนี้อยู่อย่างลับๆ
- พื้นที่ข้อความเป็นช่องว่าง
- ภาพลวงตาว่าไม่เป็นประโยชน์
- คอนเทนเนอร์และสินค้ามีความขัดแย้งกันเป็นธรรมดา เพราะแต่ละชิ้น มีขนาดที่แน่นอนมาก
เหมาะสำหรับการจัดกึ่งกลางคำหรือวลีที่มุ่งเน้นวลี แท็ก ยาเม็ด ปุ่ม ชิป และอื่นๆ
5. ป๊อปและป็อป
- บีบ: โอเค
- สควอช: โอเค
- ซ้ำกัน: ไม่ดี
- แก้ไข: ใช้ได้
- ขั้นตอน: ปกติ
"ป๊อปอัป" นี้เพราะการจัดตำแหน่งแบบสัมบูรณ์จะทำให้องค์ประกอบหลุดออกจากกระแสปกติ ส่วนที่ "บลิบ" ของชื่อมาจากสิ่งที่มีประโยชน์ที่สุด นั่นก็คือนำชื่อไปทับบนสิ่งอื่นๆ ซึ่งเป็นเทคนิคการจัดกึ่งกลางแบบวางซ้อนกันที่ใช้งานง่าย ซึ่งมีความยืดหยุ่นและเหมาะกับขนาดของเนื้อหา บางครั้งคุณต้องพล็อต UI ทับ UI อื่น
- มีประโยชน์
- เชื่อถือได้
- เวลาที่ต้องใช้คือสิ่งที่ประเมินค่าไม่ได้
- โค้ดที่มีค่าเปอร์เซ็นต์ลบ
- ต้องใช้
position: relative
เพื่อบังคับการบล็อกที่มี - การแบ่งบรรทัดช่วงต้นที่ยุ่งยาก
- คุณสามารถมีได้เพียง 1 ครั้งต่อการบล็อก 1 รายการที่มีการบล็อกอื่นๆ โดยไม่ต้องดำเนินการเพิ่มเติม
เหมาะสำหรับโมดัล ข้อความโทสต์และข้อความ สแต็กและเอฟเฟกต์ความลึก ป๊อปอัป
ผู้ชนะ
ถ้าฉันอยู่บนเกาะและมีเทคนิคการจัดกึ่งกลางได้เพียง 1 อย่าง ก็คงจะ...
[กลองโรล]
ยืดหยุ่นแบบนุ่มนวล 🎉
.gentle-flex {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1ch;
}
คุณหารหัสนี้ได้เสมอในสไตล์ชีต เนื่องจากไฟล์นี้มีประโยชน์สำหรับ ทั้งเลย์เอาต์มาโครและไมโคร เป็นโซลูชันที่รอบด้านและไว้ใจได้ และให้ผลลัพธ์ที่ตรงกับสิ่งที่ผมคาดหวัง และเนื่องจากผมเป็นคนขี้เหนียวยากอยู่แล้ว ผมจึงมัก เปลี่ยนไปใช้โซลูชันนี้ จริงอยู่ที่คุณสามารถพิมพ์อะไรลงไปได้มากมาย แต่ประโยชน์ที่ได้มีมากกว่าโค้ดพิเศษ
ผู้เล่นยอดเยี่ยม
Fluffy Center
.fluffy-center {
padding: 2ch;
}
Fluffy Center มีขนาดเล็กมากจนอาจมองข้ามไปในฐานะเทคนิคการจัดกึ่งกลาง แต่เป็นหัวใจสำคัญของกลยุทธ์ในการจัดกึ่งกลางของผม มันดูดีสุดๆ จนบางครั้งฉัน ลืมไปแล้วว่ากำลังใช้อยู่
บทสรุป
มีอะไรบ้างที่ทำลายกลยุทธ์ศูนย์กลางของคุณ มีความท้าทายอะไรอีกบ้าง ที่สามารถเพิ่มพลังรับมือกับปัญหา ผมคิดว่าการแปลและสวิตช์ความสูงอัตโนมัติในคอนเทนเนอร์... มีอะไรอีกไหม!
ตอนนี้คุณก็รู้แล้วว่าผมทำยังไงแล้วคุณล่ะ คุณจะต้องทำอย่างไร มาเพิ่มความหลากหลายให้กับวิธีการของเรา และเรียนรู้ทุกวิธีในการสร้างเว็บ ทำตาม Codelab พร้อมกับโพสต์นี้เพื่อสร้างตัวอย่างที่อยู่กึ่งกลางของคุณเอง เหมือนกับในโพสต์นี้ ก็ทวีตเวอร์ชันของคุณให้เราทราบ แล้วฉันจะเพิ่มลงในส่วนรีมิกซ์ของชุมชนด้านล่าง