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:
https://www.w3.org/TR/css-flexbox-1/#flex-common
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: Ultimate Là Gì
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: Berry Là Gì – Nghĩa Của Từ Berry, Từ
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
74
PHP – bao gồm một tệp php và cũng gửi các tham số truy vấn?
74
Git hợp nhất hai chi nhánh địa phương?
74
Con trỏ đến con trỏ so với con trỏ bình thường?
74
Đặt tiêu đề ActionBar tùy chỉnh từ Fragment?
74
Các tệp trùng lặp Android được sao chép trong APK META-INF / License.txt?
74
Làm thế nào để có được mọi thứ sau dấu gạch chéo cuối cùng trong một URL?
74
Làm thế nào để bạn kết nối localhost trong trình giả lập Android?
74
Làm thế nào để thực thi đầu ra của một lệnh trong shell hiện tại?
74
Thay đổi màu thẻ thanh màu trên iOS 7?
74
Làm tròn số dấu phẩy động xuống số nguyên gần nhất?
74
Sử dụng gdb để mã lắp ráp một bước bên ngoài các nguyên nhân có thể thực thi được chỉ định Lỗi không thể tìm thấy giới hạn của hàm hiện tại.?
74
Không thể giải quyết: com.android.support:appcompat-v7:26.0.0?
74
ASP.NET: Lỗi HTTP 500.19 – Lỗi máy chủ nội bộ 0x8007000d?
74
Công việc định kỳ để chạy vào ngày cuối cùng của tháng?
74
Làm cách nào để có microtime trong Node.js?
74
Cách tìm khoảng cách dọc từ đỉnh trong px của một phần tử bằng jQuery?
74
Làm thế nào để luôn làm tròn số nguyên tiếp theo
74
Quyền từ chối Firebase?
74
Làm cách nào để thiết lập kho lưu trữ Git riêng trên GitHub? Nó thậm chí có thể?
74
Kiểm tra nếu bản ghi vừa bị phá hủy trong đường ray?
Bài viết liên quan
Chúng ta có cần xây dựng robot của mình để yêu chúng không?
Những điều cần lưu ý khi phát triển ứng dụng IoT
Sử dụng AI để mở cửa thị trường Drone
Báo cáo thị trường IoT tiết lộ Dữ liệu lớn là mục tiêu hàng đầu trong Inteof Things
Hồ sơ của nhà phát triển Iot: Kết quả khảo sát nhà phát triển Iot
Xu hướng công nghệ xung quanh IoT
Qualia Networks giúp sinh viên tạo ra các thiết bị thông minh
Khảo sát nhà phát triển IoT: Quan điểm của tôi
Xem xét bổ sung xung quanh IoT
Domino nói sẽ được giao hàng Pizza dựa trên Drone
Thay đổi Heap và Kích thước ngăn xếp cho các dự án NXP Kinetis SDK v2.0 GCC
Infographic: Bảo mật phần mềm tự động
Bảo vệ thế giới kết nối
Intevạn vật đang phát triển như thế nào trong ngành bất động sản
Sự nổi lên của đám mây
3 cách IoT cải thiện cuộc sống ở nhà, trên đường và trên đường
Goodyear Chuẩn bị mặt bằng cho xe không người lái
Khởi nghiệp nhằm mục đích phẫu thuật robot bên trong cơ thể
5 dự án tài trợ đám đông hàng đầu cho tháng 4
Futurecasting: Tác động của xe tự lái
Helpex
Helpex
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ỏ.
Chuyên mục: Hỏi Đáp
.tags a {
color: #fff;
background: #909295;
padding: 3px 10px;
border-radius: 10px;
font-size: 13px;
line-height: 30px;
white-space: nowrap;
}
.tags a:hover { background: #818182; }
#footer {font-size: 14px;background: #ffffff;padding: 10px;text-align: center;}
#footer a {color: #2c2b2b;margin-right: 10px;}
