เริ่มต้นใช้งานเค้าโครง CSS

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

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

การไหลปกติ

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

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

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

จัดโครงสร้างเอกสารของคุณเพื่อใช้ประโยชน์จากการไหลปกติ

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

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

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

ย้ายออกจากกระแสปกติ

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

ลอยน้ำ

Floats ใช้เพื่อเลื่อนกล่องไปทางซ้ายหรือขวา ทำให้เนื้อหาสามารถแสดงล้อมรอบกล่องได้

ในการทำให้รายการลอยตัว ให้ใช้คุณสมบัติ CSS float และค่าของซ้ายหรือขวา ค่าเริ่มต้นของ float คือไม่มี

 .item { float: left; }

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

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

เคลียร์โฟลต

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

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

 .clear { clear: both; }

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

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

บริบทการจัดรูปแบบบล็อก

อีกวิธีหนึ่งในการล้างโฟลตภายในกล่องคือการเรียกใช้ Block Formatting Context (BFC) บนคอนเทนเนอร์ บริบทการจัดรูปแบบบล็อกมีทุกอย่างอยู่ภายใน ซึ่งรวมถึงรายการที่ลอยอยู่ซึ่งไม่สามารถโผล่ออกมาด้านล่างของกล่องได้อีกต่อไป มีสองสามวิธีในการบังคับ BFC วิธีทั่วไปที่สุดเมื่อล้างทุ่นคือการตั้งค่าคุณสมบัติโอเวอร์โฟลว์ให้มีค่าอื่นที่ไม่ใช่ค่าดีฟอลต์ที่มองเห็นได้

 .container { overflow: auto; }

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

เพื่อให้เจตนาชัดเจนขึ้นและป้องกันการสร้าง BFC ที่ก่อให้เกิดผลข้างเคียงที่ไม่ต้องการ คุณสามารถใช้ flow-root เป็นค่าของคุณสมบัติการ display ได้ สิ่งเดียวที่ display: flow-root ทำคือสร้าง BFC ดังนั้นการล้างโฟลตของคุณโดยไม่มีปัญหาอื่น ๆ

 .container { display: flow-root; }

การใช้ Floats แบบเดิม

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

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

แหล่งข้อมูลและการอ่านเพิ่มเติมเกี่ยวกับโฟลตและการล้างโฟลต

• “The Clearfix: บังคับองค์ประกอบเพื่อล้างเด็กด้วยตนเอง” Chris Coyier, CSS-Tricks
• “ float ” CSS: Cascading Style Sheets, MDN web docs
• “ clear ” CSS: Cascading Style Sheets, MDN web docs
• “การทำความเข้าใจเค้าโครง CSS และบริบทการจัดรูปแบบบล็อก” Rachel Andrew, Smashing Magazine

การวางตำแหน่ง

หากต้องการลบองค์ประกอบออกจากโฟลว์ปกติหรือเปลี่ยนจากตำแหน่งในโฟลว์ปกติ คุณสามารถใช้คุณสมบัติ position ใน CSS เมื่ออยู่ในกระแสปกติ ธาตุจะมี position static รายการจะแสดงทีละรายการในมิติบล็อก และหากคุณเลื่อนหน้า รายการเหล่านั้นจะเลื่อนด้วย

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

ตำแหน่งสัมพัทธ์

หากรายการมี position: relative จุดอ้างอิงคือตำแหน่งที่ปกติจะอยู่ในกระแสปกติ จากนั้น คุณสามารถใช้ค่าออฟเซ็ตสำหรับคุณสมบัติ top , left , bottom และ right เพื่อย้ายกล่องจากตำแหน่งที่ปกติจะแสดง

 .item { position: relative; bottom: 50px; }

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

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

กำหนด position: absolute บนรายการและจะถูกลบออกจากโฟลว์ปกติอย่างสมบูรณ์ พื้นที่ที่เหลือจะถูกลบออก จากนั้นรายการจะถูกวางตำแหน่งที่สัมพันธ์กับบล็อกที่มีอยู่ซึ่งจะเป็นวิวพอร์ต เว้นแต่จะซ้อนอยู่ภายในองค์ประกอบตำแหน่งอื่น

