การจัดเรียงบล็อกแบบตารางด้วยความกว้างอัตโนมัติใน CSS

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

สมมติว่าเรามีองค์ประกอบแม่ดังนี้:

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  margin: 50px auto;
  border: 1px solid red;
}

สมมติให้บล็อกในตารางนี้จัดเรียงแถวละ 4 บล็อก:

css.child {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  border: 1px solid green;
}

มากำหนดความกว้างของบล็อกของเรา เพื่อให้แต่ละบล็อก ครอบครองหนึ่งในสี่ส่วนขององค์ประกอบแม่ สำหรับวิธีนี้ ให้ตั้งค่าขนาดเป็น 25%:

css.child {
  box-sizing: border-box;
  width: 25%;
  height: 100px;
  border: 1px solid green;
}