path: root/files/vi/web/css/css_box_alignment/index.html

---
title: CSS Box Alignment
slug: Web/CSS/CSS_Box_Alignment
translation_of: Web/CSS/CSS_Box_Alignment
---
<div><font><font>{{CSSRef}}</font></font></div>

<p class="summary"><font><font>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. </font><font>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. </font><font>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ả.</font></font></p>

<div class="note">
<p><strong><font><font>Lưu ý</font></font></strong><font><font> : 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 ở đó.</font></font></p>
</div>

<h2 id="Phương_thức_căn_chỉnh_cũ_hơn"><font><font>Phương thức căn chỉnh cũ hơn</font></font></h2>

<p><font><font>CSS theo truyền thống có khả năng liên kết rất hạn chế. </font><font>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")}}. </font><font>Việc căn chỉnh văn bản hiện được bao phủ bởi các </font><font>mô-đun </font><a href="https://www.w3.org/TR/css-text-3/"><font>Văn bản </font></a></font><a href="https://www.w3.org/TR/css-inline-3/"><font><font>Nội tuyến</font></font></a><font><font> và </font></font><a href="https://www.w3.org/TR/css-text-3/"><font><font>CSS</font></font></a><font><font> , 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.</font></font></p>

<p><font><font>Nếu ban đầu bạn học </font></font><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><font><font>Flexbox</font></font></a><font><font> 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. </font><font>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.</font></font></p>

<h2 id="Ví_dụ_cơ_bản"><font><font>Ví dụ cơ bản</font></font></h2>

<p><font><font>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 </font></font><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout"><font><font>Grid</font></font></a><font><font> và </font></font><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout"><font><font>Flexbox</font></font></a><font><font> .</font></font></p>

<h3 id="Ví_dụ_căn_chỉnh_bố_cục_lưới_CSS"><font><font>Ví dụ căn chỉnh bố cục lưới CSS</font></font></h3>

<p><font><font>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). </font><font>Không gian này được phân phối bằng {{cssxref ("justify-content")}}. </font><font>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")}}. </font><font>Mục đầu tiên ghi đè </font></font><code>align-items</code><font><font>giá trị được đặt trên nhóm bằng cách đặt {{cssxref ("align-self")}} thành </font></font><code>center</code><font><font>.</font></font></p>

<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-align-items.html", '100%', 500)}}</font></font></p>

<h3 id="Ví_dụ_liên_kết_Flexbox"><font><font>Ví dụ liên kết Flexbox</font></font></h3>

<p><font><font>Trong ví dụ này, ba mục flex được căn chỉnh trên trục chính sử dụng </font></font><code>justify-content</code><font><font>và trên Trục chéo sử dụng </font></font><code>align-items</code><font><font>. </font><font>Mục đầu tiên ghi đè </font></font><code>align-items</code><font><font>tập hợp trên nhóm bằng cách đặt </font></font><code>align-self</code><font><font>thành </font></font><code>center</code><font><font>.</font></font></p>

<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / flex-align-items.html", '100%', 500)}}</font></font></p>

<h2 id="Khái_niệm_và_thuật_ngữ_chính"><font><font>Khái niệm và thuật ngữ chính</font></font></h2>

<p><font><font>Đặ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ể. </font><font>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í.</font></font></p>

<h3 id="Mối_quan_hệ_với_chế_độ_viết"><font><font>Mối quan hệ với chế độ viết</font></font></h3>

<p><font><font>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. </font><font>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. </font><font>Đ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.</font></font></p>

<h3 id="Hai_kích_thước_căn_chỉnh"><font><font>Hai kích thước căn chỉnh</font></font></h3>

<p><font><font>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). </font><font>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. </font><font>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.</font></font></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png"><img alt="" src="https://mdn.mozillademos.org/files/15952/two-axes.png" style="height: 260px; width: 480px;"></p>

<p><font><font>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 </font></font><code>justify-</code><font><font>:</font></font></p>

<ul>
 <li><font><font>{{cssxref ("justify-items")}}</font></font></li>
 <li><font><font>{{cssxref ("biện minh")}}</font></font></li>
 <li><font><font>{{cssxref ("justify-content")}}</font></font></li>
</ul>

<p><font><font>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 </font></font><code>align-</code><font><font>:</font></font></p>

<ul>
 <li><font><font>{{cssxref ("align-items")}}</font></font></li>
 <li><font><font>{{cssxref ("căn chỉnh")}}</font></font></li>
 <li><font><font>{{cssxref ("căn chỉnh nội dung")}}</font></font></li>
</ul>