ดังนั้น สิ่งแรกที่จะเกิดขึ้นหากคุณกำหนด position: absolute บนรายการคือ โดยทั่วไปแล้วจะติดอยู่ที่ด้านบนและด้านซ้ายของวิวพอร์ต จากนั้น คุณสามารถใช้ค่าออฟเซ็ตสำหรับคุณสมบัติ top , left , bottom และ right เพื่อย้ายกล่องจากตำแหน่งนั้นไปยังตำแหน่งที่คุณต้องการให้เป็น

 .item { position: absolute; top: 20px; right: 20px; }

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

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

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

บางอย่างที่มี position: fixed จะถูกวางตำแหน่งโดยส่วนใหญ่แล้วสัมพันธ์กับวิวพอร์ต และนำออกจากโฟลว์ของเอกสารเพื่อไม่ให้มีที่ว่างสำหรับมัน เมื่อเลื่อนหน้าแล้ว องค์ประกอบคงที่จะยังคงอยู่ในตำแหน่งที่สัมพันธ์กับวิวพอร์ต เนื่องจากเนื้อหาที่เหลือในโฟลว์ปกติจะเลื่อนตามปกติ

 .item { position: fixed; top: 20px; left: 100px; }

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

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

ตำแหน่งเหนียว

position: sticky บนองค์ประกอบจะทำให้องค์ประกอบเลื่อนไปพร้อมกับเอกสารเช่นเดียวกับการไหลปกติ แต่เมื่อถึงจุดหนึ่งที่สัมพันธ์กับวิวพอร์ต (โดยใช้การชดเชยปกติ) องค์ประกอบจะ "เกาะติด" และเริ่ม ทำตัวเหมือน position: fixed นี่เป็นค่าที่ใหม่กว่าและได้รับการสนับสนุนน้อยกว่าในเบราว์เซอร์มากกว่าวิธีอื่น ๆ อย่างไรก็ตามมันกลับไปเป็นเพียงการเลื่อนด้วยเพจ OS เป็นค่าที่ใช้อย่างดีเป็นการปรับปรุงโดยไม่ก่อให้เกิดปัญหาหากไม่ได้รับการสนับสนุน

 .item { position: sticky; top: 0; }

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

แหล่งข้อมูลและการอ่านเพิ่มเติมเกี่ยวกับการวางตำแหน่ง

• “การวางตำแหน่ง” พื้นที่การเรียนรู้ MDN, เอกสารเว็บ MDN, Mozilla
• “ position: sticky; ” Chris Coyier, CSS-Tricks
• “ตำแหน่ง CSS: เหนียว” เบราว์เซอร์สนับสนุนข้อมูลสำหรับการวางตำแหน่งที่เหนียว, caniuse

เลย์เอาต์แบบยืดหยุ่น

เลย์เอาต์กล่องแบบยืดหยุ่น (Flexbox) เป็นวิธีการเลย์เอาต์ที่ออกแบบมาสำหรับเลย์เอาต์หนึ่งมิติ หนึ่งมิติหมายความว่าคุณต้องการจัดวางเนื้อหาของคุณเป็นแถวหรือเป็นคอลัมน์ ในการเปลี่ยนองค์ประกอบของคุณให้เป็นเลย์เอาต์แบบยืดหยุ่น คุณใช้คุณสมบัติ display ที่มีค่า flex

 .container { display: flex; }

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

The Axes Of Flexbox

ในตัวอย่างข้างต้น ฉันอธิบายว่ารายการต่างๆ ถูกจัดวางชิดขอบเริ่มต้นของแถวในทิศทางอินไลน์ แทนที่จะอธิบายว่าจัดวางชิดขอบซ้าย รายการของเราถูกจัดวางเป็นแถวเนื่องจากค่าเริ่มต้นของคุณสมบัติ flex-direction คือ row ซึ่งจะสร้างแถวในทิศทางอินไลน์ ทิศทางที่ประโยคทำงาน ในขณะที่เรากำลังทำงานเป็นภาษาอังกฤษ ภาษาที่เรียงจากซ้ายไปขวา จุดเริ่มต้นของแถวจะอยู่ทางซ้าย และรายการของเราจึงเริ่มต้นที่นั่น ค่าของ flex-direction จึงเป็นตัวกำหนด แกนหลัก ของ Flexbox

