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.

<div class="flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

// CSS
.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
}

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ế.

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.

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
}

.flex-gap > div {
  margin: 6px;
}

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.

.flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

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.

<div class="emulated-flex-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

//CSS
.emulated-flex-gap > * {
  margin: 12px 0 0 12px;
}

.emulated-flex-gap {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -12px 0 0 -12px;
  width: calc(100% + 12px);
}

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.

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.

.emulated-flex-gap {
  --gap: 12px;
  display: inline-flex;
  flex-wrap: wrap;
  margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
  width: calc(100% + var(--gap));
}

.emulated-flex-gap > * {
  margin: var(--gap) 0 0 var(--gap);
}

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