การเรียนรู้รูปแบบเว็บโดยไม่ต้องเรียนรู้ CSS เป็นไปได้พอ ๆ กับการเรียนรู้ที่จะว่ายน้ำบนพื้นดินแห้ง แต่แตกต่างจากการว่ายน้ำซึ่งเมื่อเชี่ยวชาญแล้วเป็นทักษะที่คงอยู่กับคุณไปตลอดชีวิตการเรียนรู้ CSS เป็นกระบวนการที่ไม่มีวันสิ้นสุดเนื่องจาก CSS นั้นมีการพัฒนาอย่างต่อเนื่อง

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

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

บันทึก: ตัวอย่างโค้ดทั้งหมดในบทความนี้ใช้ HTML5 องค์ประกอบและ Sass ไวยากรณ์ สามารถโคลนโค้ดการทำงานแบบเต็มได้จาก https://github.com/laureanoarcanio/css-layout-examples .

ใช้กรณี

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

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

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

สอน CSS โดยใช้เทคนิค CSS2 คลาสสิก

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

z-index

ตำแหน่งคงที่

ใน CSS2 เราสามารถบรรลุองค์ประกอบคงที่บนหน้า (ส่วนหัวส่วนท้าย ฯลฯ ) โดยใช้รูปแบบเค้าโครงตำแหน่งที่ใช้การวางตำแหน่งคงที่

นอกจากนี้เราจะใช้ไฟล์ z-index คุณสมบัติ CSS เพื่อให้แน่ใจว่าองค์ประกอบคงที่ของเรายังคง 'อยู่ด้านบน' เนื้อหาอื่น ๆ ในหน้า z-index คุณสมบัติระบุลำดับสแต็กขององค์ประกอบโดยที่องค์ประกอบที่มีลำดับสแต็กมากกว่าจะอยู่“ ด้านบนของ” องค์ประกอบที่มีลำดับสแต็กต่ำกว่าเสมอ โปรดทราบว่า z-index คุณสมบัติใช้งานได้กับ ตำแหน่ง องค์ประกอบ สำหรับตัวอย่างของเราเราจะใช้ width โดยพลการ ค่า 20 (ซึ่งสูงกว่าค่าเริ่มต้น) เพื่อให้แน่ใจว่าองค์ประกอบคงที่ของเรายังคงอยู่ในระดับแนวหน้า

นอกจากนี้เราจะตั้งค่า #header, #footer { position: fixed; width: 100%; z-index: 20; } #header { top: 0; height: 5em; } #footer { bottom: 0; height: 3em; } คุณสมบัติเป็น 100% ซึ่งสั่งให้เบราว์เซอร์ใช้พื้นที่ว่างทั้งหมดในแนวนอนสำหรับองค์ประกอบ

#nav

ตกลงนั่นคือส่วนหัวและส่วนท้าย แต่สิ่งที่เกี่ยวกับ #subnav และ #nav?

การขยาย CSS

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

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

ในทำนองเดียวกันการขยายแนวนอนทำได้โดยการตั้งค่าทั้ง right และ #nav, #subnav { position: fixed; top: 6em; /* leave 1em margin below header */ bottom: 4em; /* leave 1em margin above footer */ z-index: 20; } #nav { left: 0; width: 5em; } #subnav { left: 6em; /* leave 1em margin to right of nav */ width: 13em; } คุณสมบัติขององค์ประกอบเป็นค่าคงที่ดังนั้นองค์ประกอบจะขยายในแนวนอนเพื่อใช้พื้นที่แนวนอนที่เหลือตามนั้น

สำหรับกรณีการใช้งานของเราเราจำเป็นต้องใช้การขยายแนวตั้ง

margin

ตำแหน่งเริ่มต้น (คงที่)

พื้นที่เนื้อหาหลักที่เลื่อนได้สามารถพึ่งพาการวางตำแหน่งเริ่มต้น (คงที่) โดยองค์ประกอบจะแสดงตามลำดับที่ปรากฏในโฟลว์เอกสาร เนื่องจากส่วนอื่น ๆ ในหน้าของเราอยู่ในตำแหน่งคงที่องค์ประกอบนี้จึงเป็นองค์ประกอบเดียวที่อยู่ในโฟลว์เอกสาร ดังนั้นสิ่งที่เราต้องทำเพื่อวางตำแหน่งให้ถูกต้องคือการระบุ #main { margin: 6em 0 4em 20em; } เพื่อหลีกเลี่ยงการทับซ้อนกับส่วนหัวส่วนท้ายและ nav / subnav แบบคงที่:

