CSS Flexbox Navbar — โลโก้ซ้าย ลิงค์ขวา
สร้างเค้าโครง CSS flexbox ที่มองเห็นได้: flex-direction, justify-content, align-items, flex-wrap และ gap บนคอนเทนเนอร์ รวมถึง flex-grow ต่อลูก, flex-shrink และ flex-basis ทั้งหมดนี้พร้อมการแสดงตัวอย่างแบบสดและ CSS ที่คัดลอกได้
ผลลัพธ์
หน้านี้จะเปิดตัวสร้าง flexbox ที่ตั้งไว้ล่วงหน้าเป็นเค้าโครงแถบนำทางแบบคลาสสิก: ปรับเนื้อหาให้เหมาะสมโดยตั้งค่าเป็นช่องว่างระหว่างและจัดแนวรายการให้อยู่ตรงกลาง ใส่โลโก้ในช่องแรกและแถวของลิงก์นำทางในช่องสุดท้าย (หรือแยกลิงก์ออกจากกล่องตรงกลาง) แล้วคอนเทนเนอร์เฟล็กซ์บ็อกซ์จะดันลิงก์เหล่านั้นไปที่ปลายอีกด้านของแถบ ในขณะเดียวกันก็เก็บทุกรายการไว้ตรงกลางแนวตั้งเดียวกัน ไม่ว่าโลโก้หรือข้อความลิงก์จะสูงแค่ไหนก็ตาม
ช่องว่างระหว่างคือสิ่งที่ทำให้งานนี้สำเร็จ โดยจะปักหมุดลูกคนแรกไว้ที่ขอบเริ่มต้นและลูกสุดท้ายไปที่ขอบสุดท้าย จากนั้นจึงกระจายลูกๆ ที่เหลือให้เท่าๆ กันระหว่างพวกเขา - โลโก้ด้านซ้าย ลิงก์ขวามีรูปร่างเกือบทุกส่วนหัวของไซต์ใช้ align-items: center จะแก้ปัญหาการจัดตำแหน่งแนวตั้งที่เคยต้องใช้การแฮ็กความสูงของบรรทัดหรือเทคนิคการแสดงเซลล์ตาราง
ปรับจำนวนลูกให้ตรงกับแถบนำทางจริงของคุณ — สองช่องสำหรับแถบโลโก้เปล่าและแถบ CTA, อีกช่องสำหรับโลโก้และลิงก์หลายลิงก์ — และดูการปรับเลย์เอาต์แบบเรียลไทม์ คัดลอกบล็อก CSS เมื่อตรงกับส่วนหัวของคุณ หรือเปิดช่องว่างระหว่างค่าที่ตั้งล่วงหน้าหากคุณต้องการดูคุณสมบัตินั้นเปรียบเทียบกับญาติที่ใกล้ชิด