แกนขวางจึงวิ่งข้ามแกนหลักเป็นมุมฉาก หากทิศทางการโค้งงอของคุณเป็น row และรายการของคุณแสดงในทิศทางแบบอินไลน์ แกนตัดของคุณจะทำงานในทิศทางที่ถูกบล็อก หาก flex-direction ของคุณเป็น column ดังนั้นรายการต่างๆ กำลังทำงานในทิศทางบล็อก แสดงว่าแกนตัดขวางของคุณอยู่ในแถว

หากคุณเคยชินกับการคิดในแง่หลักและแนวขวางเมื่อทำงานกับ Flexbox มันจะทำให้หลายๆ อย่างง่ายขึ้น

ทิศทางและการสั่งซื้อ

Flexbox ช่วยให้คุณสามารถเปลี่ยนทิศทางของรายการบนแกนหลักได้โดยใช้ค่า flex-direction ของ row-reverse หรือ column-reverse

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

The Flex Properties

คุณสมบัติของ Flex คือวิธีการควบคุมอัตราส่วนของสินค้าแบบยืดหยุ่นตามแกนหลัก คุณสมบัติสามประการคือ:

• flex-grow
• flex-shrink
• flex-basis

สิ่งเหล่านี้มักจะใช้ในรูปแบบชวเลขของคุณสมบัติ flex ค่าแรกคือ flex-grow ค่า flex-shrink ที่สอง และ flex-basis ที่สาม

 .item { flex: 1 1 200px; }

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

หากตั้งค่า flex-grow เป็นค่าบวกใดๆ ไอเท็มจะได้รับอนุญาตให้เติบโตเพื่อใช้พื้นที่ ดังนั้น ในตัวอย่างของเราข้างต้น หลังจากที่ให้แต่ละรายการ 200 พิกเซลแล้ว พื้นที่พิเศษใดๆ จะถูกแบ่งออกระหว่างรายการ

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

ค่า flex-grow และ flex-shrink สามารถเป็นค่าบวกใดๆ ก็ได้ รายการที่มีมูลค่า flex-grow มากกว่าจะได้รับพื้นที่ว่างมากขึ้นตามสัดส่วนเมื่อเติบโต และด้วยค่า flex-shrink มากกว่าจะถูกลบออกเมื่อย่อขนาด

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

แหล่งข้อมูลและการอ่านเพิ่มเติมสำหรับเค้าโครงแบบยืดหยุ่น

• “CSS Flexible Box Layout,” คู่มือฉบับสมบูรณ์เกี่ยวกับข้อกำหนด, เอกสารเว็บ MDN, Mozilla
• “คู่มือฉบับสมบูรณ์สำหรับ Flexbox” Chris Coyier, CSS-Tricks
• “Flexbox Froggy” เกมเพื่อการเรียนรู้Flexbox
• “Flexbugs” ชุมชนรวบรวมรายการบั๊กของเบราว์เซอร์ที่เกี่ยวข้องกับFlexbox

เค้าโครงกริด

CSS Grid Layout ได้รับการออกแบบเป็นวิธีการจัดวางแบบสองมิติ สองมิติหมายความว่าคุณต้องการจัดวางเนื้อหาของคุณในแถวและคอลัมน์ เช่นเดียวกับ Flexbox Grid Layout เป็นค่าของการ display ดังนั้นในการเริ่มใช้ Grid คุณควรเริ่มต้นด้วย display: grid บนคอนเทนเนอร์ของคุณ จากนั้นตั้งค่าบางคอลัมน์และ/หรือแถวโดยใช้ grid-template-columns และ grid-template-rows คุณสมบัติของ grid-template-rows

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

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

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

กริดสามารถกระจายพื้นที่ให้คุณได้ คุณไม่จำเป็นต้องคำนวณเปอร์เซ็นต์เพื่อให้แน่ใจว่าสิ่งของต่างๆ จะพอดีกับคอนเทนเนอร์ ในตัวอย่างด้านล่าง เรากำลังสร้างคอลัมน์โดยใช้หน่วย fr และอนุญาตให้สร้างแทร็กโดยอัตโนมัติ เรายังใช้ grid-gap เพื่อเว้นระยะห่างระหว่างแทร็กของเรา (ดูหัวข้อ Box Alignment สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับช่องว่างและเลย์เอาต์ของกริด)

