Tidadigi Logo

Tailwind CSS Justify Content

Class này chấp nhận hai giá trị trong Tailwind CSS. Nó là một lựa chọn thay thế cho CSS justify-content property. Class này được dùng để mô tả sự căn chỉnh của container flexbox. Nó chứa khoảng trống giữa và xung quanh các mục nội dung trên trục chính. Về cơ bản nó được dùng để kiểm soát cách các mục flex và grid được định vị. Các mục này được định vị dọc theo trục chính của container.

Các class Justify Content:

  • justify-start
  • justify-end 
  • justify-center 
  • justify-between 
  • justify-around 
  • justify-evenly 

justify-start: Nó được dùng để căn chỉnh các mục flex từ đầu container.

Cú pháp:

<element class="justify-start">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-start flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content

justify-end: Nó được dùng để căn chỉnh các mục flex từ cuối container.

Cú pháp:

<element class="justify-end">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-end flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content

justify-center: Nó được dùng để căn chỉnh các mục flex từ giữa container.

Cú pháp:

<element class="justify-center">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-center flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content

justify-between: Các mục flex được đặt cách đều nhau, mục đầu tiên đẩy về đầu và mục cuối đẩy về cuối.

Cú pháp:

<element class="justify-between">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-between flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content

justify-around: Các mục flex được đặt cách đều nhau từ mỗi mục và từ các góc.

Cú pháp:

<element class="justify-around">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-around flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content

justify-evenly: Các mục được định vị với khoảng cách bằng nhau giữa chúng. Khoảng cách từ các góc là khác nhau.

Cú pháp:

<element class="justify-evenly">...</element>

Ví dụ:

HTML 
<!DOCTYPE html> 
<html>
  
<head> 
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" 
          rel="stylesheet"> 
</head> 

<body class="text-center"> 
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1> 
    <b>Tailwind CSS Justify Content Class</b> 
    <div id="main" class="flex justify-evenly flex-row"> 
        <div class="bg-green-700 w-24 h-12">1</div> 
        <div class="bg-green-600 w-24 h-12">2</div> 
        <div class="bg-green-500 w-24 h-12">3</div> 
        <div class="bg-green-400 w-24 h-12">4</div> 
    </div> 
</body> 

</html>

Đầu ra:

tailwind-css-justify-content
Last Updated : 20/07/2025