home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> การเขียนโปรแกรม

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

Flexbox เป็นฟีเจอร์ส่วนหน้าที่ค่อนข้างใหม่ที่ทำให้การสร้างเลย์เอาต์เว็บไซต์ (และทำให้ตอบสนองได้!) ง่ายกว่าที่เคยเป็นมามาก

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

หากคุณต้องการติดตามแนวโน้มการพัฒนาเว็บอยู่เสมอ คุณต้องการทราบวิธีใช้ flexbox อย่างแน่นอน

เนื่องจากกริดแบบลอยกำลังกลายเป็นอดีตไปอย่างรวดเร็ว

คำแนะนำทีละขั้นตอนนี้จะนำคุณผ่านขั้นตอนการสร้างเค้าโครงเว็บไซต์ที่ตอบสนองอย่างง่าย

ต่อไปนี้คือภาพรวมคร่าวๆ ของสิ่งที่คุณคาดหวังได้ในบทแนะนำนี้:

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

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

ฉันจะอธิบายกระบวนการคิดของตัวเอง และแชร์สิ่งที่พบว่าเป็นแนวทางปฏิบัติที่ดี

เสียงดี? เริ่มกันเลย!

วางโครงร่างเว็บไซต์แบบ Wirefraram

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

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

ส่วนที่เราจะสร้างประกอบด้วยส่วนหัว ฮีโร่ ส่วนเนื้อหา แถบด้านข้าง และส่วนท้าย

ฉันใช้เครื่องมือออนไลน์ที่เรียกว่า MockFlow เพื่อสร้างโครงร่างแบบพื้นฐาน

นี่คือรูปแบบสำหรับมือถือ:

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

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

การซ้อนเป็นวิธีการพื้นฐานที่สุดในการปรับเนื้อหาให้พอดีกับอุปกรณ์ที่แคบ เช่น โทรศัพท์มือถืออย่างมีประสิทธิภาพ

ไม่ควรพยายามทำให้แถบด้านข้างติดกับเนื้อหาปกติ เนื่องจากโทรศัพท์ไม่กว้างพอที่จะวางทั้งสองข้างไว้ข้างกัน

ขยายความกว้างขึ้น นี่คือรูปแบบแท็บเล็ต:

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

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

และสำหรับอุปกรณ์ที่กว้างที่สุด นี่คือเค้าโครงเดสก์ท็อป:

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

สำหรับเดสก์ท็อป คุณต้องเริ่มพิจารณาว่าเว็บไซต์ของคุณจะมีลักษณะอย่างไรบนจอภาพที่กว้างมาก โดยเฉพาะในปัจจุบันที่มีหน้าจอกว้างพิเศษที่กำลังได้รับความนิยม

หากเรามีเนื้อหาเว็บไซต์ที่ขยายเต็มความกว้างบนจอภาพขนาดใหญ่ จะทำให้อ่านและสแกนเนื้อหาได้ยากขึ้น

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

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

ตอนนี้เรารู้แล้วว่าต้องการให้เว็บไซต์มีหน้าตาเป็นอย่างไร เราจะเริ่มส่วนที่สนุก นั่นคือ การสร้างทุกอย่างใน HTML และ CSS!

การสร้างโครงสร้างพื้นฐานและรูปแบบ

กำหนดเค้าโครงด้วยองค์ประกอบ HTML

การทำงานจากโครงร่างที่เราสร้างขึ้น เราจะสร้างองค์ประกอบ HTML สำหรับแต่ละส่วนที่อยู่ในโครงร่าง

นี่คือมาร์กอัปใน <body> ที่เราเริ่มต้นด้วย:

<!-- 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>

คุณสามารถดูได้ว่าแต่ละองค์ประกอบจากโครงร่างมีองค์ประกอบที่สอดคล้องกันใน HTML ได้อย่างไร และฉันได้ใส่ข้อความตัวแทนที่เรียบง่าย ไม่มีเนื้อหาจริง

เริ่มเพิ่มคุณสมบัติ CSS พื้นฐาน

ตอนนี้ มาทิ้ง 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;
}

