Item Flow phần 1: Cách thiết lập cấu trúc web mới của CSS

Bối cảnh

Theo thời gian, Flexbox và Grid đã có thể hoạt động chỉ bằng CSS, nhưng bố cục Masonry vẫn phải dựa vào JavaScript. Vì bố cục này nên đã diễn ra khá nhiều cuộc thảo luận giữa các trình duyệt. Chrome đã triển khai một layout mới (display: masonry), còn Firefox và Safari triển khai theo cách đặt grid-template-*: collapse.

Nhưng có người đưa ra một giải pháp khác hẳn so với trước đây. Đó là đề xuất thống nhất các layout Masonry, Grid và Flexbox thành một.

Gộp luồng của Flexbox và Grid

Cách thiết lập hướng chảy của phần tử con trước đây khác nhau ở từng layout.

.container {  
    /* Flexbox */  
    flex-direction: row | row-reverse | column | column-reverse;  
    flex-wrap: nowrap | wrap | wrap-reverse;  
    /* flex-direction + flex-wrap */  
    flex-flow: <flex-direction> <flex-wrap>;  
  
    /* Grid */  
    grid-auto-flow: row | column | dense;  
}  

Tính năng này dự kiến sẽ được hợp nhất thành:

• item-direction
• item-wrap
• item-pack
• item-slack

item-direction

Định nghĩa hướng mà các phần tử con chảy. Thay thế cho các property flex-direction, grid-auto-flow.

.container {  
    item-direction: row | row-reverse | column | column-reverse;  
}  

item-wrap

Định nghĩa hành vi và hướng khi các phần tử con bị tràn quá một dòng. Thay thế cho property flex-wrap.

.container {  
    item-wrap: auto || [[nowrap | wrap] | [normal | reverse]];  
}  

Bố cục Grid mặc định theo kiểu wrap, nhưng nếu đặt item-wrap: nowrap thì tất cả phần tử sẽ được sắp xếp trên một hàng duy nhất và tạo được layout có chiều rộng đồng nhất.

item-pack

Định nghĩa cách xếp chồng các phần tử con. Thay thế cho property grid-auto-flow: dense.

.container {  
    item-pack: normal | dense;  
}  

Flexbox trước đây không có tính năng này, nhưng nhờ item-pack: dense, giờ có thể xếp chồng theo đúng cách của Grid. Chẳng hạn, ở Flexbox có wrap trước kia, khi đang xếp phần tử thì nếu không gian còn lại của một hàng nhỏ hơn chiều rộng phần tử, nó luôn sang hàng tiếp theo; từ đây, nếu ở hàng trước còn chỗ có thể chứa được phần tử, thì sẽ ưu tiên đặt vào chỗ đó trước.

Ngoài ra, cũng có thể thêm các cách mới chưa từng có:

• item-pack: balance: như text-wrap: balance, có thể cân chỉnh số lượng phần tử mỗi hàng sao cho tương đồng giữa các hàng.
• item-pack: collapse: giúp dễ dàng hiện thực hóa mục tiêu cuối cùng là bố cục Masonry.

item-slack

Thuộc tính này đặt kích thước khoảng trống dự phòng tối thiểu phải giữ lại trên mỗi hàng khi xếp các phần tử con. Thay thế cho các property grid-slack, masonry-slack đã từng được đề xuất trước đây. Tên item-slack hiện vẫn đang được thảo luận (Ghi chú dịch: hiện đã được chốt là flow-tolerance).

Gom lại

Khi tạo một Flexbox như bên dưới, có thể cấu hình như sau.

.container {  
    display: flex;  
    item-direction: column;  
    item-wrap: nowrap;  
}  

Một cách viết ngắn hơn cũng sẽ có:

.container {  
    display: flex;  
    item-flow: column nowrap;  
}  

Tên và cách hoạt động của property này đang tiếp tục được thảo luận.

---

Hiện tại, bố cục Masonry đã đổi thành display: grid-lanes. Nhưng các property item-* vẫn đang được bàn thảo theo hướng tích cực.

• Unifying grid-auto-flow and flex-flow(liên quan đến thảo luận item-flow)
• Quyết định tên cho item-slack(đã chốt là flow-tolerance)
• Brick by brick: Help us build CSS Masonry
• CSS Grid Lanes

Cá nhân tôi mong rằng, khi đã thống nhất thành một, có thể bỏ luôn display: flex hoặc grid.