5em

และด้วยเหตุนี้เราจึงได้ปฏิบัติตามข้อกำหนดการจัดวางขั้นพื้นฐานของกรณีการใช้งานของเราโดยใช้ CSS2 แต่เรายังต้องปฏิบัติตามข้อกำหนดเพิ่มเติมสำหรับฟังก์ชันการทำงานแบบไดนามิก

พฤติกรรมแบบไดนามิกโดยใช้เทคนิค CSS2 แบบคลาสสิก

ข้อกำหนดระบุว่าโดยค่าเริ่มต้นเมนูการนำทางของเราจะแสดงเฉพาะไอคอน แต่สามารถขยายเพื่อแสดงข้อความได้เช่นกัน (และสามารถยุบอีกครั้งเพื่อแสดงเฉพาะไอคอนได้อีกครั้ง)

เริ่มต้นด้วยการเพิ่ม #nav { left: 0; width: 5em; &.expanded { /* Sass notation */ width: 10em; } } เท่ากับความกว้างของเมนูการนำทางเมื่อขยาย เราจะดำเนินการนี้โดยการสร้างคลาส CSS แบบ 'ขยาย' ซึ่งเราสามารถเพิ่มหรือลบออกจากองค์ประกอบเมนูการนำทางแบบไดนามิก:

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav’').toggleClass('expanded'); });

นี่คือตัวอย่างของโค้ด JavaScript (ในตัวอย่างนี้เราใช้ jQuery) ที่สามารถใช้เพื่อสลับเมนูการนำทางแบบไดนามิกระหว่างโหมดขยายและโหมดยุบโดยขึ้นอยู่กับผู้ใช้ที่คลิกที่ไอคอนสลับการนำทาง:

#subnav { left: 6em; width: 13em; &.expanded { left: 11em; /* move it on over */ } } #main { margin: 6em 0 4em 20; z-index: 10; &.expanded { margin-left: 25em; /* move it on over */ } }

และด้วยเหตุนี้เมนูนำทางของเราจึงสามารถขยายหรือยุบได้แบบไดนามิก เยี่ยมมาก

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

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

$('.layout-classic #nav').on('click', 'li.nav-toggle', function() { $('#nav, #subnav, #main').toggleClass('expanded'); });

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

display: none

โอเคทำงานได้ดีขึ้น

รูปแบบการจัดวางโดยใช้เทคนิค CSS2 แบบคลาสสิก

ตอนนี้เรามาดูข้อกำหนดของการมีบางเพจที่ซ่อนเมนูการนำทางย่อย โดยเฉพาะอย่างยิ่งเราต้องการให้ซ่อนเมนูการนำทางย่อยเมื่อผู้ใช้คลิกไอคอน 'ผู้ใช้' ในพื้นที่การนำทางหลัก

ก่อนอื่นเราจะสร้างคลาสใหม่“ ซ่อน” ที่ใช้ .hidden { display: none; } :

#subnav

และอีกครั้งเราจะใช้ JavaScript (jQuery) เพื่อใช้คลาส CSS“ hidden” กับ $('#nav.fa-user').on('click', function() { $('#subnav').toggleClass('hidden'); }); องค์ประกอบเมื่อผู้ใช้คลิกไอคอนผู้ใช้:

#subnav

ด้วยการเพิ่มนี้ #subnav องค์ประกอบจะถูกซ่อนอย่างเหมาะสมเมื่อผู้ใช้คลิกที่ไอคอน 'ผู้ใช้' แต่พื้นที่ที่มีอยู่ยังคงไม่ได้ใช้งาน แทนที่จะขยายองค์ประกอบอื่น ๆ เพื่อใช้พื้นที่ว่างโดย #subnav ธาตุ.

ภาษาโปรแกรม a++

เพื่อให้ได้พฤติกรรมที่ต้องการเมื่อเราซ่อน main เราจะใช้หนึ่งในตัวเลือก CSS ที่รู้จักกันน้อย แต่มีประโยชน์สูงที่เรียกว่า ตัวเลือกพี่น้องที่อยู่ติดกัน .

