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

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

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

<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>

.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 และเราจะได้ ระยะห่างที่ต้องการระหว่างบล็อก:

<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>

.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

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

<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>

.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;
}

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