ไม่แสดงเป็นลักษณะทั่วไปบางอย่าง เช่น การตั้งค่าการกำหนดขนาดกล่อง:กรอบกล่องและรูปแบบตัวอักษร แต่สำหรับวัตถุประสงค์ของบทความนี้ นี่เป็นเพียงรูปแบบเดียวที่คุณต้องกังวล

ฉันชอบเพิ่มเส้นขอบให้กับองค์ประกอบของฉัน เพื่อให้ง่ายต่อการระบุตำแหน่งแต่ละองค์ประกอบและแก้ไขปัญหาแปลก ๆ และฉันได้เพิ่มสีพื้นหลังเพื่อให้เข้ากับการจำลองโครงร่างที่เราทำก่อนหน้านี้

หากเราเปิดไฟล์ HTML ในเบราว์เซอร์ นี่คือสิ่งที่จะได้เห็น!

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

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

เพิ่มเนื้อหาตัวยึดตำแหน่งบางส่วน

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

คุณไม่จำเป็นต้องมีจินตนาการมากเกินไป – เราแค่จะคัดลอกและวางข้อความเติม lorem ipsum ลงในแต่ละองค์ประกอบ ตัวอย่างเช่น นี่คือสิ่งที่อยู่ในองค์ประกอบฮีโร่:

<section class="hero">
    Hero
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sumenda potius quam expetenda. Nihil opus est exemplis hoc facere longius.
    </p>
</section>

หลังจากเพิ่ม lorem ipsum ให้กับองค์ประกอบทั้งหมดแล้ว นี่คือสิ่งที่จะมีลักษณะในเว็บไซต์:

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

ดูดี!

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

เพิ่มประสิทธิภาพ CSS สำหรับมือถือ

เรียบร้อย โดยพื้นฐานแล้ว เราสร้างเลย์เอาต์สำหรับมือถือเสร็จแล้ว!

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

สิ่งนี้ทำให้พื้นที่หายใจเล็กน้อยสำหรับผู้ใช้ หากมีช่องว่างภายในเป็นศูนย์และระยะขอบเป็นศูนย์ เนื้อหาก็จะอยู่ตรงขอบของหน้าจอซึ่งจะทำให้รู้สึกแคบ

คุณไม่ต้องการเพิ่มพื้นที่มากเกินไปเพื่อให้เนื้อหาสามารถอ่านได้ ในกรณีนี้ ฉันมีช่องว่างภายในขนาด 20px แต่คุณสามารถเพิ่มช่องว่างภายในขนาด 10px, 15px หรืออะไรก็ได้ที่คุณคิดว่าดูดีที่สุด

มาดูการเพิ่มสไตล์สำหรับมุมมองแท็บเล็ตกัน

การสร้างเค้าโครงสองคอลัมน์สำหรับแท็บเล็ต

หากเราย้อนกลับไปที่โครงร่างโครงร่างของแท็บเล็ต เราจะเห็นว่ามีองค์ประกอบเนื้อหาและแถบด้านข้างอยู่เคียงข้างกัน อย่างอื่นจะวางซ้อนกันในแนวตั้งเหมือนกับบนมือถือ

เราจำเป็นต้องเพิ่มสไตล์บางอย่างเพื่อให้เนื้อหาและแถบด้านข้างจัดรูปแบบเป็นสองคอลัมน์ เราจะใช้ flexbox สำหรับสิ่งนี้ ซึ่งต่างจากกริด CSS

ก่อนอื่น เราจะเปลี่ยน HTML และรวมองค์ประกอบเนื้อหาและแถบด้านข้างไว้ใน <div> หลัก ที่เราจะให้คลาสของ "flex-container" (ใช้จุดไข่ปลาแทนมาร์กอัปเพิ่มเติมที่ไม่สำคัญในตอนนี้)

<div class="flex-container">

   <!-- Content -->
   <section class="content">
      Content
      ... 
   </section>

   <!-- Sidebar -->
   <aside class="sidebar">
      Sidebar 
      ...
   </aside>

</div>

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

สิ่งที่ฉันต้องการคือให้แถบด้านข้างกว้าง 300px เสมอ และเนื้อหาจะใช้พื้นที่ที่เหลือ

ในการทำเช่นนี้ เราจะเพิ่มสไตล์เฟล็กบ็อกซ์ของเราใน CSS (อีกครั้งโดยใช้จุดไข่ปลาแทนโค้ดเพิ่มเติม):

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

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

