Các vấn đề của bố cục lưới (grid) sử dụng Flexbox trong CSS

Vấn đề đầu tiên của bố cục lưới nói chung khá rõ ràng ngay từ đầu - đó là việc rất bất tiện khi buộc phần tử cha phải thiết lập chiều cao một cách tường minh. Bởi vì rất có thể số lượng các khối sẽ thay đổi một cách linh hoạt, và số lượng của chúng có thể lúc ít hơn, lúc nhiều hơn 9.

Còn vấn đề thứ hai sẽ phát sinh nếu số lượng các khối sao cho ở hàng cuối cùng sẽ có một số lượng khối không đủ. Trong trường hợp này hàng cuối cùng sẽ trông rất tệ:

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

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

Kết quả là ngay cả theo chiều ngang, giá trị space-between cũng hoạt động không tốt trong trường hợp của chúng ta.

Tóm lại: nếu số lượng phần tử con của bạn luôn cố định và vừa vặn bình thường trong phần tử cha, thì bố cục lưới sử dụng space-between là một thứ khá tiện lợi. Ngược lại bạn sẽ phải nghĩ ra một giải pháp khác.

Có 12 phần tử. Hãy tạo thành một bố cục lưới với 4 phần tử trên mỗi hàng, với chiều rộng của mỗi phần tử là 100px và khoảng cách giữa chúng là 20px.

Có 12 phần tử. Hãy tạo thành một bố cục lưới với 3 phần tử trên mỗi hàng, với chiều rộng của mỗi phần tử là 150px và khoảng cách giữa chúng là 10px.