การจัดเรียงตารางด้วย Flexbox ใน CSS

ตอนนี้เรามาเรียนรู้วิธีการสร้างการจัดเรียงตารางด้วย Flexbox กัน ก่อนอื่นให้จัดเรียง flex items เป็นหลายแถว แถวละสามบล็อก

สำหรับสิ่งนี้ ให้กำหนดความกว้างให้กับคอนเทนเนอร์ เป็น 300px และกำหนด flex-wrap เป็นค่า wrap และกำหนดความกว้างให้กับ items เป็น 100px:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตอนนี้เรามาสร้างระยะห่างระหว่างบล็อกของเรา ในแนวนอนกัน สำหรับสิ่งนี้ให้เพิ่ม ความกว้างของคอนเทนเนอร์เพื่อให้มีพื้นที่เพิ่มเติม สำหรับระยะห่าง

เนื่องจากเรามีสามบล็อกในหนึ่งแถว ซึ่งหมายความว่า ระหว่างบล็อกจะมีสองช่องว่าง สมมติว่าเรา ต้องการให้แต่ละช่องว่างมีความกว้าง 10px ผลลัพธ์คือความกว้างของคอนเทนเนอร์ ต้องเพิ่มขึ้น 20px นั่นคือทำให้เป็น ไม่ใช่ 300px แต่เป็น 320px

ตอนนี้ให้กำหนด justify-content ให้กับคอนเทนเนอร์ เป็นค่า space-between และเราจะได้ ระยะห่างที่ต้องการระหว่างบล็อก:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ตอนนี้เรามาเพิ่มระยะห่างแบบเดียวกัน ระหว่างบล็อกในแนวตั้งด้วย สำหรับสิ่งนี้สามารถ กำหนดคุณสมบัติ align-content เป็นค่า space-between

สำหรับสิ่งนี้ อย่างไรก็ตาม จำเป็นต้องกำหนดความสูงให้กับคอนเทนเนอร์ มิฉะนั้น align-content จะไม่ทำงาน ให้กำหนดความสูงเป็น 320px ในกรณีนี้ เราจะสามารถบรรจุสาม แถวของบล็อกได้ โดยแต่ละบล็อกสูง 100px บวกกับ สองระยะห่างระหว่างแถว ๆ ละ 10px

มาลองรันกัน:

html<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
  <div class="child">9</div>
</div>

css.parent {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  flex-wrap: wrap;
  width: 320px;
  height: 320px;
  border: 1px solid red;
}
.child {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

Результат:

ทุกอย่างทำงานได้อย่างยอดเยี่ยม แต่มีบาง ปัญหาซึ่งเราจะพิจารณาในบทเรียน ต่อไป