Chúng ta đều biết, tài sản flex là một cách viết tắt cho flex-grow, flex-shrinkvà các flex-basistài sản. Và giá trị mặc định của nó là 0 1 auto. Nó có nghĩa là:

flex-grow: 0;flex-shrink: 1;flex-basis: auto;nhưng tôi đã nhận thấy, ở nhiều nơi flex: 1được sử dụng. Là tốc ký cho 1 1 autohay 1 0 auto? Tôi không thể hiểu nó có nghĩa là gì? Tôi không nhận được gì khi tìm kiếm trong googling.

Bạn đang xem: Flex là gì



Đây là lời giải thích:

flex: Tương đương với flex: 1 0. Làm cho mục flex linh hoạt và đặt cơ sở flex thành 0, dẫn đến một mục nhận tỷ lệ không gian trống trong thùng chứa flex. Nếu tất cả các mục trong thùng chứa flex sử dụng mẫu này, kích thước của chúng sẽ tỷ lệ thuận với hệ số uốn được chỉ định.

Do đó, flex:1nó tương đương vớiflex: 1 1 0



flex: 1 có nghĩa như sau:

flex-grow : 1; // this means that the div will grow in same proportion as the window-sizeflex-shrink : 1; // this means that the div will shrink in same proportion as the window-size flex-basis : 0; // this means that the div does not have a starting value as such and will take up screen as per the screen size available for.e.g:- if 3 divs are in the wrapper then each div will take 33%.

HÃY CẨN THẬN

Trong một số trình duyệt:

flex:1; không bằngflex:1 1 0;

flex:1;= flex:1 1 0n;(trong đó n là một đơn vị chiều dài).

flex-grow: Một số chỉ định số lượng vật phẩm sẽ tăng so với phần còn lại của các mặt hàng linh hoạt.

