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