Flex Là Gì

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: Hướng Dẫn Nhập Code Võ Lâm Truyền Kỳ Mobile Vip 2021, Vo Lam Viet Mobile Gift Code

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
67
Tên ứng dụng khác nhau cho các hương vị xây dựng khác nhau?
67
Sự kiện tùy chỉnh của GWT?
67
Lấy tên của tất cả các tệp trong một thư mục với PHP?
67
Jackson databind enum không nhạy cảm?
67
Làm thế nào để kiểm tra xem curl được bật hay tắt?
67
Vô hiệu hóa thay đổi màu của thẻ neo khi truy cập?
67
Làm cách nào để thay thế các ký tự Latin có dấu trong Ruby?
67
Làm thế nào để có được phiên bản của khung ion?
67
Làm cách nào để sử dụng hình ảnh Chia sẻ trên mạng bằng cách sử dụng chia sẻ Ý định chia sẻ hình ảnh trong Android?
67
Lấy id chèn cuối cùng với học thuyết 2?
67
Sự kiện jQuery Button.click () được kích hoạt hai lần?
67
Các tính năng hữu ích của Eclipse? <đóng cửa>?
67
Đặt chiều rộng của nhóm nút thành 100% và tạo các nút có chiều rộng bằng nhau?
67
Tại sao bạn nên sử dụng từ khóa const nếu bạn đã biết biến không đổi?
67
Hoàn toàn gỡ cài đặt nodejs, npm và nút trong ubfox 14.04?
67
Làm cách nào để thêm nút tùy chỉnh vào thanh công cụ gọi hàm JavaScript?
67
Biên giới không được hiển thị trong Firefox với thu gọn viền trên bảng, vị trí: tương đối trên tbody hoặc màu nền trên ô?
67
Sự khác biệt giữa mã hóa SHA và AES là gì? <đóng cửa>?
67
Vô hiệu hóa Swipe cho vị trí trong RecyclerView bằng ItemTouchHelper.SimpleCallback?
67
Sublime Text 2: Tự động sửa lỗi thụt lề cho javascript?
Bài viết liên quan
4
Các mẫu PHP thực tế: Tải nhanh
4
Tạo bánh xe Roulette bằng HTML5 Canvas
5
ASP.NET MVC: Sử dụng menu ngữ cảnh jQuery với các bảng
1
Duyệt web không người lái
5
Một cơn bão của các nhà phát triển web IDE
5
Tại sao Firebird hút nhiều hơn IE6
3
Cấu trúc quan hệ đối tượng
1
Các mẫu PHP thực tế: Trường nhận dạng
6
Xin lỗi, Chrome, tôi thực sự muốn thích bạn, nhưng
4
JavaScript: Tạo dấu thời gian với độ lệch múi giờ
3
Kiến trúc của các ứng dụng Flex và PHP
7
PyPy tại GSoC; Hỗ trợ dự án
0
Các mẫu PHP thực tế: Ánh xạ khóa ngoài
3
SQLike: Công cụ truy vấn giống như SQL cho JavaScript và ActionScript
9
Tài liệu và trí tưởng tượng quan trọng đối với SVG
3
Các lớp giả CSS3
7
Phát hiện phím đã nhấn với e.which trong JavaScript
6
Trên các tam giác CSS và không, đó không phải là tin tốt
5
Dấu hiệu của một plugin jQuery được viết kém
6
Các mẫu PHP thực tế: Bảng hiệp hội
gmailwireless.com
gmailwireless.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ỏ.

Leave a Reply

Your email address will not be published. Required fields are marked *