Thuộc tính flex-basis

Thuộc tính flex-basis thiết lập kích thước của một flex block cụ thể trước khi các thuộc tính flex khác được áp dụng cho nó. Nói chung, thuộc tính 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 trục chính thẳng đứng - thì sẽ thiết lập chiều cao.

Áp dụng cho một flex block cụ thể.

Thuộc tính này là một phần cấu thành của thuộc tính viết tắt flex.

Cú pháp

bộ chọn {
	flex-basis: bất kỳ đơn vị CSS nào (và phần trăm) | auto;
}

Giá trị mặc định: auto.

Ví dụ

Giả sử trục chính của chúng ta 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;
}

Ví dụ

Bây giờ hãy đảo ngược hướng 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 thẳng đứng */
	width: 300px;
	height: 300px;
	border: 1px solid red;
}
.child {
	flex-basis: 50px;
	border: 1px solid green;
}

Xem thêm

thuộc tính flex-direction,
thiết lập hướng của các trục cho flex block
thuộc tính justify-content,
thiết lập căn chỉnh dọc theo trục chính
thuộc tính align-items,
thiết lập căn chỉnh dọc theo trục phụ
thuộc tính flex-wrap,
thiết lập khả năng xuống dòng của flex block
thuộc tính flex-flow,
viết tắt cho flex-direction và flex-wrap
thuộc tính order,
thiết lập thứ tự của các flex block
thuộc tính align-self,
thiết lập căn chỉnh cho một block
thuộc tính flex-grow,
thiết lập độ "tham lam" của flex block
thuộc tính flex-shrink,
thiết lập khả năng co lại của flex block
thuộc tính flex,
viết tắt cho flex-grow, flex-shrink và flex-basis