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.
Đ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: Injection Mortar Fis Em Plus Cef Fund 2021 Stock / Securites Offering D/A
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.
Xem thêm: Khái Niệm Số Thập Phân Là Gì ? Cách Biểu Diễn Trong Toán Học
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
368
Làm thế nào để thoát ra khỏi nhiều vòng lặp trong Python?
368
Grep một tab trong UNIX?
368
Đánh giá các thẻ c JSTL trống hoặc null?
368
Làm cách nào để chuyển đổi Set thành Array?
368
Chuyển đổi biểu diễn chuỗi của danh sách thành danh sách?
368
Lấy lại các ngoại lệ trong Java mà không mất dấu vết ngăn xếp?
368
Làm thế nào để khởi tạo một mảng trong Java?
368
Sự khác nhau giữa Mẫu nhà máy trừu tượng và Mẫu nhà máy?
368
Ví dụ đơn giản về luồng trong C ++ <đã đóng>?
368
Liên kết tĩnh và liên kết động?
368
Có một hàm NumPy để trả về chỉ mục đầu tiên của một cái gì đó trong một mảng không?
368
Khởi tạo các trường lớp trong constructor hoặc tại khai báo?
368
So sánh hai cơ sở dữ liệu MySQL <đã đóng>?
367
Làm cách nào để chuyển đổi giây thành giờ, phút và giây?
367
Làm cách nào để mở trình soạn thảo Atom từ dòng lệnh trong OS X?
367
Làm thế nào để bạn làm tròn số UP trong Python?
367
Làm cách nào để xóa các dòng giữa ListView trên Android?
367
Làm thế nào để thêm quyền truy cập vào một ứng dụng?
367
Làm thế nào để thực hiện một hàng đợi bằng cách sử dụng hai ngăn xếp?
367
Xuất bảng PostgreSQL sang tệp CSV với các tiêu đề?
Bài viết liên quan
Những gì nhà phát triển cần biết về IoT <4>
Tháng 3 trong IoT: Phiên bản Tinkerer <5>
SwitchBot: Một ngôi nhà thông minh cho mọi người? <6>
Giày thông minh nhằm mục đích giữ cho công dân cao cấp hoạt động <3>
Làm thế nào AI có thể mang lại trải nghiệm cá nhân hóa cho IoT <3>
IoT, Blockchain và Tương lai <1>
Kiểm tra CRC32 với bộ tải khởi động KBOOT <3>
?” title=”” width=”115″ /> Kéo và đặt hình ba chiều với sự thống nhất
Làm thế nào một người nông dân xây dựng một trang trại dựa trên IoT <1>
Công nghệ công nghiệp mặc được bảo vệ <1>
Theo dõi ô nhiễm không khí với Node.js, Ngăn xếp đàn hồi và MQTT <5>
Áp dụng ML cho IoT với Android Things và TensorFlow <7>
Máy bay không người lái được điều hướng bằng xe đạp và xe hơi <2>
IoT và 5G đều yêu cầu nền tảng mạng mạnh <2>
Cách Augury giúp IoT hiện thực hóa ROI <8>
Giá trị của mô phỏng cho IoT: Hack Alexa với ảo hóa dịch vụ <7>
Tối ưu hóa SD-WAN và WAN: Không phải là Bộ đôi năng động <1>
Kiểm tra cách chúng tôi muốn xe tự hành ứng xử <4>
Bộ tải khởi động USB-HID thường trú Flash với Vi điều khiển NXP Kinetis K22 <4>
4 điều mà các nhà phát triển nên nắm bắt với sự trỗi dậy của IoT <8>
mister-map.com
mister-map.com
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ỏ.