ตัวเลือก CSS พี่น้องที่อยู่ติดกัน

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

ตัวอย่างเช่นต่อไปนี้จะเลือกเฉพาะองค์ประกอบที่มี ID subnav ที่ ทันที ติดตามองค์ประกอบด้วย ID #subnav + #main { margin-left: 20em; } :

#main

ข้อมูลโค้ด CSS ด้านบนกำหนดระยะขอบด้านซ้ายของ 20em ถึง #subnav ถ้าและต่อเมื่อ ทันทีตามการแสดง #nav

อย่างไรก็ตามถ้า expanded ถูกขยาย (ซึ่งทำให้ #main คลาสถูกเพิ่มไปที่ #main เช่นกันตามรหัสก่อนหน้าของเรา) เราย้ายขอบด้านซ้ายของ #subnav + #main.expanded { margin-left: 25em; } ถึง 25em.

#subnav

และถ้า #main ถูกซ่อนไว้เราเลื่อนขอบด้านซ้ายของ #nav ไปจนถึง 6em จะอยู่ถัดจาก #subnav.hidden + #main { margin-left: 6em; } :

#subnav

(หมายเหตุ: ข้อเสียอย่างหนึ่งของการใช้ตัวเลือกพี่น้องที่อยู่ติดกันคือการบังคับให้เรามี #subnav อยู่ใน DOM เสมอไม่ว่าจะแสดงหรือไม่ก็ตาม)

สุดท้ายถ้า #nav ถูกซ่อนไว้และ #main ถูกขยายเราตั้งค่าขอบด้านซ้ายของ 11em ที่ #subnav.hidden + #main.expanded { margin-left: 11em; } :

calc()

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

ใช้ประโยชน์จาก CSS3

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

CSS3 calc() ฟังก์ชัน

ใหม่ CSS3 calc() ฟังก์ชัน สามารถใช้ในการคำนวณค่าคุณสมบัติ CSS แบบไดนามิก (โปรดทราบว่า การสนับสนุนแตกต่างกันไป ข้ามเบราว์เซอร์) นิพจน์ที่ระบุให้กับ + ฟังก์ชันสามารถเป็นนิพจน์ง่ายๆใด ๆ ที่รวมตัวดำเนินการทางคณิตศาสตร์พื้นฐาน (-, *, /, calc()) โดยใช้กฎลำดับความสำคัญของตัวดำเนินการมาตรฐาน

การใช้งาน #nav, #subnav { position: fixed; height: calc(100% - 10em); /* replaces */ z-index: 20; } ฟังก์ชันสามารถช่วยหลีกเลี่ยงการฮาร์ดโค้ดค่าที่ CSS2 ต้องการได้มาก ในกรณีของเราสิ่งนี้ช่วยให้เราสามารถขยาย CSS ได้แบบไดนามิกมากขึ้น ตัวอย่างเช่น:

height

ด้วยข้างต้น calc() ข้อมูลจำเพาะโดยใช้ top:6em เราได้ผลลัพธ์เช่นเดียวกับที่ทำใน CSS2 ด้วย bottom:4em และ top แต่ด้วยวิธีที่ยืดหยุ่นและปรับเปลี่ยนได้มากขึ้นและไม่จำเป็นต้องใช้รหัสแข็ง bottom และ display ค่าตำแหน่ง

เค้าโครง CSS3 Flexbox

Flexbox เป็นรูปแบบใหม่ที่นำมาใช้ใน CSS3 ( การสนับสนุนแตกต่างกันไปตามเบราว์เซอร์ ). เค้าโครงเฟล็กบ็อกซ์ช่วยให้การจัดเรียงองค์ประกอบบนหน้าเว็บทำได้ง่ายขึ้นในลักษณะที่คาดเดาได้ตามขนาดหน้าจอความละเอียดและอุปกรณ์ต่างๆ ดังนั้นจึงมีประโยชน์อย่างยิ่งในบริบทของ การออกแบบเว็บที่ตอบสนอง .

คุณสมบัติที่สำคัญ ได้แก่ :

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

Flexbox นำเสนอชุดคำศัพท์และแนวคิดที่เป็นเอกลักษณ์ของตนเอง บางส่วน ได้แก่ :

• คอนเทนเนอร์ Flex องค์ประกอบที่มี flex ตั้งค่าคุณสมบัติเป็น inline-flex หรือ flex-directio ซึ่งทำหน้าที่เป็นองค์ประกอบคอนเทนเนอร์สำหรับรายการดิ้น
• รายการ Flex องค์ประกอบใด ๆ ภายในคอนเทนเนอร์แบบยืดหยุ่น (หมายเหตุ: ข้อความที่อยู่ในคอนเทนเนอร์แบบยืดหยุ่นจะถูกห่อด้วยรายการดิ้นที่ไม่ระบุชื่อ)
• แกน . เลย์เอาต์ flexbox ทุกตัวมีไฟล์ flex-wrap น ที่กำหนดไฟล์ แกนหลัก ตามที่จัดวางรายการดิ้น แกนข้าม จากนั้นแกนตั้งฉากกับแกนหลัก
• เส้น รายการ Flex สามารถจัดวางได้ทั้งในบรรทัดเดียวหรือหลายบรรทัดตาม main size ทรัพย์สิน.
• ขนาด ความสูงและความกว้างเทียบเท่ากับ Flexbox คือ cross size และ .layout-flexbox { display: flex; flex-direction: column; } ซึ่งระบุขนาดของแกนหลักและแกนไขว้ของคอนเทนเนอร์เฟล็กซ์ตามลำดับ

โอเคด้วยคำแนะนำสั้น ๆ นี่คือมาร์กอัปทางเลือกที่เราสามารถใช้ได้หากเราใช้เลย์เอาต์ Flexbox:

content-area

สำหรับกรณีการใช้งานตัวอย่างเค้าโครงหลักของเรา (ส่วนหัวเนื้อหาส่วนท้าย) เป็นแนวตั้งดังนั้นเราจะตั้งค่า flexbox ของเราให้ใช้เค้าโครงคอลัมน์:

#nav

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

นั่นเป็นเหตุผลที่เราได้เพิ่มคอนเทนเนอร์พิเศษ (ที่ฉันเรียกว่า #subnav) การห่อ #main, flex และ flex: ; ด้วยวิธีนี้การจัดวางโดยรวมอาจเป็นแนวตั้งในขณะที่เนื้อหาของพื้นที่เนื้อหาสามารถจัดวางในแนวนอนได้

ตอนนี้เพื่อที่จะวางตำแหน่งรายการดิ้นของเราเราจะใช้คุณสมบัติ flex-grow นั่นคือชวเลขสำหรับ flex-shrink. คุณสมบัติดิ้นทั้งสามนี้เป็นคุณสมบัติที่กำหนดว่ารายการดิ้นของเรากระจายพื้นที่ว่างที่เหลือระหว่างคุณสมบัติเหล่านี้อย่างไรในทิศทางการไหลดังนี้:

• ยืดหยุ่นเติบโต: ระบุจำนวนไอเท็มที่สามารถเติบโตได้โดยเทียบกับส่วนที่เหลือของไอเท็มที่ยืดหยุ่นภายในคอนเทนเนอร์เดียวกัน
• งอ - หด: ระบุวิธีที่รายการสามารถหดตัวเมื่อเทียบกับส่วนที่เหลือของรายการที่ยืดหยุ่นภายในคอนเทนเนอร์เดียวกัน
• พื้นฐานดิ้น: ระบุขนาดเริ่มต้นของรายการ (เช่นก่อนที่จะหดหรือเติบโต)

การตั้งค่า #header { flex: 0 0 5em; } #footer { flex: 0 0 3em; } และ flex-grow ทั้งคู่ถึงศูนย์หมายความว่าขนาดของรายการคือ แก้ไขแล้ว และจะไม่เติบโตหรือหดตัวเพื่อรองรับการมีพื้นที่ว่างมากขึ้นหรือน้อยลง นี่คือสิ่งที่เราทำสำหรับส่วนหัวและส่วนท้ายของเราเนื่องจากมีขนาดคงที่:

flex-shrink

หากต้องการให้รายการใช้พื้นที่ว่างทั้งหมดให้ตั้งค่า flex-basis และ auto ค่าทั้งเป็น 1 และตั้งค่า content-area มูลค่าถึง display: flex. นี่คือสิ่งที่เราทำเพื่อพื้นที่เนื้อหาเนื่องจากเราต้องการให้ใช้พื้นที่ว่างทั้งหมดที่มีอยู่

และตามที่เราได้ระบุไว้ก่อนหน้านี้เราต้องการสินค้าที่อยู่ข้างใน flex-direction: row; เพื่อจัดวางในทิศทางของแถวดังนั้นเราจะเพิ่ม #nav; และ #subnav. สิ่งนี้ทำให้พื้นที่เนื้อหาเป็นคอนเทนเนอร์แบบยืดหยุ่นใหม่สำหรับ content-area, .content-area { display: flex; flex-direction: row; flex: 1 1 auto; /* take up all available space */ margin: 1em 0; min-height: 0; /* fixes FF issue with minimum height */ } และ `# หลัก.

นี่คือสิ่งที่เราลงเอยด้วย CSS สำหรับ #nav:

#subnav

ในพื้นที่เนื้อหาทั้ง flex และ #nav { flex: 0 0 5em; margin-right: 1em; overflow-y: auto; } #subnav { flex: 0 0 13em; overflow-y: auto; margin-right: 1em; } มีขนาดคงที่ดังนั้นเราจึงตั้งค่า overflow-y: hidden คุณสมบัติตาม:

#main

(โปรดทราบว่าฉันได้เพิ่ม #main { flex: 1 1 auto; overflow-y: auto; } ลงในข้อกำหนด CSS เหล่านี้เพื่อเอาชนะเนื้อหาที่มากเกินไปและล้นความสูงของคอนเทนเนอร์ Chrome ไม่ต้องการสิ่งนี้ แต่ FireFox ทำ)

layout-flexbox จะใช้พื้นที่ว่างที่เหลือทั้งหมด:

layout-classic

ทั้งหมดนี้ดูดีดังนั้นตอนนี้เรามาเพิ่มพฤติกรรมแบบไดนามิกของเราลงไปและดูว่าจะเป็นอย่างไร

JavaScript นั้นเหมือนกับสิ่งที่เราเคยมีมาก่อน (ยกเว้นที่นี่คลาสคอนเทนเนอร์องค์ประกอบ CSS ที่เราระบุคือ $('.layout-flexbox #nav’).on('click', 'li.nav-toggle', function() { $('#nav').toggleClass('expanded'); }); ในขณะที่ก่อนหน้านี้เป็น expanded):

#nav { flex: 0 0 5em; /* collapsed size */ margin-right: 1em; overflow-y: auto; &.expanded { flex: 0 0 10em; /* expanded size */ } }

เราเพิ่ม display คลาสเป็น CSS ดังนี้:

fr

และ voila!

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

สิ่งเดียวที่เหลือคือการซ่อนการนำทางย่อย และเดาอะไร? นั่นก็“ ใช้ได้” เช่นกันโดยไม่มีการเปลี่ยนแปลงใด ๆ เพิ่มเติมโดยใช้โค้ด JavaScript เหมือนเดิม Flexbox รู้เกี่ยวกับพื้นที่ว่างและทำให้เค้าโครงของเราทำงานโดยอัตโนมัติโดยไม่ต้องใช้รหัสเพิ่มเติม ค่อนข้างเย็น

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

เค้าโครงตาราง CSS3

หากเลย์เอาต์ Flexbox อยู่ที่ขอบนำของ CSS3 ดังนั้น Grid Layout อาจกล่าวได้ว่าอยู่ในระดับที่มีเลือดออก ข้อกำหนด W3C ยังอยู่ในสถานะร่างและยังคงมีอยู่ การสนับสนุนเบราว์เซอร์ที่ค่อนข้าง จำกัด . (เปิดใช้งานใน Chrome ผ่านการตั้งค่าสถานะ 'คุณลักษณะแพลตฟอร์มเว็บรุ่นทดลอง' ใน chrome: // ธง ).

โดยส่วนตัวแล้วฉันไม่คิดว่าร่างนี้เป็นนักปฏิวัติ ค่อนข้างเป็นไฟล์ หลักการออกแบบ HTML5 สถานะ: “ เมื่อแนวทางปฏิบัติแพร่หลายในหมู่ผู้เขียนแล้วให้พิจารณาการนำไปใช้แทนที่จะห้ามหรือคิดค้นสิ่งใหม่ ๆ ”

ดังนั้นจึงมีการใช้กริดที่ใช้มาร์กอัปมาเป็นเวลานานดังนั้นตอนนี้ CSS Grid Layout จึงเป็นไปตามกระบวนทัศน์เดียวกันโดยให้ประโยชน์ทั้งหมดและอื่น ๆ อีกมากมายในเลเยอร์การนำเสนอโดยไม่มีข้อกำหนดมาร์กอัป

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

แนวปฏิบัติการออกแบบผังบัญชีที่ดีที่สุด

เค้าโครงตารางแนะนำกริด 2 ประเภท; กล่าวคือ ชัดเจน และ โดยปริยาย . เพื่อความเรียบง่ายเราจะเน้นไปที่กริดที่ชัดเจนในส่วนนี้

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

• กริดคอนเทนเนอร์ องค์ประกอบที่มี .layout-grid { display: grid; grid-template-columns: auto 0 auto 1em 1fr; grid-template-rows: 5em 1em 1fr 1em 3em; } คุณสมบัติถูกตั้งค่าเป็น 'กริด' หรือ 'อินไลน์กริด' ซึ่งองค์ประกอบที่มีอยู่จะถูกจัดวางโดยการวางตำแหน่งและจัดแนวให้เข้ากับกริดที่กำหนดไว้ล่วงหน้า (โหมดโจ่งแจ้ง) กริดคือชุดที่ตัดกันของเส้นกริดแนวนอนและแนวตั้งที่แบ่งพื้นที่ของกริดคอนเทนเนอร์ออกเป็นเซลล์กริด เส้นกริดมีสองชุด หนึ่งสำหรับกำหนดคอลัมน์และอีกหนึ่งมุมฉากสำหรับกำหนดแถว
• แทร็กกริด ช่องว่างระหว่างเส้นตารางสองเส้นที่อยู่ติดกัน แทร็กกริดแต่ละแทร็กจะถูกกำหนดฟังก์ชันการปรับขนาดซึ่งควบคุมความกว้างหรือความสูงของคอลัมน์หรือแถวที่อาจเติบโตและทำให้เส้นกริดที่ล้อมรอบอยู่ห่างกันเพียงใด
• เซลล์กริด ช่องว่างระหว่างสองแถวที่อยู่ติดกันและสองเส้นกริดคอลัมน์ที่อยู่ติดกัน เป็นหน่วยที่เล็กที่สุดของกริดที่สามารถอ้างอิงได้เมื่อวางตำแหน่งรายการกริด
• ความยาวที่ยืดหยุ่น มิติข้อมูลที่ระบุด้วย display: grid; หน่วยซึ่งแสดงถึงเศษส่วนของพื้นที่ว่างในคอนเทนเนอร์กริด

นี่คือมาร์กอัปทางเลือกที่เราสามารถใช้ได้หากเราใช้เค้าโครงกริด:

grid-template-columns

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

มาเจาะลึก CSS กันเลย:

grid-template-rows

เราได้กำหนด grid-template-columns: auto 0 auto 1em 1fr; บนภาชนะของเรา auto และ #nav คุณสมบัติแต่ละรายการระบุเป็นรายการช่องว่างระหว่างแทร็กกริด กล่าวอีกนัยหนึ่งคือค่าเหล่านั้นไม่ใช่ตำแหน่งของเส้นกริด แต่เป็นตัวแทนของไฟล์ จำนวนพื้นที่ ระหว่างสองแทร็ก

โปรดทราบว่าหน่วยการวัดสามารถระบุได้ดังนี้:

• ความยาว
• เปอร์เซ็นต์ของขนาดคอนเทนเนอร์กริด
• การวัดเนื้อหาที่ครอบครองคอลัมน์หรือแถวหรือ
• เศษเสี้ยวของพื้นที่ว่างในตาราง

ดังนั้นด้วย #subnav เราจะมี:

• 1 แทร็กที่กำหนด 2 คอลัมน์ของ auto ความกว้าง (#subnav ช่องว่าง)
• 1 รางน้ำของ 0 (ระยะขอบสำหรับ 1em อยู่ที่ระดับองค์ประกอบตามที่มีอยู่หรือไม่วิธีนี้เราจะหลีกเลี่ยงการมีรางน้ำคู่)
• 1 แทร็กที่กำหนด 2 คอลัมน์ของ 1fr ความกว้าง (#main ช่องว่าง)
• 1 รางน้ำของ auto
• 1 แทร็กโดยใช้ #nav สำหรับ #subnav (จะใช้พื้นที่ที่เหลือทั้งหมด)

ที่นี่เราใช้ grid-template-rows: 5em 1em 1fr 1em 3em; อย่างมาก ค่าสำหรับแทร็กซึ่งช่วยให้เรามีคอลัมน์แบบไดนามิกที่ตำแหน่งและขนาดของเส้นถูกกำหนดโดยเนื้อหาสูงสุด (ดังนั้นเราจะต้องระบุขนาดสำหรับองค์ประกอบ #header และ #footer ซึ่งเราจะดำเนินการในไม่ช้า)

ในทำนองเดียวกันสำหรับเส้นแถวเรามี 1em ที่ตั้งค่า #header { grid-column: 1 / 6; grid-row: 1 / 2; } #footer { grid-column: 1 / 6; grid-row: 5 / 6; } #main { grid-column: 5 / 6; grid-row: 3 / 4; overflow-y: auto; } ของเรา และ grid-column จะได้รับการแก้ไขและองค์ประกอบทั้งหมดระหว่างการใช้พื้นที่ว่างที่เหลือในขณะที่ใช้ grid-row รางน้ำ

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

grid-column-start

สิ่งนี้ระบุว่าเราต้องการให้ส่วนหัวของเราอยู่ระหว่างเส้นตารางที่ 1 และ 6 (ความกว้างเต็ม) และระหว่างเส้นตาราง 1 และ 2 สำหรับแถวของเรา เหมือนกันสำหรับส่วนท้าย แต่อยู่ระหว่างสองบรรทัดสุดท้าย (แทนที่จะเป็นสองบรรทัดแรก) และพื้นที่หลักถูกกำหนดไว้อย่างเหมาะสมสำหรับพื้นที่ที่ควรจะครอบครอง

โปรดทราบว่า grid-column-end และ grid-row-start คุณสมบัติเป็นชวเลขสำหรับระบุ grid-row-end / #nav และ #subnav / #nav ตามลำดับ

ตกลงกลับไปที่ #subnav และ #nav { width: 5em; grid-column: 1 / 2; grid-row: 3 / 4; &.expanded { width: 10em; } } #subnav { grid-column: 3 / 4; grid-row: 3 / 4; width: 13em; /* track has gutter of 0, so add margin here */ margin-left: 1em; } . เนื่องจากก่อนหน้านี้เราได้วาง #nav และ #subnav ในแทร็กด้วยค่าอัตโนมัติเราจำเป็นต้องระบุว่าองค์ประกอบเหล่านี้กว้างเพียงใด (เช่นเดียวกับโหมดขยายเราเพียงแค่เปลี่ยนความกว้างและเค้าโครงตารางจะดูแลส่วนที่เหลือ)

ตอนนี้เราสามารถสลับ

|_+_|

ของเราได้ และซ่อน / ลบ

|_+_|

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

สรุป

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

CSS3 ได้เริ่มนำเสนอเทคนิคการจัดวางที่ซับซ้อนและยืดหยุ่นมากขึ้นซึ่งง่ายกว่าอย่างมากในการเขียนโปรแกรมและหลีกเลี่ยงความน่าเบื่อของข้อกำหนด CSS ก่อนหน้านี้

การเรียนรู้เทคนิคและกระบวนทัศน์เหล่านี้อย่างเชี่ยวชาญทั้งสำหรับ CSS2 และ CSS3 เป็นสิ่งสำคัญในการใช้ประโยชน์จาก CSS ทั้งหมดที่มีเพื่อเพิ่มประสิทธิภาพทั้งประสบการณ์ของผู้ใช้และคุณภาพของโค้ดของคุณ บทความนี้เป็นเพียงแค่ส่วนเล็ก ๆ ของภูเขาน้ำแข็งของทั้งหมดที่ต้องเรียนรู้และทั้งหมดนี้สามารถทำได้ด้วยพลังและความยืดหยุ่นของ CSS มีเลย!

ที่เกี่ยวข้อง: * สำรวจ SMACSS: สถาปัตยกรรมที่ปรับขนาดได้และโมดูลาร์สำหรับ CSS *