<p><font><font>Flexbox bổ sung thêm một biến chứng trong đó ở trên là đúng khi {{cssxref ("flex-direction")}} được đặt thành </font></font><code>row</code><font><font>. </font><font>Các thuộc tính được hoán đổi khi flexbox được đặt thành </font></font><code>column</code><font><font>. </font><font>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. </font><font>Các </font></font><code>justify-</code><font><font>thuộc tính luôn được sử dụng để căn chỉnh trên trục chính, các </font></font><code>align-</code><font><font>thuộc tính trên trục chéo.</font></font></p>

<h3 id="Chủ_thể_căn_chỉnh"><font><font>Chủ thể căn chỉnh</font></font></h3>

<p><font><font>Các </font></font><strong><font><font>chủ đề liên kết</font></font></strong><font><font> là điều đang được liên kết. </font><font>Đối với </font></font><code>justify-self</code><font><font>hoặc </font></font><code>align-self</code><font><font>, hoặc khi thiết lập các giá trị này dưới dạng một nhóm có </font></font><code>justify-items</code><font><font>hoặc </font></font><code>align-items</code><font><font>, đây sẽ là hộp lề của phần tử mà thuộc tính này đang được sử dụng. </font><font>Các </font><font>thuộc tính </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>khác nhau theo phương thức bố cục.</font></font></p>

<h3 id="Container_liên_kết"><font><font>Container liên kết</font></font></h3>

<p><font><font>Các </font></font><strong><font><font>thùng chứa liên kết</font></font></strong><font><font> là hộp đề tài này đã được liên kết bên trong. </font><font>Điều này thường sẽ là khối chứa của đối tượng căn chỉnh. </font><font>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.</font></font></p>

<p><font><font>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.</font></font></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p>

<h3 id="Căn_chỉnh_dự_phòng"><font><font>Căn chỉnh dự phòng</font></font></h3>

<p><font><font>Nếu bạn đặt căn chỉnh không thể hoàn thành, thì </font></font><strong><font><font>căn chỉnh dự phòng</font></font></strong><font><font> sẽ đi vào hoạt động và đối phó với không gian có sẵn. </font><font>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 đó.</font></font></p>

<h2 id="Các_loại_căn_chỉnh"><font><font>Các loại căn chỉnh</font></font></h2>

<p><font><font>Có ba loại căn chỉnh khác nhau mà chi tiết đặc điểm kỹ thuật; </font><font>các giá trị từ khóa này sử dụng.</font></font></p>

<ul>
 <li><strong><font><font>Căn chỉnh vị trí</font></font></strong><font><font> : 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ó.</font></font></li>
 <li><strong><font><font>Căn chỉnh đường cơ sở</font></font></strong><font><font> : 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.</font></font></li>
 <li><strong><font><font>Căn chỉnh phân phối</font></font></strong><font><font> : 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.</font></font></li>
</ul>

<h3 id="Giá_trị_từ_khóa_liên_kết_vị_trí"><font><font>Giá trị từ khóa liên kết vị trí</font></font></h3>

<p><font><font>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 </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>và còn cho sự liên kết tự với </font></font><code>justify-self</code><font><font>và </font></font><code>align-self</code><font><font>.</font></font></p>

<ul>
 <li><code>center</code></li>
 <li><code>start</code></li>
 <li><code>end</code></li>
 <li><code>self-start</code></li>
 <li><code>self-end</code></li>
 <li><code>flex-start</code><font><font> chỉ dành cho Flexbox</font></font></li>
 <li><code>flex-end</code><font><font> chỉ dành cho Flexbox</font></font></li>
 <li><code>left</code></li>
 <li><code>right</code></li>
</ul>

<p><font><font>Khác với các giá trị vật lý </font></font><code>left</code><font><font>và </font></font><code>right</code><font><font>, 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.</font></font></p>

<p><font><font>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 </font></font><code>justify-content</code><font><font>để </font></font><code>start</code><font><font>đ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. </font><font>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ự </font></font><code>start</code><font><font>sẽ 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.</font></font></p>

<p><font><font>Cả hai ví dụ này đều có </font></font><code>justify-content: start</code><font><font>, tuy nhiên vị trí bắt đầu thay đổi theo chế độ viết.</font></font></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15956/writing-mode-start.png" style="height: 101px; width: 478px;"></p>

<h3 id="Căn_chỉnh_căn_bản"><font><font>Căn chỉnh căn bản</font></font></h3>

