Box alignment in multi-column layout
Module CSS box alignment mô tả chi tiết cách căn chỉnh hoạt động trong các phương pháp bố cục khác nhau; trong hướng dẫn này, chúng ta tìm hiểu cách box alignment hoạt động trong bối cảnh của multi-column layout. Vì hướng dẫn này nhằm mục đích trình bày chi tiết những gì đặc thù cho cả hai module, nên nó cần được đọc cùng với hướng dẫn tổng quan về box alignment, trong đó trình bày các tính năng chung của box alignment trong các phương pháp bố cục.
Trong multi-column layout, alignment container là content box của multicol container. alignment subject là column box. Các thuộc tính áp dụng cho multi-column layouts được trình bày chi tiết dưới đây.
align-content và justify-content
Thuộc tính align-content áp dụng cho trục block và justify-content cho trục inline. Bất kỳ khoảng cách nào được thêm vào các cột do việc sử dụng phân phối không gian sẽ được cộng vào khoảng cách giữa các cột, do đó làm cho khoảng cách lớn hơn so với những gì có thể được chỉ định bởi thuộc tính column-gap (hoặc shorthand gap).
Việc sử dụng giá trị justify-content khác normal hoặc stretch sẽ khiến các column box hiển thị với column-width được chỉ định trên multicol container, và không gian còn lại được phân phối theo giá trị của justify-content.
column-gap
Thuộc tính column-gap ban đầu được chỉ định trong đặc tả multi-column layout và sau đó được hợp nhất với các thuộc tính gap cho các phương pháp bố cục khác trong box alignment. Trong khi các phương pháp bố cục khác coi giá trị ban đầu của column-gap là 0, thì multi-column layout coi nó là 1em — thông thường bạn muốn có khoảng cách giữa các cột.