สร้างเว็บไซต์ responsive ด้วย Flexbox (คู่มือทีละขั้นตอน)

Flexbox เป็นฟีเจอร์ front-end ที่ทันสมัย ทำให้การสร้างเลย์เอาต์เว็บไซต์ (และการทำให้เป็น responsive) ง่ายขึ้นมากกว่าเดิม

ในอดีต การสร้างเว็บไซต์ต้องใช้ float grids หรือแม้แต่ tables เพื่อให้เลย์เอาต์ดูถูกต้อง วิธีเหล่านั้นไม่ใช่ตัวเลือกที่ดีสำหรับ responsive design — การทำให้เว็บไซต์ดูดีบนเดสก์ท็อป แท็บเล็ต และมือถือ

หากคุณต้องการอยู่ในแนวโน้มการพัฒนาเว็บสมัยใหม่ คุณควรเรียนรู้การใช้ Flexbox เนื่องจาก float grids กำลังล้าสมัยอย่างรวดเร็ว

คู่มือทีละขั้นตอนนี้จะพาคุณผ่านกระบวนการสร้างเลย์เอาต์เว็บไซต์ responsive แบบง่ายๆ

ขั้นตอนการสร้างเลย์เอาต์เว็บไซต์แบบง่าย

1. วาดสเก็ตเลย์เอาต์สำหรับมือถือ แท็บเล็ต และเดสก์ท็อป
2. เริ่มเขียนโค้ดโครงสร้างพื้นฐานด้วย HTML และ CSS ที่มีความหมาย (semantic)
3. สร้างส่วนต่างๆ ของเลย์เอาต์ทีละส่วน
4. ใน CSS ให้ใช้แนวทาง mobile-first สร้างสไตล์สำหรับความกว้างเล็กที่สุดก่อน แล้วค่อยเพิ่มขึ้นเรื่อยๆ

ผมจะอธิบายกระบวนการคิดและแชร์แนวทางปฏิบัติที่ดีที่ผมพบ

การวาด Wireframe สำหรับเลย์เอาต์เว็บไซต์

Wireframe เป็นแผนผังแสดงส่วนประกอบต่างๆ ของเว็บไซต์ อาจละเอียดเกือบเหมือนดีไซน์ หรืออาจเป็นพื้นฐานเพียงบันทึกส่วนหลักเท่านั้น

สำหรับบทความนี้ เราจะใช้ wireframe แบบง่าย แบ่งเว็บไซต์เป็นส่วนหลัก ได้แก่ Header, Hero, Content section, Sidebar และ Footer แล้วตัดสินใจรูปแบบบนมือถือ แท็บเล็ต และเดสก์ท็อป

ผมใช้เครื่องมือออนไลน์ชื่อ MockFlow ในการสร้าง wireframe

เลย์เอาต์มือถือ

ทุกส่วนจะเรียงซ้อนกันในคอลัมน์เดียวยาว — รวมถึง sidebar ด้วย การซ้อนแบบนี้เป็นวิธีพื้นฐานที่สุดในการจัดเนื้อหาให้พอดีบนอุปกรณ์แคบ เช่น มือถือ ไม่ควรพยายามวาง sidebar ด้านข้าง content เพราะหน้าจอมือถือแคบเกินไป

เลย์เอาต์แท็บเล็ต

แท็บเล็ตกว้างกว่ามือถือมาก จึงวาง sidebar ด้านข้าง content section ได้ และทุกส่วนใช้ความกว้างเต็มจอ

เลย์เอาต์เดสก์ท็อป

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

解決方案คือ จำกัดความกว้างเนื้อหา (max-width) และจัดให้อยู่กลาง ทำให้อ่านง่ายและเข้าใจง่ายบนจอขนาดใหญ่ทุกขนาด

สร้างโครงสร้างและสไตล์พื้นฐาน

จับโครงเลย์เอาต์ด้วย HTML elements

จาก wireframe เราจะสร้าง HTML element สำหรับแต่ละส่วน ดังนี้:

<!-- Main Content --> <main> Main <!-- Header --> <header> Header </header> <!-- Hero --> <section> Hero </section> <!-- Content --> <section> Content </section> <!-- Sidebar --> <aside> Sidebar </aside> <!-- Footer --> <footer> Footer </footer> </main>

