Cải thiện khả năng phản hồi bằng cách bọc linh hoạt trong CSS
Thuộc tínhflex-wrap là một cách nhanh chóng để làm cho các phần tử root phản hồi nhanh hơn trên các kích thước màn hình khác nhau. Như với flexbox nói chung, nó đơn giản hóa bố cục trang để bạn không phải tự đặt các điểm ngắt hoặc tự quản lý phần tràn trang. Flexbox và quản lý gói phần tử
flex-wrap là một thuộc tính dành riêng cho module flexbox (hoặc “hộp linh hoạt”) trong CSS. Flexbox là một mô hình bố cục CSS quản lý cách các phần tử con được hiển thị trong phần tử mẹ. Điều này nghĩa là flexbox có thể hữu ích cho bố cục trang chung (như đầu trang, chuyển , chân trang, v.v.). Tuy nhiên, quan trọng hơn, nó có thể được áp dụng cho bất kỳ phần tử nào trên trang có các phần tử con.
div.parent { display: flex; } Tạo một phần tử một containers flex đơn giản như thêm display: flex; khai báo CSS của nó.
Khi có một flex container, flex-wrap thể được khai báo trên yếu tố đó cùng cha mẹ để xác định làm thế nào để xử lý các phần tử con không phù hợp trên một dòng theo mặc định.
div.parent { display: flex; flex-wrap: wrap; } 
Phần tử mẹ phải được tạo một containers flex trước khi có thể áp dụng flex-wrap. Thuộc tính flex-wrap chỉ được áp dụng cho containers flex (không phải các phần tử con).
Cài đặt mặc định cho flex-wrap
Theo mặc định, một containers flex sẽ cố gắng khớp các phần tử con của nó trên một dòng. Điều này còn gọi là nowrap cho thuộc tính flex-wrap .
Đối với ví dụ này, trước tiên hãy bắt đầu với một containers không linh hoạt trong đó các phần tử khối con - mỗi phần tử sẽ nằm trên một dòng mới:
Nếu ta làm cho phần tử cha trở thành một containers flex , thì tất cả các phần tử con sẽ đi trên một dòng.
.flex-container { display: flex; flex-wrap: nowrap; } Cài đặt flex-wrap mặc định cho các container flex là “no-wrap”. Điều đó nghĩa là bạn không cần phải khai báo rõ ràng như ta đã làm ở trên.
Bây giờ ta có các phần tử con trên một dòng nhưng, ngay cả khi cửa sổ của bạn không có đủ chỗ cho chúng, các phần tử con sẽ nằm trên một dòng. Khi kích thước cửa sổ thay đổi, các phần tử con sẽ tiếp tục kết hợp với nhau cho đến khi cuối cùng chúng tràn phần tử mẹ.
Vì vậy, làm thế nào để ta sửa lỗi này? Với flex-wrap !
Tìm hiểu các tùy chọn bọc flex của bạn
Có ba giá trị hợp lệ cho thuộc tính flex-wrap :
- nowrap : Đây là giá trị mặc định cho containers
flex, vì vậy nó không cần phải được khai báo rõ ràng trừ khi bạn đang overrides các kiểu khác. Các phần tử con sẽ luôn nằm trên một dòng. - bọc : Sử dụng
wrapsẽ cho phép các phần tử con của bạn quấn vào các dòng bổ sung khi chúng không còn vừa với dòng ban đầu. (Các) phần tử không phù hợp sẽ nằm ở dưới cùng bên trái trong phần tử mẹ. - quấn ngược : Điều này sẽ gây ra tác dụng ngược lại của
wrap. Thay vì quấn (các) phần tử tràn xuống phía dưới bên trái, nó sẽ bọc thành một dòng mới phía trên các phần tử con đầu tiên ở trên cùng bên trái của phần tử root .
Để xem sự khác biệt giữa wrap và wrap-reverse , hãy so sánh hai ví dụ sau bằng cách thay đổi kích thước cửa sổ của bạn:
.flex-container { display: flex; flex-wrap: wrap; } Ví dụ đầu tiên này có các phần tử tràn xuống một dòng mới bên dưới các phần tử con đầu tiên.
.flex-container { display: flex; flex-wrap: wrap-reverse; } Ví dụ thứ hai này làm ngược lại và bao bọc các phần tử tràn phía trên các phần tử con đầu tiên. wrap-reverse ít được sử dụng hơn nhưng vẫn tốt nếu có trong bộ công cụ CSS của bạn. 🥳
Viết tắt Flexbox: flex-flow
Nếu bạn là một người thích viết mã của bạn trên là vài dòng càng tốt, bạn sẽ rất vui khi biết flex-wrap là một phần của flexbox viết tắt flex-flow .
flex-flow là một thuộc tính flexbox thay thế flex-wrap và flex-direction .
Giới thiệu nhanh về hướng linh hoạt
flex-direction xác định xem các phần tử con của bạn nên nằm trong một hàng hay cột. Bốn tùy chọn là: row , column , column-reverse row-reverse . Giá trị mặc định cho hướng uốn là row .
Sử dụng flex-flow
flex-flow khai báo hướng flex-direction của phần tử mẹ đầu tiên và giá trị flex-wrap thứ hai. Nó chỉ nên được sử dụng nếu bạn cần khai báo rõ ràng flex-direction flex-wrap và flex-wrap khác với các giá trị mặc định.
Điều này nghĩa là bạn có thể viết các thuộc tính flex này như sau:
.backwards-flex-container { flex-direction: row-reverse; flex-wrap: wrap-reverse; } Hoặc với viết tắt flex-flow để có được hiệu ứng tương tự:
.backwards-flex-container { flex-flow: row-reverse wrap-reverse; } Ví dụ "ngược" này sẽ có các phần tử con trong một hàng nhưng theo thứ tự đảo ngược (hướng flex-direction ). Nó cũng sẽ có các con tràn ra một hàng mới phía trên hàng đầu tiên. ✨
flex-flow là cách viết tắt flexbox duy nhất đặc biệt bao gồm flex-wrap nhưng cũng có nhiều loại khác. Nếu bạn thích ngắn gọn , hầu hết các thuộc tính flexbox đều có tùy chọn ngắn gọn ! 💅
Hỗ trợ trình duyệt
Nói chung, flexbox và flex-wrap được hỗ trợ rất tốt trong tất cả các trình duyệt hiện đại. Ngay cả Internet Explorer (IE) cũng hỗ trợ một phần cho flexbox và flex-wrap sau IE9.
Tiền tố Flexbox
Ngày nay, việc sử dụng tiền tố cho flexbox và flex-wrap ít phổ biến hơn và việc bạn có sử dụng chúng hay không sẽ phụ thuộc vào version trình duyệt bạn đang cố gắng hỗ trợ.
.parent { display: flex; display: -webkit-flex; /* old versions of Chrome/Safari/Opera */ display: -ms-flexbox; /* IE10 */ flex-wrap: wrap; -webkit-flex-wrap: wrap; /* old versions of Chrome/Safari/Opera */ } Lưu ý flex-wrap là một thuộc tính của flexbox đặc biệt không được hỗ trợ bởi một số version trình duyệt cũ, như Firefox.
Để chắc chắn nếu tiền tố là cần thiết, hãy kiểm tra Tôi có thể sử dụng để biết thông tin mới nhất về hỗ trợ trình duyệt, đặc biệt nếu bạn đang hỗ trợ các version cũ của trình duyệt.
Các tin liên quan
image đường viền và đường viền Gradient trong CSS thuần túy2020-09-03
Cắt image trong CSS với đối tượng phù hợp
2020-09-03
Inline so với Inline-Block Display trong CSS
2020-09-03
CSS Grid: Hợp lý và Căn chỉnh
2020-09-03
Bố cục lưới CSS: Đơn vị Fr
2020-09-03
Giới thiệu về Clipping Sử dụng clip-path trong CSS
2020-09-03
Tùy chỉnh gạch chân với trang trí văn bản trong CSS
2020-09-03
Giải thích về đơn vị CSS
2020-09-03
Thuộc tính khoảng trắng CSS
2020-09-03
Drop Caps trong CSS sử dụng chữ cái đầu tiên và chữ cái đầu
2020-09-03
