Kích thước của phần tử flex dọc theo trục chính

Các thuộc tính width và height thiết lập chiều rộng và chiều cao của phần tử flex độc lập với hướng của các trục. Tức là, nếu trục nằm ngang, thì width sẽ thiết lập chiều rộng, nhưng nếu trục dọc, thì width vẫn thiết lập chiều rộng. Đôi khi hành vi như vậy không thuận tiện.

Trong mô hình flex tồn tại một thuộc tính đặc biệt flex-basis, nó thiết lập kích thước của phần tử dọc theo trục chính. Điều này có nghĩa là nếu trục chính nằm ngang - thuộc tính này sẽ thiết lập chiều rộng của các phần tử, còn nếu dọc - thì là chiều cao. Thuộc tính này cần được thiết lập cho chính các phần tử flex, không phải cho phần tử cha của chúng. Chúng ta hãy xem qua các ví dụ.

Giả sử bây giờ trục chính nằm ngang, và flex-basis có giá trị 50px. Trong trường hợp này, chiều rộng của các phần tử sẽ là 50px:

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

.parent {
	display: flex;
	flex-direction: row; /* trục nằm ngang */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;   /* kích thước phần tử */
	border: 1px solid green;
}

Bây giờ hãy đảo ngược trục, không thay đổi giá trị của thuộc tính flex-basis. Trong trường hợp này thì chiều cao của các phần tử sẽ là 50px:

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

.parent {
	display: flex;
	flex-direction: column; /* trục dọc */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Tạo 5 khối flex. Thiết lập cho chúng chiều rộng dọc theo trục chính là 100px. Quan sát hành vi của các khối dọc theo các trục khác nhau.

Nếu trục nằm ngang và khối được thiết lập thuộc tính flex-basis đồng thời với thuộc tính width, thì flex-basis sẽ có quyền ưu tiên. Hãy kiểm tra điều này.

Nếu trục dọc và khối được thiết lập thuộc tính flex-basis đồng thời với thuộc tính height, thì flex-basis sẽ có quyền ưu tiên. Hãy kiểm tra điều này.