Phần tử Flex trong CSS

Ngoài các loại mô hình khối đã học, còn có một loại khác - phần tử flex. Để có được các phần tử như vậy, cần viết thuộc tính display với giá trị flex cho phần tử cha của chúng. Bản thân phần tử cha sẽ vẫn là phần tử khối, còn các phần tử con của nó sẽ trở thành phần tử flex.

Phần tử flex, tương tự như phần tử khối, có thể có chiều rộng và chiều cao, margin và padding. Tuy nhiên, khác với phần tử khối, theo mặc định phần tử flex sắp xếp thành một hàng bên trong phần tử cha của chúng.

Hãy thử nào:

<div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
</div>

.parent {
	display: flex; /* các phần tử con sẽ là phần tử flex */
	width: 300px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 50px;
	height: 50px;
	border: 1px solid green;
}