<content-distribution>
Kiểu giá trị liệt kê <content-distribution> được sử dụng bởi các thuộc tính justify-content và align-content, và viết tắt place-content, để phân phối không gian thừa của container giữa các đối tượng căn chỉnh của nó.
Cú pháp
<content-distribution> = space-between | space-around | space-evenly | stretch
Giá trị
Các giá trị từ khóa sau được biểu diễn bởi thuật ngữ ngữ pháp <content-distribution>:
space-between-
Phân phối đều đối tượng căn chỉnh bên trong container căn chỉnh. Mục đầu tiên được đặt sát với cạnh bắt đầu của container căn chỉnh, mục cuối cùng được đặt sát với cạnh kết thúc của container căn chỉnh, và các mục còn lại được phân phối đều sao cho khoảng cách giữa bất kỳ hai mục liền kề nào là bằng nhau. Căn chỉnh dự phòng mặc định cho
space-betweenlàsafe flex-startcho bố cục flex, vàstarttrong các trường hợp khác. Nếu chỉ có một mục, mục đó sẽ sát với cạnh bắt đầu. space-around-
Các mục được phân phối đều trong container, với một khoảng cách nửa kích thước ở mỗi đầu. Khoảng cách giữa bất kỳ hai mục liền kề nào là bằng nhau, và khoảng cách trước mục đầu tiên và sau mục cuối cùng bằng một nửa kích thước các khoảng cách khác. Căn chỉnh dự phòng mặc định cho
space-aroundlàsafe center. Nếu container chỉ có một phần tử con, mục đó sẽ được căn giữa. space-evenly-
Các mục được phân phối đều trong container, với một khoảng cách đầy đủ ở mỗi đầu. Khoảng cách giữa bất kỳ hai mục liền kề nào, trước mục đầu tiên, và sau mục cuối cùng đều bằng nhau. Căn chỉnh dự phòng mặc định cho
space-evenlylàsafe center. Nếu container chỉ có một phần tử con, mục đó sẽ được căn giữa. stretch-
Nếu kích thước kết hợp của các mục nhỏ hơn kích thước container, bất kỳ mục nào có thể tăng kích thước sẽ được tăng kích thước bằng nhau (không theo tỷ lệ), trong khi vẫn tôn trọng các ràng buộc đặt ra bởi
max-height,max-width, hoặc chức năng tương đương, sao cho kích thước kết hợp của các mục lấp đầy chính xác container. Căn chỉnh dự phòng mặc định chostretchlàflex-starttrong flexbox, vàstarttrong các chế độ bố cục khác. Nếu chỉ có một mục, và mục đó có thể tăng kích thước, nó sẽ tăng để lấp đầy container.
Thông số kỹ thuật
| Specification |
|---|
| CSS Box Alignment Module Level 3 # typedef-content-distribution |
Xem thêm
- Các thuộc tính sử dụng kiểu dữ liệu này:
align-content,justify-content,place-content - Các kiểu dữ liệu căn chỉnh hộp khác:
<baseline-position>,<content-position>,<overflow-position>, và<self-position> - Mô-đun CSS box alignment
- Mô-đun CSS flexible box layout
- Mô-đun CSS grid layout