Mô-đun sắp xếp hộp CSS chỉ định các tính năng CSS liên quan đến căn chỉnh các hộp trong các mô hình bố trí hộp CSS khác nhau: bố trí khối, bố cục bảng, bố cục flex và bố cục lưới. Mô-đun này nhằm mục đích tạo ra một phương thức liên kết nhất quán trên tất cả CSS. Tài liệu này nêu chi tiết các khái niệm chung được tìm thấy trong đặc tả.
Lưu ý : Tài liệu cho từng phương pháp bố cục sẽ nêu chi tiết cách áp dụng Sắp xếp hộp ở đó.
CSS theo truyền thống có khả năng liên kết rất hạn chế. Chúng tôi đã có thể căn chỉnh văn bản bằng cách sử dụng {{cssxref ("text-align")}}, các khối trung tâm sử dụng tự động {{cssxref ("margin")}} s và trong bảng hoặc khối nội tuyến bằng cách sử dụng {{cssxref("vertical-align")}}. Việc căn chỉnh văn bản hiện được bao phủ bởi các mô-đun Văn bản Nội tuyến và CSS , và lần đầu tiên trong Căn chỉnh Hộp, chúng tôi có khả năng căn chỉnh ngang và dọc hoàn toàn.
Nếu ban đầu bạn học Flexbox thì bạn có thể xem xét các thuộc tính này là một phần của đặc tả Flexbox, và một số thuộc tính thực sự được liệt kê trong Cấp 1 của Flexbox. Tuy nhiên, đặc điểm kỹ thuật lưu ý rằng đặc tả của Alignment Box nên được nhắc đến vì nó có thể bổ sung thêm các khả năng so với những gì hiện có trong Flexbox.
Các ví dụ sau đây minh họa cách một số Thuộc tính sắp xếp hộp được áp dụng trong Grid và Flexbox .
Trong ví dụ này bằng cách sử dụng Grid Layout, có thêm không gian trong vùng chứa lưới sau khi đặt các bản nhạc có chiều rộng cố định trên trục nội tuyến (chính). Không gian này được phân phối bằng {{cssxref ("justify-content")}}. Trên trục (chéo), sự liên kết của các mục bên trong vùng lưới của chúng được điều khiển bằng {{cssxref ("align-items")}}. Mục đầu tiên ghi đè align-itemsgiá trị được đặt trên nhóm bằng cách đặt {{cssxref ("align-self")}} thành center.
{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-align-items.html", '100%', 500)}}
Trong ví dụ này, ba mục flex được căn chỉnh trên trục chính sử dụng justify-contentvà trên Trục chéo sử dụng align-items. Mục đầu tiên ghi đè align-itemstập hợp trên nhóm bằng cách đặt align-selfthành center.
{{EmbedGHLiveSample ("css-example / box-alignment / overview / flex-align-items.html", '100%', 500)}}
Đặc tả chi tiết một số thuật ngữ liên kết để giúp dễ dàng thảo luận các thuộc tính căn chỉnh bên ngoài việc thực hiện chúng trong một phương pháp bố cục cụ thể. Ngoài ra còn có một số khái niệm chính được phổ biến cho tất cả các phương pháp bố trí.
Sự liên kết được liên kết với các chế độ viết trong đó khi chúng ta căn chỉnh một mục, chúng ta không xem xét liệu chúng ta đang căn chỉnh nó với các kích thước vật lý của trên cùng, bên phải, phía dưới và bên trái. Thay vào đó, chúng tôi mô tả sự liên kết về mặt bắt đầu và kết thúc của thứ nguyên cụ thể mà chúng tôi đang làm việc. Điều này đảm bảo rằng liên kết hoạt động theo cùng một cách mà bất kỳ chế độ ghi nào của tài liệu.
Khi sử dụng các thuộc tính căn chỉnh hộp, bạn sẽ căn chỉnh nội dung trên một trong hai trục - trục nội tuyến (hoặc trục chính) và trục khối (hoặc chéo). Trục nội tuyến là trục dọc theo đó các từ trong dòng câu trong chế độ viết đang được sử dụng - cho tiếng Anh, ví dụ, trục nội tuyến nằm ngang. Trục khối là trục dọc theo đó các khối, chẳng hạn như các phần tử đoạn, được đặt ra và nó chạy trên trục Inline.
Khi căn chỉnh các mục trên trục nội tuyến, bạn sẽ sử dụng các thuộc tính bắt đầu bằng justify-:
Khi căn chỉnh các mục trên trục khối, bạn sẽ sử dụng các thuộc tính bắt đầu align-:
Flexbox bổ sung thêm một biến chứng trong đó ở trên là đúng khi {{cssxref ("flex-direction")}} được đặt thành row. Các thuộc tính được hoán đổi khi flexbox được đặt thành column. Vì vậy, khi làm việc với flexbox, bạn sẽ dễ dàng nghĩ về trục chính và trục chéo hơn là nội tuyến và khối. Các justify-thuộc tính luôn được sử dụng để căn chỉnh trên trục chính, các align-thuộc tính trên trục chéo.
Các chủ đề liên kết là điều đang được liên kết. Đối với justify-selfhoặc align-self, hoặc khi thiết lập các giá trị này dưới dạng một nhóm có justify-itemshoặc align-items, đây sẽ là hộp lề của phần tử mà thuộc tính này đang được sử dụng. Các thuộc tính justify-contentvà align-contentkhác nhau theo phương thức bố cục.
Các thùng chứa liên kết là hộp đề tài này đã được liên kết bên trong. Điều này thường sẽ là khối chứa của đối tượng căn chỉnh. Vùng chứa liên kết có thể chứa một hoặc nhiều đối tượng căn chỉnh.
Hình ảnh dưới đây cho thấy một container liên kết với hai đối tượng căn chỉnh bên trong.
Nếu bạn đặt căn chỉnh không thể hoàn thành, thì căn chỉnh dự phòng sẽ đi vào hoạt động và đối phó với không gian có sẵn. Liên kết dự phòng này được chỉ định riêng cho từng phương thức bố cục và được trình bày chi tiết trên trang cho phương thức đó.
Có ba loại căn chỉnh khác nhau mà chi tiết đặc điểm kỹ thuật; các giá trị từ khóa này sử dụng.
Các giá trị sau được định nghĩa cho sự liên kết vị trí, và có thể được sử dụng như giá trị cho sự liên kết nội dung với justify-contentvà align-contentvà còn cho sự liên kết tự với justify-selfvà align-self.
centerstartendself-startself-endflex-start chỉ dành cho Flexboxflex-end chỉ dành cho FlexboxleftrightKhác với các giá trị vật lý leftvà right, liên quan đến các thuộc tính vật lý của màn hình, tất cả các giá trị khác là các giá trị logic và liên quan đến chế độ viết của nội dung.
Ví dụ, khi làm việc trong CSS Grid Layout, nếu bạn đang làm việc bằng tiếng Anh và thiết lập justify-contentđể startđiều này sẽ di chuyển các mục trong kích thước nội tuyến để bắt đầu, mà sẽ được trái như câu trong tiếng Anh bắt đầu ở bên trái. Nếu bạn đang sử dụng tiếng Ả Rập, ngôn ngữ từ phải sang trái, thì giá trị tương tự startsẽ dẫn đến các mục di chuyển sang phải, như các câu trong tiếng Ả Rập bắt đầu ở phía bên tay phải của trang.
Cả hai ví dụ này đều có justify-content: start, tuy nhiên vị trí bắt đầu thay đổi theo chế độ viết.
Các từ khóa căn chỉnh đường cơ sở được sử dụng để căn chỉnh các đường cơ sở của các hộp trên một nhóm đối tượng căn chỉnh. Chúng có thể được sử dụng như giá trị cho sự liên kết nội dung với justify-contentvà align-contentvà còn cho sự liên kết tự với justify-selfvà align-self.
baselinefirst baselinelast baselineCăn chỉnh nội dung đường cơ sở - chỉ định giá trị căn chỉnh căn bản cho justify-contenthoặc align-content- hoạt động trong các phương thức bố cục để sắp xếp các mục ra theo hàng. Các đối tượng căn chỉnh là đường cơ sở được căn chỉnh với nhau bằng cách thêm đệm vào bên trong các hộp.
Căn chỉnh tự căn chỉnh thay đổi các hộp để căn chỉnh theo đường cơ sở bằng cách thêm lề ngoài các hộp. Tự căn chỉnh là khi sử dụng justify-selfhoặc align-self, hoặc khi đặt các giá trị này thành một nhóm có justify-itemsvà align-items.
Các từ khóa liên kết phân tán được sử dụng với các thuộc tính align-contentvà justify-content. Những từ khóa này xác định những gì sẽ xảy ra với bất kỳ không gian bổ sung nào sau khi đối tượng căn chỉnh được hiển thị. Các giá trị như sau:
stretchspace-betweenspace-aroundspace-evenlyVí dụ, trong các mục Flex Layout được căn chỉnh với flex-startban đầu. Làm việc ở chế độ viết ngang từ trên xuống dưới như tiếng Anh, flex-directionkhi rowcác mục bắt đầu ở phía xa bên trái và bất kỳ khoảng trống nào sau khi hiển thị các mục được đặt sau các mục.
Nếu bạn đặt justify-content: space-betweentrên thùng chứa flex, không gian có sẵn hiện được chia sẻ và đặt giữa các mục.
Cần có khoảng trống trong thứ nguyên bạn muốn căn chỉnh các mục để các từ khóa này có hiệu lực. Không có không gian, không có gì để phân phối.
Các từ khóa safevà unsafetừ khóa giúp xác định hành vi khi đối tượng căn chỉnh lớn hơn vùng chứa căn chỉnh. Các safetừ khóa sẽ sắp xếp để starttrong trường hợp của một liên kết cụ thể gây ra một tràn, mục đích là để tránh “mất dữ liệu”, nơi một phần của mặt hàng đó nằm ngoài ranh giới của container liên kết và không thể được cuộn để.
Nếu bạn chỉ định unsafesau đó sự liên kết sẽ được tôn trọng ngay cả khi nó sẽ gây ra mất dữ liệu như vậy.
Các đặc điểm kỹ thuật liên kết hộp cũng bao gồm gap, row-gapvà column-gaptài sản. Các thuộc tính này cho phép thiết lập khoảng cách nhất quán giữa các mục trong một hàng hoặc cột, trong bất kỳ phương thức bố cục nào có các mục được sắp xếp theo cách này.
Tài gapsản là một cách viết tắt row-gapvà column-gapcho phép chúng tôi thiết lập các thuộc tính này cùng một lúc:
Trong ví dụ dưới đây, bố cục lưới sử dụng gapviết tắt để đặt 10pxkhoảng cách giữa các bản nhạc hàng và 2emkhoảng cách giữa các bản nhạc cột.
{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-gap.html", '100%', 500)}}
Trong ví dụ này, tôi đang sử dụng thuộc tính {{cssxref ("grid-gap")}} ngoài {{cssxref ("gap")}}. Các thuộc tính khoảng trống ban đầu được bắt đầu bằng grid-đặc tả bố cục lưới và một số trình duyệt chỉ hỗ trợ các phiên bản tiền tố này.
Các phiên bản tiền tố sẽ được duy trì như một bí danh của những cái chưa được sửa đổi, tuy nhiên bạn luôn có thể tăng gấp đôi theo cách bạn muốn với tiền tố của nhà cung cấp, thêm thuộc grid-gaptính và sau đó thuộc gaptính có cùng giá trị.
Ngoài ra, hãy lưu ý rằng những thứ khác có thể làm tăng khoảng cách trực quan được hiển thị, ví dụ bằng cách sử dụng các từ khóa phân phối không gian hoặc thêm các lề vào các mục.
Vì các thuộc tính căn chỉnh hộp CSS được thực hiện khác nhau tùy thuộc vào đặc tả mà chúng tương tác, hãy tham khảo các trang sau cho từng loại bố cục để biết chi tiết về cách sử dụng các thuộc tính căn chỉnh với nó: