Cơ sở flex - Thủ thuật CSS

Anonim

Các flex-basisbất động sản là một tiểu tài sản của các mô-đun linh hoạt Box Layout.

Nó chỉ định kích thước ban đầu của mục flex, trước khi bất kỳ khoảng trống nào có sẵn được phân phối theo các yếu tố flex. Khi bỏ qua tốc flexký, giá trị được chỉ định của nó là độ dài bằng không.

Giá trị cơ sở linh hoạt được đặt để định autokích thước phần tử theo thuộc tính kích thước của nó (bản thân nó có thể là từ khóa auto, kích thước phần tử dựa trên nội dung của nó).

Cú pháp

flex-basis: .flex-item ( flex-basis: 100px; )

Xin lưu ý rằng đối với bất kỳ chiều rộng nào, chiều dài âm đều không hợp lệ.

Bản giới thiệu

Kiểm tra cây bút này!

Hỗ trợ trình duyệt

  • (hiện đại) có nghĩa là cú pháp gần đây từ đặc tả (ví dụ display: flex;)
  • (hybrid) có nghĩa là một cú pháp không chính thức kỳ lạ từ năm 2011 (ví dụ display: flexbox;:)
  • (cũ) có nghĩa là cú pháp cũ từ năm 2009 (ví dụ display: box;)
Trình duyệt Chrome Safari Firefox Opera I E Android iOS
21+ (hiện đại)
20- (cũ)
3.1+ (cũ) 2-21 (cũ)
22+ (mới)
12.1+ (hiện đại) 10+ (kết hợp) 2.1+ (cũ) 3.2+ (cũ)

Trình duyệt Blackberry 10+ hỗ trợ cú pháp mới.

Để biết thêm thông tin về cách kết hợp các cú pháp để nhận được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết này (CSS-Tricks) hoặc bài viết này (DevOpera).