Tôi không hiểu css
Mô-đun 9 (Hộp linh hoạt) (Đề xuất của Ứng viên W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách hiệu quả hơn để bố trí, căn chỉnh và phân phối không gian giữa các vật phẩm trong một thùng chứa, ngay cả khi kích thước của chúng không xác định và/hoặc động (do đó Show
Ý tưởng chính đằng sau bố cục linh hoạt là cung cấp cho vùng chứa khả năng thay đổi chiều rộng/chiều cao (và thứ tự) của các mục của nó để lấp đầy không gian có sẵn một cách tốt nhất (hầu hết để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình). Hộp chứa linh hoạt mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để tránh tràn Quan trọng nhất, bố cục flexbox không theo hướng trái ngược với bố cục thông thường (khối dựa trên chiều dọc và nội tuyến dựa trên chiều ngang). Mặc dù chúng hoạt động tốt cho các trang, nhưng chúng thiếu tính linh hoạt (không có ý định chơi chữ) để hỗ trợ các ứng dụng lớn hoặc phức tạp (đặc biệt là khi thay đổi hướng, thay đổi kích thước, kéo dài, thu nhỏ, v.v. ) Ghi chú. Bố cục Flexbox phù hợp nhất với các thành phần của ứng dụng và bố cục quy mô nhỏ, trong khi bố cục Lưới dành cho bố cục tỷ lệ lớn hơn Khái niệm cơ bản và thuật ngữVì flexbox là toàn bộ mô-đun và không phải là một thuộc tính duy nhất, nên nó liên quan đến rất nhiều thứ bao gồm toàn bộ tập hợp các thuộc tính của nó. Một số trong số chúng có nghĩa là được đặt trên bộ chứa (phần tử cha, được gọi là “bộ chứa linh hoạt”) trong khi những cái khác có nghĩa là được đặt trên phần tử con (được gọi là “các mục linh hoạt”) Nếu bố cục “thông thường” dựa trên cả hướng dòng khối và dòng nội tuyến, thì bố cục linh hoạt dựa trên “hướng dòng chảy linh hoạt”. Vui lòng xem con số này từ thông số kỹ thuật, giải thích ý tưởng chính đằng sau bố cục linh hoạt Các hạng mục sẽ được sắp xếp theo hoặc trục 0 (từ 1 đến 2) hoặc trục chéo (từ 3 đến 4)
Thuộc tính hộp linh hoạtThuộc tính cho cha mẹ(hộp đựng linh hoạt)trưng bàyĐiều này xác định một thùng chứa linh hoạt; . Nó cho phép một bối cảnh linh hoạt cho tất cả các phần tử con trực tiếp của nó
Lưu ý rằng các cột CSS không có tác dụng đối với bộ chứa flex hướng uốn
uốn dẻoTheo mặc định, tất cả các mục linh hoạt sẽ cố gắng vừa với một dòng. Bạn có thể thay đổi điều đó và cho phép các mục được bọc khi cần với thuộc tính này
Có một số bản demo trực quan của 9 tại đâydòng chảy linh hoạtĐây là cách viết tắt của các thuộc tính 5 và 9, cùng xác định trục chính và trục chéo của bộ chứa flex. Giá trị mặc định là 2
biện minh cho nội dung
Lưu ý rằng hỗ trợ của trình duyệt cho các giá trị này là sắc thái. Ví dụ: 6 chưa bao giờ nhận được hỗ trợ từ một số phiên bản Edge và bắt đầu/kết thúc/trái/phải chưa có trong Chrome. MDN có biểu đồ chi tiết. Các giá trị an toàn nhất là 3, 4 và 5Ngoài ra còn có hai từ khóa bổ sung mà bạn có thể ghép nối với các giá trị này. 3 và 4. Việc sử dụng 3 đảm bảo rằng dù bạn thực hiện kiểu định vị này như thế nào, bạn không thể đẩy một phần tử sao cho phần tử đó hiển thị ngoài màn hình (e. g. ngoài đầu trang) theo cách mà nội dung cũng không thể cuộn được (được gọi là "mất dữ liệu")sắp xếp các mục
6 cho trục chéo (vuông góc với trục chính)
Các từ khóa bổ trợ 3 và 4 có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù hỗ trợ trình duyệt lưu ý) và giải quyết việc giúp bạn ngăn chặn các yếu tố căn chỉnh khiến nội dung không thể truy cập đượccăn chỉnh nội dung
Ghi chú. Thuộc tính này chỉ có hiệu lực đối với các thùng chứa linh hoạt nhiều dòng, trong đó 9 được đặt thành 7 hoặc 8). Vùng chứa linh hoạt một dòng (i. e. trong đó 9 được đặt thành giá trị mặc định, 7) sẽ không phản ánh 8
Các từ khóa bổ trợ 3 và 4 có thể được sử dụng cùng với tất cả các từ khóa còn lại này (mặc dù hỗ trợ trình duyệt lưu ý) và giải quyết việc giúp bạn ngăn chặn các yếu tố căn chỉnh khiến nội dung không thể truy cập đượckhoảng cách, khoảng cách hàng, khoảng cách cộtThuộc tính 08 kiểm soát rõ ràng khoảng cách giữa các mục flex. Nó chỉ áp dụng khoảng cách giữa các mục không ở các cạnh bên ngoài
Hành vi này có thể được coi là một máng xối tối thiểu, như thể máng xối lớn hơn bằng cách nào đó (vì một cái gì đó như 09) thì khoảng cách sẽ chỉ có hiệu lực nếu không gian đó sẽ nhỏ hơnNó không dành riêng cho flexbox, 08 cũng hoạt động trong bố cục dạng lưới và nhiều cộtThuộc tính cho trẻ em(mặt hàng linh hoạt)gọi món
11 kiểm soát thứ tự xuất hiện trong hộp chứa linh hoạt
Các mặt hàng có cùng 11 hoàn nguyên về thứ tự ban đầuuốn cong
Nếu tất cả các đồ vật có 13 được đặt thành 14, chỗ trống còn lại trong hộp đựng sẽ được chia đều cho tất cả trẻ em. Nếu một trong các phần tử con có giá trị là 15, thì phần tử con đó sẽ chiếm gấp đôi dung lượng của một trong hai phần tử còn lại (hoặc ít nhất nó sẽ cố gắng)
Số âm không hợp lệ uốn congĐiều này xác định khả năng co lại của một vật phẩm linh hoạt nếu cần thiết 0Số âm không hợp lệ cơ sở linh hoạtĐiều này xác định kích thước mặc định của một phần tử trước khi không gian còn lại được phân phối. Nó có thể là một chiều dài (e. g. 20%, 5rem, v.v. ) hoặc một từ khóa. Từ khóa 16 có nghĩa là “xem thuộc tính chiều rộng hoặc chiều cao của tôi” (được thực hiện tạm thời bởi từ khóa 17 cho đến khi không dùng nữa). Từ khóa 18 có nghĩa là “kích thước dựa trên nội dung của mặt hàng” – từ khóa này chưa được hỗ trợ tốt nên khó kiểm tra và khó biết những người anh em của nó 19, 20, và 21 làm gì 1Nếu được đặt thành 22, khoảng trống thừa xung quanh nội dung không được tính vào. Nếu được đặt thành 16, khoảng trống thừa sẽ được phân phối dựa trên giá trị 13 của nó. Xem đồ họa nàyuốn congĐây là cách viết tắt của 25 26 và 27 kết hợp. Tham số thứ hai và thứ ba ( 26 và 27) là tùy chọn. Giá trị mặc định là 30, nhưng nếu bạn đặt nó với một giá trị số duy nhất, chẳng hạn như 31, điều đó sẽ thay đổi 27 thành 0%, do đó, nó giống như đặt 33 2Bạn nên sử dụng thuộc tính tốc ký này thay vì đặt các thuộc tính riêng lẻ. Tốc ký đặt các giá trị khác một cách thông minh tự sắp xếp
34) được ghi đè cho các mục linh hoạt riêng lẻVui lòng xem giải thích 34 để hiểu các giá trị khả dụng 3Lưu ý rằng 36, 37 và 38 không ảnh hưởng đến vật phẩm linh hoạtTiền tố FlexboxFlexbox yêu cầu một số tiền tố của nhà cung cấp để hỗ trợ hầu hết các trình duyệt có thể. Nó không chỉ bao gồm các thuộc tính thêm trước với tiền tố nhà cung cấp, mà thực tế còn có các tên thuộc tính và giá trị hoàn toàn khác nhau. Điều này là do thông số Flexbox đã thay đổi theo thời gian, tạo ra các phiên bản “cũ”, “tweener” và “mới”. Có lẽ cách tốt nhất để xử lý việc này là viết theo cú pháp mới (và cuối cùng) và chạy CSS của bạn thông qua Autoprefixer, xử lý các dự phòng rất tốt Ngoài ra, đây là một 39 Sass để trợ giúp với một số tiền tố, điều này cũng cho bạn ý tưởng về những việc cần phải làm 4ví dụHãy bắt đầu với một ví dụ rất đơn giản, giải quyết một vấn đề gần như hàng ngày. định tâm hoàn hảo. Không thể đơn giản hơn nếu bạn sử dụng flexbox 5Điều này dựa trên thực tế là lề được đặt thành 16 trong hộp chứa linh hoạt sẽ hấp thụ thêm không gian. Vì vậy, đặt lề là 16 sẽ làm cho mục được căn giữa hoàn hảo ở cả hai trụcBây giờ hãy sử dụng một số thuộc tính khác. Xem xét danh sách gồm 6 mục, tất cả đều có kích thước cố định nhưng có thể được định cỡ tự động. Chúng tôi muốn chúng được phân bổ đều trên trục ngang để khi chúng tôi thay đổi kích thước trình duyệt, mọi thứ sẽ được chia tỷ lệ đẹp mắt và không có truy vấn phương tiện 6Xong. Mọi thứ khác chỉ là một số mối quan tâm về kiểu dáng. Dưới đây là bút tích ví dụ này. Đảm bảo truy cập CodePen và thử thay đổi kích thước cửa sổ của bạn để xem điều gì sẽ xảy ra Dự phòng nhúng CodePen Hãy thử một cái gì đó khác. Hãy tưởng tượng rằng chúng tôi có một yếu tố điều hướng được căn phải ở trên cùng của trang web của chúng tôi, nhưng chúng tôi muốn nó được căn giữa trên các màn hình cỡ trung bình và một cột trên các thiết bị nhỏ. Vừa đủ dễ 7Dự phòng nhúng CodePen Hãy thử một cái gì đó thậm chí còn tốt hơn bằng cách chơi với tính linh hoạt của vật phẩm linh hoạt. Thế còn bố cục 3 cột ưu tiên thiết bị di động với đầu trang và chân trang có chiều rộng đầy đủ thì sao?. Và độc lập với thứ tự nguồn 8Dự phòng nhúng CodePen Thủ thuật Flexboxbố cục flexbox Cân bằng trên một Pivot với Flexboxbố cục flexbox Julian MerkenichSử dụng Flexbox và dấu chấm lửng văn bản cùng nhaubố cục flexbox Chris Coyier Kỹ thuật Flexbox hữu ích. Gói dịch chuyển căn chỉnhbố cục flexbox Chris Coyier Thiết kế bố cục trang sản phẩm với Flexboxbố cục flexbox Levin Mejia Flexbox và văn bản bị cắt bớtbố cục flexbox Chris Coyier Flexbox và định vị tuyệt đốibố cục flexbox Chris Coyier Lấp đầy khoảng trống ở hàng cuối cùng bằng Flexboxbố cục flexbox Chris Coyier hỗ trợ trình duyệtDữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên máy tính để bànChromeFirefoxIEEdgeSafari21*2811126.1*Di động / Máy tính bảngAndroid ChromeAndroid FirefoxAndroidiOS Safari109< . 41074.47. 0-7. 1*lỗiFlexbox chắc chắn không phải không có lỗi. Bộ sưu tập hay nhất trong số chúng mà tôi từng xem là Flexbugs của Philip Walton và Greg Whitworth. Đó là một nơi mã nguồn mở để theo dõi tất cả chúng, vì vậy tôi nghĩ tốt nhất là chỉ liên kết đến đó |