.content {
    flex: 1;
    ...
}

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

เราได้เพิ่มคุณสมบัติ flex สำหรับองค์ประกอบเนื้อหาและแถบด้านข้าง

เราต้องการให้ flexbox คำนวณความกว้างของเนื้อหา ดังนั้นเราจะตั้งค่าเป็น flex: 1 ซึ่งเป็นชวเลขสำหรับ flex-grow: 1 , flex-shrink: 1 และ flex-basis: 0% .

นี่คือการตั้งค่า flexbox "เริ่มต้น" หากคุณตั้งค่าองค์ประกอบย่อยทั้งหมดให้มี flex: 1 , ความกว้างของพวกมันจะถูกคำนวณและกระจายอย่างเท่าเทียมกันมากที่สุด

บนแถบด้านข้าง ในการตั้งค่าความกว้างเป็น 300px เราจะใช้ flex: 0 1 300px . ตาม CSS-Tricks คุณสมบัติสุดท้ายนั้น flex-basis "กำหนดขนาดเริ่มต้นขององค์ประกอบก่อนที่จะกระจายพื้นที่ที่เหลือ"

เพื่อให้แน่ใจว่าแถบด้านข้างจะมีขนาด 300px เสมอ และพื้นที่ที่เหลือจะถูกแจกจ่ายไปยังส่วนเนื้อหา

นี่คือผลลัพธ์ของสิ่งนั้น!

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

ตอนนี้ มาเพิ่มสไตล์ของเราสำหรับเดสก์ท็อปกันเถอะ

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

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

ความแตกต่างหลักสำหรับเดสก์ท็อปดังที่กล่าวไว้ก่อนหน้านี้คือการตั้งค่าความกว้างสูงสุดสำหรับเนื้อหาหลัก เพื่อให้แน่ใจว่าเว็บไซต์สามารถอ่านได้แม้บนหน้าจอมอนิเตอร์แบบ Ultrawide

คลาสตัวช่วยใน CSS

เนื่องจากเราน่าจะต้องการชุดสไตล์นี้สำหรับองค์ประกอบหลายๆ อย่าง มาสร้างคลาสตัวช่วยที่จะนำมาใช้ใหม่ได้อย่างง่ายดาย

เราจะเพิ่มคลาสใหม่และสไตล์ที่เข้ากันใน CSS ของเราดังนี้:

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

สิ่งนี้จะตั้งค่าความกว้างสูงสุดขององค์ประกอบเป็น 1200px (แปลงเป็นหน่วย rem) และยังจัดกึ่งกลางที่ความกว้างที่ใหญ่กว่า 1200px

ใน HTML เราจะเพิ่มคลาส wrapper ให้กับ wrapper flex-container เนื่องจากเราต้องการจำกัดความกว้างสำหรับคอนเทนเนอร์ Content และ Sidebar

มาร์กอัปจะมีลักษณะดังนี้:

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

และหากเราตรวจสอบเว็บไซต์ในความกว้างที่ใหญ่ขึ้น จะพบว่ามีพื้นที่เพิ่มเติมรอบๆ Wrapper เนื้อหา/แถบด้านข้าง ตามที่เราต้องการ 😁

สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนองด้วย flexbox (คำแนะนำทีละขั้นตอน)

โดยสรุป

เท่านี้ก็เรียบร้อย เราได้สร้างเลย์เอาต์ที่ตอบสนองง่ายซึ่งดูดีบนมือถือ แท็บเล็ต และเดสก์ท็อป!

หากคุณต้องการดูการทำงานของเว็บไซต์ คุณสามารถดูการสาธิตได้ที่นี่

และคุณสามารถดาวน์โหลดโค้ดทั้งหมดสำหรับโปรเจ็กต์นี้จาก GitHub ของฉันได้ที่นี่

*หมายเหตุ:โครงการนี้ใช้ Gulp และ Sass หากคุณต้องการความช่วยเหลือในการติดตั้งอึก ให้ดูบทช่วยสอนอย่างง่ายของฉันที่นี่

ขอบคุณที่อ่าน! แจ้งให้เราทราบว่าคุณคิดอย่างไรกับบทช่วยสอนนี้ในความคิดเห็นด้านล่าง 😊