Ô lưới với chiều rộng tự động của khối trong CSS

Trong bài học trước, ô lưới của chúng ta có kết quả như thế này: tổng chiều rộng của các phần tử và khoảng cách của chúng phải bằng chiều rộng của phần tử cha. Điều này không thực sự linh hoạt. Hãy làm sao cho các phần tử tự động điều chỉnh theo chiều rộng của phần tử cha.

Giả sử chúng ta có phần tử cha như thế này:

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

Giả sử các phần tử của ô lưới này được sắp xếp 4 khối trên một hàng:

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

Hãy đặt chiều rộng của các khối sao cho mỗi khối chiếm một phần tư phần tử cha. Để làm điều này, hãy đặt kích thước của chúng thành 25%:

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

Đặt chiều rộng cho các khối theo phần trăm sao cho trong ô lưới có ba khối trên một hàng.

Đặt chiều rộng cho các khối theo phần trăm sao cho trong ô lưới có hai khối trên một hàng.

Đặt chiều rộng cho các khối theo phần trăm sao cho trong ô lưới có một khối trên một hàng.