Hộp linh hoạt
Không thể bố trí khối xây bằng động với flexbox, ít nhất là không theo cách sạch sẽ và hiệu quả.
Flexbox là một hệ thống bố trí một chiều. Điều này có nghĩa là nó có thể sắp xếp các mục dọc theo các đường thẳng đứng HOẶC dọc. Một mục flex được giới hạn trong hàng hoặc cột của nó.
Một hệ thống lưới thực sự là hai chiều, có nghĩa là nó có thể sắp xếp các mục dọc theo các đường ngang VÀ dọc. Các mục nội dung có thể trải dài trên các hàng và cột đồng thời, điều mà các mục flex không thể làm được.
Đây là lý do tại sao flexbox có khả năng hạn chế để xây dựng lưới điện. Đó cũng là một lý do tại sao W3C đã phát triển một công nghệ CSS3 khác, Grid Layout .
row wrap
Trong một hộp chứa flex flex-flow: row wrap, các vật phẩm flex phải bọc thành các hàng mới .
Điều này có nghĩa là một mặt hàng flex không thể bọc dưới một mặt hàng khác trong cùng một hàng .
Lưu ý ở trên cách div # 3 kết thúc bên dưới div # 1 , tạo một hàng mới. Nó không thể bao bọc bên dưới div # 2 .
Kết quả là, khi các vật phẩm không phải là cao nhất trong hàng, khoảng trắng vẫn còn, tạo ra những khoảng trống khó coi.
column wrap
Nếu bạn chuyển sang flex-flow: column wrap , một bố cục giống như lưới sẽ đạt được nhiều hơn. Tuy nhiên, một container hướng cột có bốn vấn đề tiềm ẩn ngay lập tức:
- Các mặt hàng Flex chảy theo chiều dọc, không theo chiều ngang (như bạn cần trong trường hợp này).
- Container mở rộng theo chiều ngang, không theo chiều dọc (như bố cục Pinterest).
- Nó đòi hỏi các container phải có một chiều cao cố định, vì vậy các mặt hàng biết nơi để bọc.
- Theo văn bản này, nó có một thiếu sót trong tất cả các trình duyệt chính nơi container không mở rộng để chứa các cột bổ sung .
Kết quả là, một thùng chứa hướng cột không phải là một lựa chọn trong trường hợp này và trong nhiều trường hợp khác.
Lưới CSS với kích thước mục không xác định
Bố cục lưới sẽ là một giải pháp hoàn hảo cho vấn đề của bạn nếu độ cao khác nhau của các mục nội dung có thể được xác định trước . Tất cả các yêu cầu khác đều nằm trong khả năng của Grid.
Phải biết chiều rộng và chiều cao của các mục lưới để thu hẹp khoảng cách với các mục xung quanh.
Vì vậy, Grid, CSS tốt nhất phải cung cấp để xây dựng bố cục khối xây theo chiều ngang, bị thiếu trong trường hợp này.
Trong thực tế, cho đến khi một công nghệ CSS xuất hiện với khả năng tự động đóng các khoảng trống, CSS nói chung không có giải pháp. Một cái gì đó như thế này có thể sẽ yêu cầu chỉnh lại tài liệu, vì vậy tôi không chắc nó sẽ hữu ích và hiệu quả như thế nào.
Bạn sẽ cần một kịch bản.
Các giải pháp JavaScript có xu hướng sử dụng định vị tuyệt đối, loại bỏ các mục nội dung khỏi luồng tài liệu để sắp xếp lại chúng không có khoảng trống. Đây là hai ví dụ:
Lưới CSS với kích thước mục được xác định
Đối với các bố cục nơi chiều rộng và chiều cao của các mục nội dung được biết đến, đây là cách bố trí khối xây theo chiều ngang trong CSS thuần túy:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Làm thế nào nó hoạt động
- Thiết lập một container lưới cấp khối. (
inline-gridsẽ là lựa chọn khác)
- Các
grid-auto-rowsbất động sản thiết lập chiều cao của hàng tự động tạo ra. Trong lưới này, mỗi hàng cao 50px.
- Tài
grid-gapsản là một tốc ký cho grid-column-gapvà grid-row-gap. Quy tắc này đặt khoảng cách 10px giữa các mục lưới. (Nó không áp dụng cho khu vực giữa các mặt hàng và container.)
Các grid-template-columnsbất động sản thiết lập chiều rộng của cột được xác định một cách rõ ràng.
Các repeatký hiệu định nghĩa một mô hình của các cột lặp lại (hoặc hàng).
Các auto-fillchức năng bảo lưới điện để dòng lên như nhiều cột (hoặc hàng) càng tốt mà không tràn container. (Điều này có thể tạo ra một hành vi tương tự như bố trí flexflex-wrap: wrap .)
Các minmax()chức năng thiết lập một phạm vi kích thước tối thiểu và tối đa cho mỗi cột (hoặc hàng). Trong mã ở trên, chiều rộng của mỗi cột sẽ tối thiểu là 30% của container và tối đa của bất kỳ không gian trống nào có sẵn.
Các frđơn vị đại diện cho một phần nhỏ của không gian trống trong container lưới. Nó tương đương với flex-growtài sản của flexbox .
Với grid-rowvà spanchúng tôi đang nói với các mục lưới có bao nhiêu hàng chúng nên trải dài.
Hỗ trợ trình duyệt cho CSS Grid
- Chrome - hỗ trợ đầy đủ kể từ ngày 8 tháng 3 năm 2017 (phiên bản 57)
- Firefox - hỗ trợ đầy đủ kể từ ngày 6 tháng 3 năm 2017 (phiên bản 52)
- Safari - hỗ trợ đầy đủ kể từ ngày 26 tháng 3 năm 2017 (phiên bản 10.1)
- Edge - hỗ trợ đầy đủ kể từ ngày 16 tháng 10 năm 2017 (phiên bản 16)
- IE11 - không hỗ trợ cho thông số kỹ thuật hiện tại; hỗ trợ phiên bản lỗi thời
Đây là bức tranh hoàn chỉnh: http://caniuse.com/#search=grid
Tính năng lớp phủ lưới tuyệt vời trong Firefox
Trong các công cụ dev của Firefox, khi bạn kiểm tra bộ chứa lưới, có một biểu tượng lưới nhỏ trong khai báo CSS. Khi nhấp vào, nó sẽ hiển thị một phác thảo về lưới của bạn trên trang.
Thêm chi tiết tại đây: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
