CSS Gap Space với Flexbox

CSS Flexbox và CSS Grid là những công cụ tuyệt vời có sẵn để quản lý bố cục trên Web. Flexbox xử lý bố cục đơn chiều rất tốt trong khi CSS Grid xử lý bố cục hai chiều với cột và hàng.

Thường thì chúng ta muốn thêm không gian giữa các item trong bố cục của mình. Bài viết này sẽ chỉ ra cách thực hiện việc này bằng cách sử dụng thuộc tính CSS gap trong Flexbox và các cách giải quyết cần thiết để hỗ trợ trình duyệt hợp lý.

Inline Flex

Để chứng minh CSS Gap, chúng ta sẽ sử dụng Flexbox. CSS Gap hoạt động trong CSS Grid, nhưng có nhiều trường hợp chúng ta có danh sách nội tuyến cần khoảng trống mà không có Grid xác định.

Chúng ta sử dụng inline-flex để có thể có các mục flex nhưng hiển thị phần tử mẹ của chúng ta dưới dạng phần tử inline thay vì phần tử block.

Thuộc tính flex-wrap: wrap sẽ cho phép các mục của chúng ta xuống hàng khi vùng chứa parent bị thu hẹp hoặc bị hạn chế.

CSS Gap Space với Flexbox
CSS flex wrap

Nếu chúng ta muốn thêm khoảng cách giữa mỗi item, chúng ta có thể sử dụng margin trên mỗi item.

Css flex wrap and margin space
Css flex wrap and margin space

Margins hoạt động nhưng không phải giống như CSS Gap space. Chú ý không gian thừa xung quanh các item. Chúng ta chỉ muốn áp dụng khoảng cách giữa các item. Sử dụng CSS Gap, chúng ta có thể đạt được điều này.

Css flex wrap with css gap spacing
Css flex wrap with css gap spacing

CSS Gap là một tính năng của CSS Grid spec và Flexbox; tuy nhiên, hiện tại Firefox là trình duyệt chính duy nhất hỗ trợ gap trên các flex items.

Vì thiếu sự hỗ trợ của trình duyệt, để đạt được hiệu quả tương tự, chúng ta sẽ cần sử dụng một số bản hack CSS với margins.

Chúng ta có thể đặt margin ở trên cùng và bên trái của mỗi item. Trên phần tử cha flex, chúng ta có thể sử dụng margin âm để bù lại phần dư thừa trên các phần tử bên ngoài để có được hiệu ứng tương tự như CSS gap space.

Css flex wrap with css gap spacing
Css flex wrap with css gap spacing

Chúng ta có thể clean CSS một chút bằng cách sử dụng CSS Custom Properties để thay đổi khoảng cách lề dễ dàng hơn.

Với cách giải quyết này, chúng ta có thể có được thứ gì đó gần với CSS Gap trong tất cả các trình duyệt. Hy vọng sẽ sớm thấy hỗ trợ trình duyệt được cải thiện cho CSS gap vì nó tăng cường quản lý bố cục bằng CSS. Với CSS Gap spacing, chúng ta có thể loại bỏ rất nhiều khoảng trắng phức tạp trong CSS khi sử dụng margin.

Xem bản demo đầy đủ bên dưới!

Nguồn bài viết: https://coryrylan.com/blog/css-gap-space-with-flexbox

Hơn 100 hình ảnh minh họa chất lượng cao, hoàn toàn miễn phí cho products của bạn 9 ứng dụng hữu ích cho Developers Làm tròn số trong PHP với ceil(), floor() và round() 10 mẹo để trở thành một nhà phát triển tuyệt vời Cách xóa một item khỏi Array trong JavaScript Giới thiệu và sử dụng CSS Variables Cách cài đặt MongoDB trên Ubuntu 18.04 Thêm Form tính giá sản phẩm trong Woocommerce WordPress BroadcastChannel API: Giao tiếp giữa các tab hoặc cửa sổ trong trình duyệt Hướng dẫn deploy project Nuxt JS lên VPS 😍

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.