แต่ละ element ใน wireframe มี element ตรงกันใน HTML ใช้ placeholder text ไว้ก่อน

เพิ่ม CSS properties พื้นฐาน

เพิ่ม CSS เบื้องต้นเพื่อเริ่มจัดรูปแบบ:

main, header, section, aside, footer { margin: 0; padding: 20px; border: 1px solid #000000; color: #ffffff; } main { background: #000000; } .header { background: #03a9f4; } .hero { background: #d22b1f; } .content { background: #129a22; } .sidebar { border: 1px solid #000000; background: #673ab7; } .footer { border: 1px solid #000000; background: #616161; }

ผมชอบเพิ่ม border ให้ element เพื่อให้เห็นขอบเขตชัดเจน และแก้ไขปัญหาได้ง่ายขึ้น พร้อมเพิ่มสีพื้นหลังให้ตรงกับ wireframe

เมื่อเปิดในเบราว์เซอร์ จะได้เลย์เอาต์เหมือน mobile wireframe — ทุกอย่างเรียงซ้อนกันตามค่าเริ่มต้น

เพิ่ม placeholder content

หลังสร้าง HTML elements แล้ว ควรเพิ่ม placeholder content (เช่น lorem ipsum) ให้แต่ละส่วน เพื่อดูภาพรวมใกล้เคียงผลลัพธ์จริง

ปรับแต่ง CSS สำหรับมือถือ

เลย์เอาต์มือถือพื้นฐานเสร็จแล้ว! เคล็ดลับ: เพิ่ม padding รอบข้างให้สม่ำเสมอ (บน ล่าง ซ้าย ขวา) เพื่อให้เนื้อหาไม่ชิดขอบจอ 20px เป็นค่าที่ดี แต่ปรับได้ตามต้องการ

สร้างเลย์เอาต์ 2 คอลัมน์สำหรับแท็บเล็ตด้วย Flexbox

จาก wireframe แท็บเล็ต: Content และ Sidebar อยู่ติดกัน ทุกส่วนอื่นยังคงซ้อนแนวตั้ง

เปลี่ยน HTML โดยห่อ Content และ Sidebar ด้วย parent <div class="flex-container">

<div class="flex-container"> <section class="content"> Content ... </section> <aside class="sidebar"> Sidebar ... </aside> </div>

ต้องการให้ Sidebar กว้างคงที่ 300px และ Content ใช้พื้นที่ที่เหลือ ใช้ media query เปิดใช้ flexbox ที่ 640px ขึ้นไป:

@media screen and (min-width: 640px){ .flex-container { display: flex; } }

.content { flex: 1; } .sidebar { flex: 0 1 300px; }

flex: 1 (ย่อของ flex-grow:1, flex-shrink:1, flex-basis:0%) ให้ Content ขยายเต็มพื้นที่ flex: 0 1 300px กำหนด flex-basis 300px ให้ Sidebar — ความกว้างคงที่ 300px และพื้นที่เหลือให้ Content

จำกัดความกว้างเนื้อหาสำหรับเดสก์ท็อป

แท็บเล็ตและเดสก์ท็อปคล้ายกัน แตกต่างที่เดสก์ท็อปต้องมี max-width เพื่ออ่านง่ายบนจออัลตร้าไวด์

สร้าง helper class .wrapper ใช้ซ้ำได้:

.wrapper { margin: auto; max-width: 75rem; }

(75rem = 1200px) ใส่ class นี้ใน flex-container:

<div class="flex-container wrapper"> … </div>

ผลลัพธ์: บนจอขนาดใหญ่ จะมีพื้นที่ว่างรอบเนื้อหา ให้อ่านสบายตา

สรุป

เราสร้างเลย์เอาต์ responsive เรียบร้อยแล้ว — ดูดีบนมือถือ แท็บเล็ต และเดสก์ท็อป!

สามารถดูตัวอย่างและดาวน์โหลดโค้ดจาก GitHub ได้ (โปรเจกต์ใช้ Gulp และ Sass)