Bố cục lưới sử dụng Flexbox trong CSS

Bây giờ hãy cùng học cách tạo bố cục lưới bằng Flexbox. Đầu tiên, chúng ta sắp xếp các khối flex thành nhiều hàng, với ba khối trong mỗi hàng.

Để làm điều này, chúng ta đặt chiều rộng cho phần tử cha của các flex là 300px và flex-wrap với giá trị wrap, và đặt chiều rộng cho các phần tử con là 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;
}

Bây giờ hãy tạo khoảng cách giữa các khối của chúng ta theo chiều ngang. Để làm điều này, chúng ta tăng chiều rộng của phần tử cha để cung cấp thêm không gian cho lề.

Vì chúng ta có ba khối trong một hàng, điều đó có nghĩa là có hai khoảng trống giữa chúng. Giả sử chúng ta muốn mỗi khoảng trống có chiều rộng 10px. Khi đó, chiều rộng của phần tử cha cần tăng thêm 20px, tức là làm cho nó không phải 300px, mà là 320px.

Bây giờ hãy đặt justify-content cho phần tử cha của các khối với giá trị space-between và chúng ta sẽ nhận được khoảng cách mong muốn giữa các khối:

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

Bây giờ hãy thêm khoảng cách tương tự giữa các khối theo chiều dọc. Để làm điều này, chúng ta có thể đặt thuộc tính align-content với giá trị space-between.

Tuy nhiên, để làm điều này, cần phải đặt chiều cao cho phần tử cha, nếu không align-content sẽ không hoạt động. Hãy đặt chiều cao là 320px. Trong trường hợp này, chúng ta có thể vừa đủ chỗ cho ba hàng khối với chiều cao 100px cộng với hai lề giữa các hàng là 10px.

Hãy chạy thử:

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

Tất cả đều hoạt động tuyệt vời, nhưng có một số vấn đề mà chúng ta sẽ xem xét trong bài học tiếp theo.