Thuộc tính viết tắt flex trong CSS

Thuộc tính flex là một cách viết tắt cho các thuộc tính về độ phình, độ co và kích thước. Thứ tự của các thuộc tính được viết tắt có ý nghĩa và như sau: flex-grow, flex-shrink, flex-basis. Các thuộc tính có thể được bỏ qua từ cuối, trong trường hợp này chúng sẽ nhận giá trị mặc định.

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

.child {
	flex-basis: 100px;
	flex-grow: 1;
	flex-shrink: 2;
}

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

.child {
	flex-shrink: 0.5;
	flex-grow: 2;
}

Viết lại đoạn mã sau bằng thuộc tính viết tắt flex:

.child {
	flex-shrink: 0.5;
	flex-grow: 1;
}

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

.child {
	flex: 1 2 200px;
}

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

.child {
	flex: 2 0.7;
}

Viết lại đoạn mã sau bằng các thuộc tính được viết tắt:

.child {
	flex: 3;
}