<p><font><font>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. </font><font>Chúng có thể được sử dụng như giá trị cho sự liên kết nội dung với </font></font><code>justify-content</code><font><font>và </font></font><code>align-content</code><font><font>và còn cho sự liên kết tự với </font></font><code>justify-self</code><font><font>và </font></font><code>align-self</code><font><font>.</font></font></p>

<ul>
 <li><code>baseline</code></li>
 <li><code>first baseline</code></li>
 <li><code>last baseline</code></li>
</ul>

<p><font><font>Căn chỉnh nội dung đường cơ sở - chỉ định giá trị căn chỉnh căn bản cho </font></font><code>justify-content</code><font><font>hoặc </font></font><code>align-content</code><font><font>- 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. </font><font>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.</font></font></p>

<p><font><font>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. </font><font>Tự căn chỉnh là khi sử dụng </font></font><code>justify-self</code><font><font>hoặc </font></font><code>align-self</code><font><font>, hoặc khi đặt các giá trị này thành một nhóm có </font></font><code>justify-items</code><font><font>và </font></font><code>align-items</code><font><font>.</font></font></p>

<h3 id="Căn_chỉnh_phân_phối"><font><font>Căn chỉnh phân phối</font></font></h3>

<p><font><font>Các </font></font><strong><font><font>từ khóa liên kết phân tán</font></font></strong><font><font> được sử dụng với các </font><font>thuộc tính </font></font><code>align-content</code><font><font>và </font></font><code>justify-content</code><font><font>. </font><font>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ị. </font><font>Các giá trị như sau:</font></font></p>

<ul>
 <li><code>stretch</code></li>
 <li><code>space-between</code></li>
 <li><code>space-around</code></li>
 <li><code>space-evenly</code></li>
</ul>

<p><font><font>Ví dụ, trong các mục Flex Layout được căn chỉnh với </font></font><code>flex-start</code><font><font>ban đầu. </font><font>Làm việc ở chế độ viết ngang từ trên xuống dưới như tiếng Anh, </font></font><code>flex-direction</code><font><font>khi </font></font><code>row</code><font><font>cá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.</font></font></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15954/justify-content-start.png" style="height: 100px; width: 559px;"></p>

<p><font><font>Nếu bạn đặt </font></font><code>justify-content: space-between</code><font><font>trê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.</font></font></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15955/justify-content-space-between.png" style="height: 100px; width: 559px;"></p>

<p><font><font>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. </font><font>Không có không gian, không có gì để phân phối.</font></font></p>

<h2 id="Căn_chỉnh_tràn"><font><font>Căn chỉnh tràn</font></font></h2>

<p><font><font>Các </font><font>từ khóa </font></font><code>safe</code><font><font>và </font></font><code>unsafe</code><font><font>từ 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. </font><font>Các </font></font><code>safe</code><font><font>từ khóa sẽ sắp xếp để </font></font><code>start</code><font><font>trong 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 để.</font></font></p>

<p><font><font>Nếu bạn chỉ định </font></font><code>unsafe</code><font><font>sau đó 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.</font></font></p>

<h2 id="Khoảng_cách_giữa_các_hộp"><font><font>Khoảng cách giữa các hộp</font></font></h2>

<p><font><font>Các đặc điểm kỹ thuật liên kết hộp cũng bao gồm </font></font><code>gap</code><font><font>, </font></font><code>row-gap</code><font><font>và </font></font><code>column-gap</code><font><font>tài sản. </font><font>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.</font></font></p>

<p><font><font>Tài </font></font><code>gap</code><font><font>sản là một cách viết tắt </font></font><code>row-gap</code><font><font>và </font></font><code>column-gap</code><font><font>cho phép chúng tôi thiết lập các thuộc tính này cùng một lúc:</font></font></p>

<ul>
 <li><font><font>{{cssxref ("hàng-khoảng cách")}}</font></font></li>
 <li><font><font>{{cssxref ("khoảng trống cột")}}</font></font></li>
 <li><font><font>{{cssxref ("khoảng cách")}}</font></font></li>
</ul>

<p><font><font>Trong ví dụ dưới đây, bố cục lưới sử dụng </font></font><code>gap</code><font><font>viết tắt để đặt </font></font><code>10px</code><font><font>khoảng cách giữa các bản nhạc hàng và </font></font><code>2em</code><font><font>khoảng cách giữa các bản nhạc cột.</font></font></p>

<p><font><font>{{EmbedGHLiveSample ("css-example / box-alignment / overview / grid-gap.html", '100%', 500)}}</font></font></p>

