CSS justify-content – Thuộc tính justify-content trong CSS

CSS justify-content là một thuộc tính của CSS được sử dụng để căn chỉnh các phần tử trong container linh hoạt khi chúng không sử dụng hết tất cả các khả năng trên trục chính (theo chiều ngang). Nó xác định cách trình duyệt phân phối khoảng trống xung quanh và giữa các phần tử nội dung. Thuộc tính này không thể được sử dụng để mô tả các container hoặc các phần tử theo chiều dọc. Để căn chỉnh các phần tử theo chiều dọc, chúng ta phải sử dụng thuộc tính align-items.

Lập Trình Viên mời bạn cùng tham khảo chi tiết nội dung bên dưới. Bài viết này nằm trong chuyên đề hướng dẫn CSS từ cơ bản đến nâng cao tại dự án Phát Triển Website.

CSS justify-content là gì?

Thuộc tính CSS justify-content được sử dụng để căn chỉnh các phần tử trong container linh hoạt, chẳng hạn như một hàng menu hoặc một số nút điều hướng. Sử dụng thuộc tính này, bạn có thể kiểm soát cách các phần tử bố trí trong container của bạn. Với các giá trị khác nhau, bạn có thể căn giữa các phần tử hoặc phân phối chúng đều nhau trên toàn bộ container.

Hướng dẫn CSS justify-content

Tất cả các lập trình viên web đều có thể sử dụng thuộc tính CSS justify-content. Điều này đặc biệt hữu ích cho các lập trình viên front-end và các nhà thiết kế web trong việc tạo và căn chỉnh layout của trang web.

Các giá trị của thuộc tính CSS justify-content

Thuộc tính justify-content có năm giá trị khác nhau, được sử dụng để căn chỉnh các phần tử trong container linh hoạt:

1. center: Đây là giá trị để đưa các phần tử vào giữa container.
2. flex-start: Giá trị mặc định, đưa các phần tử vào bên trái của container.
3. flex-end: Đưa các phần tử vào bên phải của container.
4. space-around: Phân phối các phần tử ở khoảng cách bằng nhau với nhau và khoảng cách xung quanh chúng cũng bằng nhau.
5. space-between: Phân phối các phần tử ở khoảng cách bằng nhau với nhau nhưng không có khoảng cách xung quanh chúng.
6. space-evenly: Phân phối các phần tử ở khoảng cách bằng nhau với nhau, bao gồm khoảng cách xung quanh chúng.

Cách sử dụng thuộc tính CSS justify-content

Để sử dụng thuộc tính này, bạn cần bọc các phần tử của mình trong một container hoặc div. Sau đó, bạn có thể áp dụng thuộc tính justify-content vào container để căn chỉnh các phần tử con bên trong.

Ví dụ: Chúng ta có một container chứa ba hình ảnh:

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

Để đưa các phần tử vào giữa container, bạn có thể sử dụng giá trị center như sau:

.container {
  display: flex;
  justify-content: center;
}

Ưu và Nhược điểm CSS justify-content

Ưu điểm

1. Có khả năng căn chỉnh các phần tử linh hoạt và hiệu quả.
2. Dễ sử dụng và cấu hình.
3. Tăng tính tương thích của trang web trên nhiều thiết bị.

Nhược điểm

1. Thuộc tính justify-content chỉ áp dụng cho trục chính theo chiều ngang, không thể sử dụng để căn chỉnh theo chiều dọc.
2. Có thể gặp khó khăn khi sử dụng giá trị space-between trong một số trường hợp đặc biệt.
3. Không hoàn toàn tương thích với các trình duyệt web cũ.

Lời khuyên CSS justify-content

Để sử dụng thuộc tính CSS justify-content hiệu quả, bạn nên lưu ý các điểm sau:

1. Hãy kiểm tra xem trình duyệt của bạn có hỗ trợ thuộc tính này hay không.
2. Sử dụng thuộc tính này trong các trường hợp phù hợp như căn chỉnh các nút điều hướng hoặc các phần tử menu.
3. Khi sử dụng giá trị space-around hoặc space-evenly, hãy đảm bảo rằng các phần tử con không bị chồng lên nhau.