justify-content

Ví dụ

Đầu (Start)

Sử dụng tiện ích justify-start để căn chỉnh các mục về phía đầu trục chính của container:

<div class="flex justify-start ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Giữa (Center)

Sử dụng các tiện ích justify-center hoặc justify-center-safe để căn chỉnh các mục dọc theo trung tâm trục chính của container:

<div class="flex justify-center ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

<div class="flex justify-center-safe ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>04</div></div>

Khi không có đủ không gian, tiện ích justify-center-safe sẽ căn chỉnh các mục về phía đầu của container thay vì ở giữa.

Cuối (End)

Sử dụng các tiện ích justify-end hoặc justify-end-safe để căn chỉnh các mục về phía cuối trục chính của container:

<div class="flex justify-end ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>03</div></div>

<div class="flex justify-end-safe ...">  <div>01</div>  <div>02</div>  <div>03</div>  <div>03</div></div>

Khi không có đủ không gian, tiện ích justify-end-safe sẽ căn chỉnh các mục về phía đầu của container thay vì phía cuối.

Khoảng cách giữa (Space between)

Sử dụng tiện ích justify-between để căn chỉnh các mục dọc theo trục chính của container sao cho có một khoảng cách bằng nhau giữa mỗi mục:

<div class="flex justify-between ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Khoảng cách xung quanh (Space around)

Sử dụng tiện ích justify-around để căn chỉnh các mục dọc theo trục chính của container sao cho có một khoảng cách bằng nhau ở mỗi bên của mỗi mục:

<div class="flex justify-around ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Khoảng cách đều (Space evenly)

Sử dụng tiện ích justify-evenly để căn chỉnh các mục dọc theo trục chính của container sao cho có một khoảng cách bằng nhau xung quanh mỗi mục, nhưng cũng tính đến việc gấp đôi khoảng cách mà bạn thường thấy giữa mỗi mục khi sử dụng justify-around:

<div class="flex justify-evenly ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Kéo dãn (Stretch)

Sử dụng tiện ích justify-stretch để cho phép các mục nội dung có kích thước tự động lấp đầy không gian có sẵn dọc theo trục chính của container:

<div class="grid grid-cols-[4rem_auto_4rem] justify-stretch ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Bình thường (Normal)

Sử dụng tiện ích justify-normal để đóng gói các mục nội dung ở vị trí mặc định của chúng như thể không có giá trị justify-content nào được thiết lập:

<div class="flex justify-normal ...">  <div>01</div>  <div>02</div>  <div>03</div></div>

Thiết kế responsive

Prefix a justify-content utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="flex justify-start md:justify-between ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.