Xem thêm: Tháp Bóng Tối Bns : Hướng Dẫn Mech Tháp Bóng Tối Và Vua Quạ (Boss 1

flex-co Một số chỉ định số lượng vật phẩm sẽ co lại so với phần còn lại của các mặt hàng linh hoạtflex-cơ sở Chiều dài của vật phẩm. Giá trị pháp lý: "tự động", "kế thừa" hoặc một số theo sau là "%", "px", "em" hoặc bất kỳ đơn vị độ dài nào khác.

Điểm mấu chốt ở đây là cơ sở flex yêu cầu một đơn vị độ dài .

Trong Chrome chẳng hạn flex:1và flex:1 1 0tạo ra kết quả khác nhau. Trong hầu hết các trường hợp, nó có vẻ như flex:1 1 0;đang hoạt động nhưng hãy xem xét điều gì thực sự xảy ra:

THÍ DỤ

Cơ sở flex bị bỏ qua và chỉ áp dụng flex-grow và flex-co.

flex:1 1 0;= flex:1 1;= =flex:1;

Điều này thoạt nhìn có vẻ ổn, tuy nhiên nếu đơn vị áp dụng của container được lồng nhau; sẵn sàng cho những chuyện bất ngờ!

Hãy thử ví dụ này trong CHROME


.Wrap{ padding:10px; background: #333;}.Flex110x, .Flex1, .Flex110, .Wrap { display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column;}.Flex110 { -webkit-flex: 1 1 0; flex: 1 1 0;}.Flex1 { -webkit-flex: 1; flex: 1;}.Flex110x{ -webkit-flex: 1 1 0%; flex: 1 1 0%;}FLEX 1 1 0
class="Wrap">
class="Flex110"> type="submit" name="test1" value="TEST 1">
FLEX 1
class="Wrap">
class="Flex1"> type="submit" name="test2" value="TEST 2">
FLEX 1 1 0%
class="Wrap">
class="Flex110x"> type="submit" name="test3" value="TEST 3">

TƯƠNG THÍCH

Cần lưu ý rằng điều này không thành công vì một số trình duyệt đã không tuân thủ các đặc điểm kỹ thuật .

Các trình duyệt sử dụng thông số kỹ thuật flex đầy đủ:

Firefox - ✓ Cạnh - ✓ (Tôi biết, tôi cũng bị sốc.)Chrome - xDũng cảm - xOpera - xIE - (lol, nó hoạt động không có đơn vị độ dài nhưng không phải với một.)
chia sẻ | theo dõi

Vũ Minh ThuậnVũ Minh Thuận
5 30 320
Tránh các bình luận như “+1” hoặc “cảm ơn”." href="#" role="button">thêm 1 bình luận |

Câu trả lời của bạn (> 20 ký tự)


Đăng trả lời Hủy bỏ


Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ css css3 flexbox hoặc hỏi câu hỏi của bạn.


Câu hỏi liên quan
980
Làm thế nào để có được chỉ một tập tin từ một chi nhánh khác?
978
Nhận URL đầy đủ trong PHP?
978
Tại sao có hai cách để bỏ tập tin trong Git?
978
Tải xuống một tệp với Android và hiển thị tiến trình trong ProgressDialog?
978
Làm cách nào để hết hạn một phiên PHP sau 30 phút?
978
Sự khác biệt giữa Giải pháp xây dựng, Giải pháp xây dựng lại và Giải pháp sạch trong Visual Studio?
976
Làm cách nào để tôi cam kết thay đổi tên tệp chỉ phân biệt chữ hoa chữ thường trong Git?
975
Tính năng ngôn ngữ lạ nhất?
975
Làm cách nào tôi có thể hoàn tác thiết lập lại git - đầu trang ~ 1?
975
Trả lại IEn Countable so với IQueryable ?
974
Nhận thời gian và ngày hiện tại trên Android?
974
Tôi phải đặt từ khóa ở đâu và tại sao?
973
Tìm tất cả các bảng chứa cột có tên được chỉ định - MS SQL Server?
973
Làm cách nào để tìm khác biệt cùng một tệp giữa hai lần xác nhận khác nhau trên cùng một nhánh?
973
Các giá trị có thể có của cấu hình #Hibernate hbm2ddl.auto là gì và chúng làm gì?
971
.NET - Tuần tự hóa JSON của enum dưới dạng chuỗi?
971
Làm cách nào để kiểm tra phiên bản Python nào đang chạy tập lệnh của tôi?
970
Làm thế nào để tôi sắp xếp theo chiều dọc văn bản trong một div?
970
Sự khác biệt giữa các lệnh ánh xạ remap, noremap, nnoremap và vnoremap trong Vim là gì?
970
Làm cách nào để cam kết tất cả các tệp đã xóa trong Git? ?
Bài viết liên quan
Thủ thuật CSS sẽ giúp công việc của bạn dễ dàng hơn <4>
Thời gian thật hài hước trong Ruby <3>
Tích hợp quy trình phát triển của bạn vào tuyệt vời với các hệ thống xây dựng, Phần ... <5>
Mô phỏng va chạm N-body với React, D3 và MobX <3>
Cắm n Phát triển API REST với Trình soạn thảo đơn giản <7>
Ngăn xếp ứng dụng hiện đại, Phần 6: Trình duyệt không phải là UI / Mobile duy nhất ... <10>
Một khóa Mutex Lamport nhanh với các lời hứa JavaScript <5>
?" title="" width="115" /> Tích hợp quy trình phát triển của bạn vào tuyệt vời với các hệ thống xây dựng, Phần ... ? <7>
Phiên bản mới nhất của Selenium đã được tiết lộ với rất nhiều tính năng mới và ... <3>
Những tiến bộ trong sắp xếp doanh nghiệp-CNTT <7>
API Google Maps: Cách tạo điểm đánh dấu tùy chỉnh <7>
" title="" width="115" /> Nhà phát triển chán nản 11 <1>
Định cấu hình trước thời gian (AoT) cho ứng dụng góc của bạn bằng cách sử dụng CLI góc <11>
Angular 4 đã ra mắt ngay bây giờ! Bạn có nên chuyển từ Angular 2? <2>
JWT (JSON Web Tokens) tốt hơn so với Cookies phiên <4>
Sử dụng xUnit, MSTest hoặc NUnit để kiểm tra các thư viện .NET Core <2>
Xây dựng và triển khai ứng dụng MongoDB Angular NodeJS bằng cách sử dụng nginx trong ba bước ... <9>
Viết blog với dòng chảy Git <8>
Truy vấn N + 1 hoặc vấn đề bộ nhớ: Tại sao không giải quyết cả hai? <0>
Tuyên bố hoạt hình "Canvas" với React và Kanva <7>
man-city.net
man-city.net
Kế toán
IT

Mọi nội dung do cộng đồng đóng góp, chúng tôi không chịu trách nhiệm về bất kỳ nội dung nào được đăng tải trên trang web này. Nếu có vấn đề liên quan đến bản quyền, vui lòng phản hồi để chúng tôi tiến hành gỡ bỏ.