เช่นเดียวกับ Flexbox และ flex-grow หรือ flex-shrink หน่วย fr เกี่ยวข้องกับการแบ่งปันพื้นที่ว่างที่มีอยู่ ค่า fr ที่สูงขึ้นสำหรับหนึ่งแทร็กหมายความว่าจะได้รับพื้นที่ว่างมากขึ้นตามสัดส่วน คุณยังสามารถผสมหน่วย fr และความยาวสัมบูรณ์ได้อีกด้วย พื้นที่ที่จำเป็นสำหรับความยาวจะถูกลบออกจากพื้นที่ที่มีอยู่ก่อนที่จะดำเนินการหน่วย fr

คำศัพท์เกี่ยวกับกริด

ตารางมีสองแกนเสมอ: แกนอินไลน์วิ่งไปในทิศทางที่คำถูกวางบนหน้าและแกนที่ถูกบล็อกในทิศทางที่วางบล็อก

คอนเทนเนอร์กริดคือองค์ประกอบที่คุณตั้งค่า display: grid on จากนั้น คุณจะมี Grid Lines ซึ่งสร้างโดย แทร็ก คอลัมน์และแถวที่คุณระบุเมื่อใช้ grid-template-columns และ grid-template-rows หน่วยที่เล็กที่สุดในตาราง (ระหว่างสี่เส้นที่ตัดกัน) เรียกว่า Grid Cell ในขณะที่กลุ่มของ Grid Cells ที่ประกอบเป็นสี่เหลี่ยมผืนผ้าทั้งหมดเรียกว่า Grid Area

การจัดตำแหน่งกริดอัตโนมัติ

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

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

การวางตำแหน่งตามบรรทัดพื้นฐาน

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

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

คุณสมบัติเหล่านี้สามารถแสดงเป็นชวเลข grid-column และ grid-row โดยมีค่าแรก เริ่มต้น และส่วน ท้าย ที่สอง

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

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

การวางตำแหน่งด้วยพื้นที่ที่มีชื่อ

คุณยังสามารถวางตำแหน่งรายการบนกริดของคุณโดยใช้พื้นที่ที่มีชื่อ เมื่อต้องการใช้วิธีนี้ คุณต้องตั้งชื่อให้แต่ละรายการ แล้วอธิบายโครงร่างเป็นค่าของคุณสมบัติ grid-template-areas

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

มีกฎสองสามข้อที่ต้องจำเมื่อใช้วิธีนี้ หากคุณต้องการให้รายการขยายหลายเซลล์ คุณควรตั้งชื่อซ้ำ พื้นที่ต้องเป็นรูปสี่เหลี่ยมผืนผ้าสมบูรณ์ ไม่อนุญาตให้ใช้ชิ้นส่วนรูปตัว L หรือ Tetris! กริดต้องสมบูรณ์ - ต้องเติมทุกเซลล์ หากคุณต้องการเว้นช่องว่างไว้ ให้เติมเซลล์นั้นด้วย . . ตัวอย่างเช่น ใน CSS ด้านล่าง ฉันจะเว้นมุมขวาล่างว่างไว้

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

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

แหล่งข้อมูลและการอ่านเพิ่มเติมสำหรับเค้าโครงกริด

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

• “CSS Grid Layout,” เทคโนโลยีเว็บสำหรับนักพัฒนา, เอกสารเว็บ MDN, Mozilla
• “ตารางตามตัวอย่าง” ทุกสิ่งที่คุณต้องการเพื่อเรียนรู้ CSS Grid Layout, Rachel Andrew
• “Grid Garden” เกมโต้ตอบแสนสนุกสำหรับทดสอบและพัฒนาทักษะ CSS ของคุณ
• “เลย์เอาต์แลนด์” Jen Simmons, YouTube

ฉันยังเขียนบทความจำนวนหนึ่งที่นี่ใน Smashing Magazine ที่สามารถช่วยคุณเจาะลึกแนวคิด Grid ต่างๆ:

• “แนวทางปฏิบัติที่ดีที่สุดด้วย CSS Grid Layout”
• “กำหนดสไตล์เซลล์ว่างด้วยเนื้อหาที่สร้างและเค้าโครงกริด CSS”
• “การใช้ CSS Grid: รองรับเบราว์เซอร์ที่ไม่มีกริด”
• “ CSS Grid Gotchas และบล็อกสะดุด”
• “การตั้งชื่อสิ่งต่าง ๆ ใน CSS Grid Layout”

