Thuộc tính flex trong CSS

Định nghĩa và cách sử dụng

flex là tắt của các thuộc tính sau:

flex thiết lập là độ dài弹性 của mục弹性.

Ghi chú:Nếu phần tử không phải là mục弹性，thuộc tính flex không có giá trị.

Xem thêm:

Hướng dẫn: CSS Flexbox

Tham khảo:Thuộc tính flex-basis trong CSS

Tham khảo:Thuộc tính flex-direction trong CSS

Tham khảo:Thuộc tính flex-flow trong CSS

Tham khảo:Thuộc tính flex-grow trong CSS

Tham khảo:Thuộc tính flex-shrink trong CSS

Tham khảo:Thuộc tính flex-wrap trong CSS

Tham khảo:Thuộc tính flex của HTML DOM

Ví dụ

Không quan tâm đến nội dung của nó, làm cho chiều dài của tất cả các phần tử 弹性 đều bằng nhau:

#main div {
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

Thử nghiệm trực tiếp

Ngôn ngữ CSS

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

Giá trị thuộc tính

Giá trị Mô tả
flex-grow Số số, quy định lượng mở rộng của phần tử so với các phần tử khác trong các phần tử 弹性.
flex-shrink Số số, quy định lượng co lại của phần tử so với các phần tử khác trong các phần tử 弹性.
flex-basis

Chiều dài của phần tử.

Giá trị hợp lệ: "auto"、"inherit" hoặc giá trị đo lường bằng "%", "px", "em" hoặc bất kỳ đơn vị đo lường nào khác.
auto Tương đương với 1 1 auto.
initial Tương đương với 0 1 auto. Xem thêm: initial。
none Tương đương với 0 0 auto.
inherit Kế thừa thuộc tính này từ phần tử cha. Xem thêm: inherit。

Chi tiết kỹ thuật

Giá trị mặc định: 0 1 auto
Kế thừa: Không
Tạo animation: Hỗ trợ. Xem thuộc tính riêng lẻ. Xem thêm:Các thuộc tính liên quan đến animation。
Phiên bản: CSS3
Ngôn ngữ JavaScript: object.style.flex="1"

Các ví dụ khác

Kết hợp flex và media query để tạo layout khác nhau cho các kích thước màn hình/kết nối thiết bị khác nhau:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-item-left {
  flex: 50%;
}
.flex-item-right {
  flex: 50%;
}
/* L布局响应 - Tạo layout một cột (100％) thay vì layout hai cột (50％) */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

Thử nghiệm trực tiếp

Hỗ trợ trình duyệt

Số số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số số đầu tiên trong bảng có tiền tố -webkit-、-ms- hoặc -moz- đại diện cho phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
29.0
21.0 -webkit-		 11.0
10.0 -ms-		 28.0
18.0 -moz-		 9.0
6.1 -webkit-		 17.0