Biện minh cho nội dung css

Thuộc tính CSS này được sử dụng để căn chỉnh các mục của bộ chứa hộp linh hoạt khi các mục không sử dụng hết không gian có sẵn trên trục chính (theo chiều ngang). Nó xác định cách trình duyệt phân phối không gian xung quanh và giữa các mục nội dung

Không thể sử dụng thuộc tính CSS này để mô tả các vùng chứa hoặc mục dọc theo trục tung. Để căn chỉnh các mục theo chiều dọc, chúng ta phải sử dụng thuộc tính align-items

cú pháp

Giá trị mặc định của thuộc tính này là flex-start. Hãy hiểu chi tiết các giá trị tài sản của nó

Giá trị tài sản

• trung tâm. Đúng như tên gọi của nó, nó đặt vị trí của các mục ở trung tâm của thùng chứa
• khởi động linh hoạt. Đó là giá trị mặc định định vị các mục ở đầu vùng chứa
• kết thúc uốn cong. Nó đặt vị trí của các mục ở cuối vùng chứa
• không gian xung quanh. Nó định vị các mục có khoảng cách bằng nhau. Nó phân bổ đều các mục trong dòng cùng với cùng một không gian xung quanh chúng
• không gian giữa. Các mục cách đều nhau trong đó mục đầu tiên ở đầu và mục cuối cùng ở cuối
• không gian đều. Nó cũng định vị các mục có không gian bằng nhau, nhưng khoảng cách từ các góc khác nhau

Hãy hiểu các giá trị trên bằng cách sử dụng một minh họa

Thí dụ

Kiểm tra nó ngay bây giờ

---

Sử dụng justify-between để căn chỉnh các mặt hàng dọc theo trục chính của thùng chứa sao cho có khoảng cách bằng nhau giữa mỗi mặt hàng

  
01
  
02
  
03

Không gian xung quanh

Sử dụng

  
01
  
02
  
03

0 để căn chỉnh các mặt hàng dọc theo trục chính của thùng chứa sao cho có một khoảng không gian bằng nhau ở mỗi bên của mỗi mặt hàng

  
01




  
02
  
03

Không gian đều

Sử dụng

  
01
  
02
  
03

1 để căn chỉnh các mặt hàng dọc theo trục chính của thùng chứa sao cho có một khoảng không gian bằng nhau xung quanh mỗi mặt hàng, nhưng cũng chiếm gấp đôi khoảng cách mà bạn thường thấy giữa mỗi mặt hàng khi sử dụng

  
01
  
02
  
03

0

  
01
  
02
  
03

---

áp dụng có điều kiện

Di chuột, tập trung và các trạng thái khác

Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng

  
01
  
02
  
03

3 để chỉ áp dụng tiện ích justify-between khi di chuột

Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States

Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng

  
01
  
02
  
03

5 để áp dụng tiện ích justify-between chỉ ở kích thước màn hình trung bình trở lên

Nó xác định sự liên kết dọc theo trục chính. Nó giúp phân phối thêm không gian trống còn lại khi tất cả các mục linh hoạt trên một dòng không linh hoạt hoặc linh hoạt nhưng đã đạt đến kích thước tối đa của chúng. Nó cũng thực hiện một số kiểm soát đối với việc căn chỉnh các mục khi chúng tràn ra khỏi dòng

Thuộc tính justify-content chấp nhận năm giá trị khác nhau

• flex-start (mặc định). các mặt hàng được đóng gói về phía vạch xuất phát
• flex-end. các mặt hàng được đóng gói về phía cuối dòng
• center. các mục được căn giữa dọc theo dòng
• space-between. các mặt hàng được phân bổ đều trong hàng;
• space-around. các mặt hàng được phân bổ đều trong hàng với khoảng cách bằng nhau xung quanh chúng
• space-evenly. các mục được phân phối sao cho khoảng cách giữa hai đối tượng căn chỉnh liền kề bất kỳ, trước đối tượng căn chỉnh đầu tiên và sau đối tượng căn chỉnh cuối cùng là như nhau

Hình dưới đây giúp hiểu những gì tài sản justify-content thực sự làm

cú pháp

________số 8_______

Thử nghiệm

Bản trình diễn sau đây cho thấy các mục linh hoạt hoạt động như thế nào tùy thuộc vào giá trị justify-content

• Danh sách đỏ được đặt thành flex-start
• Màu vàng được đặt thành flex-end
• Màu xanh lam được đặt thành center
• Màu xanh lá cây được đặt thành space-between
• Màu hồng được đặt thành space-around
• Màu xanh nhạt được đặt thành space-evenly

Dự phòng nhúng CodePen

hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari21*2811126.1*

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari109< . 41074.47. 0-7. 1*

Trình duyệt Blackberry 10+ hỗ trợ cú pháp mới

Kể từ bản cập nhật mới nhất vào tháng 12 năm 2018 của chúng tôi, justify-content7 đang được hỗ trợ. Có một trên đó

Dữ liệu hỗ trợ trình duyệt này đến từ , có nhiều chi tiết hơn. Một số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên

máy tính để bàn

ChromeFirefoxIEEdgeSafari6052No7911

Di động / Máy tính bảng

Android ChromeAndroid FirefoxAndroidiOS Safari109< . 0-11. 210710911.0-11.2

Để biết thêm thông tin về cách kết hợp các cú pháp để được hỗ trợ trình duyệt tốt nhất, vui lòng tham khảo bài viết “Sử dụng Flexbox” của chúng tôi

Điều gì là biện minh

Làm cách nào để căn chỉnh văn bản trong CSS?

Đâu là sự khác biệt giữa align

Tôi có thể sử dụng cái gì thay vì biện minh