<p><font><font>Trong ví dụ này, tôi đang sử dụng thuộc tính {{cssxref ("grid-gap")}} ngoài {{cssxref ("gap")}}. </font><font>Các thuộc tính khoảng trống ban đầu được bắt đầu bằng </font></font><code>grid-</code><font><font>đặ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.</font></font></p>

<ul>
 <li><font><font>{{cssxref ("lưới-hàng-khoảng cách")}}</font></font></li>
 <li><font><font>{{cssxref ("lưới-cột-khoảng trống")}}</font></font></li>
 <li><font><font>{{cssxref ("lưới-khoảng cách")}}</font></font></li>
</ul>

<p><font><font>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 </font></font><code>grid-gap</code><font><font>tính và sau đó thuộc </font></font><code>gap</code><font><font>tính có cùng giá trị.</font></font></p>

<p><font><font>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.</font></font></p>

<h2 id="Các_trang_chi_tiết_các_thuộc_tính_căn_chỉnh_riêng_lẻ"><font><font>Các trang chi tiết các thuộc tính căn chỉnh riêng lẻ</font></font></h2>

<p><font><font>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ó:</font></font></p>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox"><font><font>Sắp xếp hộp trong Flexbox</font></font></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout"><font><font>Sắp xếp hộp trong Bố cục lưới CSS</font></font></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout"><font><font>Căn chỉnh hộp trong bố cục nhiều cột</font></font></a></li>
 <li><a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables"><font><font>Sắp xếp hộp cho khối, bố trí hoàn toàn và bố cục bảng</font></font></a></li>
</ul>

<h2 id="Tài_liệu_tham_khảo"><font><font>Tài liệu tham khảo</font></font></h2>

<h3 id="Thuộc_tính_CSS"><font><font>Thuộc tính CSS</font></font></h3>

<div class="index">
<ul>
 <li><font><font>{{cssxref ("justify-content")}}</font></font></li>
 <li><font><font>{{cssxref ("căn chỉnh nội dung")}}</font></font></li>
 <li><font><font>{{cssxref ("vị trí nội dung")}}</font></font></li>
 <li><font><font>{{cssxref ("justify-items")}}</font></font></li>
 <li><font><font>{{cssxref ("align-items")}}</font></font></li>
 <li><font><font>{{cssxref ("địa điểm")}}</font></font></li>
 <li><font><font>{{cssxref ("biện minh")}}</font></font></li>
 <li><font><font>{{cssxref ("căn chỉnh")}}</font></font></li>
 <li><font><font>{{cssxref ("địa điểm")}}</font></font></li>
 <li><font><font>{{cssxref ("hàng-khoảng cách")}}</font></font></li>
 <li><font><font>{{cssxref ("khoảng trống cột")}}</font></font></li>
 <li><font><font>{{cssxref ("khoảng cách")}}</font></font></li>
</ul>
</div>

<h3 id="Thuật_ngữ"><font><font>Thuật ngữ</font></font></h3>

<div class="index">
<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis"><font><font>Trục chéo</font></font></a></li>
 <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis"><font><font>Trục chính</font></font></a></li>
 <li><a href="/en-US/docs/Glossary/Alignment_Container"><font><font>Container sắp xếp</font></font></a></li>
 <li><a href="/en-US/docs/Glossary/Alignment_Subject"><font><font>Chủ đề căn chỉnh</font></font></a></li>
 <li><a href="/en-US/docs/Glossary/Fallback_Alignment"><font><font>Căn chỉnh dự phòng</font></font></a></li>
</ul>
</div>

<h2 id="Hướng_dẫn"><font><font>Hướng dẫn</font></font></h2>

<ul>
 <li><font><font>Hướng dẫn CSS Flexbox: </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox"><font><font>Các khái niệm cơ bản của Flexbox</font></font></a></em></li>
 <li><font><font>Hướng dẫn Flexbox CSS: Sắp xếp </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container"><font><font>các mục trong một thùng chứa flex</font></font></a></em></li>
 <li><font><font>Hướng dẫn lưới CSS:  </font></font><em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout"><font><font>Sắp xếp hộp trong bố cục lưới CSS</font></font></a></em></li>
</ul>

<h2 id="Tài_nguyên_bên_ngoài"><font><font>Tài nguyên bên ngoài</font></font></h2>

<ul>
 <li><a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment"><font><font>Hộp liên kết cheatsheet</font></font></a></li>
 <li><a href="https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/"><font><font>CSS Grid, Flexbox và Box alignment</font></font></a></li>
 <li><a href="https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/"><font><font>Suy nghĩ về việc triển khai từng phần của căn chỉnh Hộp</font></font></a></li>
</ul>