ลำดับภาพและเอกสาร

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

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

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

แหล่งข้อมูลและการอ่านเพิ่มเติมสำหรับการสั่งซื้อภาพและเอกสาร

• “CSS Grid Layout and Accessibility” เทคโนโลยีเว็บสำหรับนักพัฒนา เอกสารเว็บ MDN Mozilla
• “คำสั่งแหล่งที่มา HTML เทียบกับคำสั่งแสดงผล CSS” Adrian Roselli
• “Flexbox และการนำทางด้วยแป้นพิมพ์ตัดการเชื่อมต่อ” Code Things, Tink
• “ความขัดแย้งในการสั่งซื้อที่ตอบสนองต่อการโฟกัสคีย์บอร์ด” Alastair Campbell

การสร้างกล่อง

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

อย่าสร้างกล่องหรือเนื้อหา ( display: none )

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

 .item { display: none; }

อย่าสร้างองค์ประกอบนี้ แต่สร้างองค์ประกอบย่อยใด ๆ ( display: contents )

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

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

แหล่งข้อมูลและการอ่านเพิ่มเติมสำหรับการสร้างกล่อง

• “กล่องที่หายไปพร้อม display: contents ” Rachel Andrew
• วิธีการ display: contents; ผลงาน” อิเระ อาเดริโนะคุง
• display: contents ” ข้อมูลสนับสนุนเบราว์เซอร์ caniuse

การจัดตำแหน่ง

การจัดตำแหน่งเป็นเรื่องที่ยุ่งยากบนเว็บจนกระทั่งเมื่อเร็วๆ นี้ โดยมีวิธีจำกัดมากในการจัดตำแหน่งรายการภายในกล่องอย่างเหมาะสม สิ่งนี้กำลังเปลี่ยนไปด้วย Box Alignment Module ซึ่งขณะนี้คุณจะใช้เมื่อควบคุมการจัดตำแหน่งในคอนเทนเนอร์ Grid และ Flex ในอนาคต วิธีการจัดวางอื่นๆ จะใช้คุณสมบัติการจัดตำแหน่งเหล่านี้ด้วย รายการคุณสมบัติการจัดตำแหน่งที่มีรายละเอียดในข้อกำหนดการจัดตำแหน่งกล่องมีดังต่อไปนี้:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

เนื่องจากโมเดลเลย์เอาต์มีฟีเจอร์ที่แตกต่างกัน การจัดตำแหน่งจึงทำงานแตกต่างกันเล็กน้อยขึ้นอยู่กับโมเดลเลย์เอาต์ที่ใช้งาน มาดูกันว่าการจัดตำแหน่งทำงานอย่างไรกับ Grid และ Flex Layouts แบบง่ายๆ

คุณสมบัติ align-items และ justify-items ตั้งค่าคุณสมบัติ align-self และ justify-self เป็นกลุ่ม คุณสมบัติเหล่านี้จัดตำแหน่งรายการภายใน Grid Area

คุณสมบัติ align-content และ justify-content จะจัดเรียงแทร็กกริด โดยที่คอนเทนเนอร์กริดจะมีที่ว่างมากกว่าที่จำเป็นในการแสดงแทร็ก

ใน Flexbox การ align-items และ align-self จะจัดการกับการจัดตำแหน่งบนแกนไขว้ ในขณะที่การจัดแนว justify-content เกี่ยวข้องกับการกระจายพื้นที่บนแกนหลัก

บนแกนตัด คุณสามารถใช้การ align-content ที่คุณห่อเส้นยืดหยุ่นและที่ว่างเพิ่มเติมในคอนเทนเนอร์แบบยืดหยุ่นได้

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

แหล่งข้อมูลและการอ่านเพิ่มเติมสำหรับการแยกส่วน

• “คำแนะนำเกี่ยวกับสถานะของรูปแบบการพิมพ์ในปี 2018” Rachel Andrew, Smashing Magazine
• “ตัวแบ่งคอลัมน์,” QuirksMode.org

การเลือกประเภทเค้าโครง: วิธีการเลือก?

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

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