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