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