There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

{{CSSRef}}

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 ở đó.

Phương thức căn chỉnh cũ hơn

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 ( thuộc tính "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ếnCSS , 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.

Ví dụ cơ bản

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 GridFlexbox .

Ví dụ căn chỉnh bố cục lưới CSS

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)}}

Ví dụ liên kết Flexbox

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)}}

Khái niệm và thuật ngữ chính

Đặ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í.

Mối quan hệ với chế độ viết

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.

Hai kích thước căn chỉnh

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-:

  • {{cssxref ("justify-items")}}
  • {{cssxref ("biện minh")}}
  • {{cssxref ("justify-content")}}

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-:

  • {{cssxref ("align-items")}}
  • {{cssxref ("căn chỉnh")}}
  • {{cssxref ("căn chỉnh nội dung")}}

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.

Chủ thể căn chỉnh

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-contentalign-contentkhác nhau theo phương thức bố cục.

Container liên kết

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.

Căn chỉnh dự phòng

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ác loại căn chỉnh

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ăn chỉnh vị trí : xác định vị trí của đối tượng căn chỉnh có liên quan đến vùng chứa căn chỉnh của nó.
  • Căn chỉnh đường cơ sở : Các từ khóa này xác định căn chỉnh là mối quan hệ giữa các đường cơ sở của nhiều đối tượng căn chỉnh trong một ngữ cảnh căn chỉnh.
  • Căn chỉnh phân phối : Các từ khóa này xác định căn chỉnh là phân bố không gian giữa các đối tượng căn chỉnh.

Giá trị từ khóa liên kết vị trí

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-contentalign-contentvà còn cho sự liên kết tự với justify-selfalign-self.

  • center
  • start
  • end
  • self-start
  • self-end
  • flex-start chỉ dành cho Flexbox
  • flex-end chỉ dành cho Flexbox
  • left
  • right

Khác với các giá trị vật lý leftright, 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ăn chỉnh căn bản

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-contentalign-contentvà còn cho sự liên kết tự với justify-selfalign-self.

  • baseline
  • first baseline
  • last baseline

Că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-itemsalign-items.

Căn chỉnh phân phối

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-contentjustify-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:

  • stretch
  • space-between
  • space-around
  • space-evenly

Ví 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ăn chỉnh tràn

Các từ khóa safeunsafetừ 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.

Khoảng cách giữa các hộp

Các đặc điểm kỹ thuật liên kết hộp cũng bao gồm gap, row-gapcolumn-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-gapcolumn-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:

  • {{cssxref ("hàng-khoảng cách")}}
  • {{cssxref ("khoảng trống cột")}}
  • {{cssxref ("khoảng cách")}}

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.

  • {{cssxref ("lưới-hàng-khoảng cách")}}
  • {{cssxref ("lưới-cột-khoảng trống")}}
  • {{cssxref ("lưới-khoảng cách")}}

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.

Các trang chi tiết các thuộc tính căn chỉnh riêng lẻ

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ó:

Tài liệu tham khảo

Thuộc tính CSS

  • {{cssxref ("justify-content")}}
  • {{cssxref ("căn chỉnh nội dung")}}
  • {{cssxref ("vị trí nội dung")}}
  • {{cssxref ("justify-items")}}
  • {{cssxref ("align-items")}}
  • {{cssxref ("địa điểm")}}
  • {{cssxref ("biện minh")}}
  • {{cssxref ("căn chỉnh")}}
  • {{cssxref ("địa điểm")}}
  • {{cssxref ("hàng-khoảng cách")}}
  • {{cssxref ("khoảng trống cột")}}
  • {{cssxref ("khoảng cách")}}

Thuật ngữ

Hướng dẫn

Tài nguyên bên ngoài

Document Tags and Contributors

Những người đóng góp cho trang này: ngocV
Cập nhật lần cuối bởi: ngocV,