Tidadigi Logo

Tailwind CSS Justify Self

Class này chấp nhận hai giá trị trong Tailwind CSS. Các thuộc tính khác nhau được đề cập trong class form. Nó là một lựa chọn thay thế cho CSS justify-self property. Class này dùng để chỉ định sự căn chỉnh vị trí nội dung dọc theo trục phù hợp trong CSS Grid.

Justify self class options:

  • justify-self-auto 
  • justify-self-start 
  • justify-self-end 
  • justify-self-center 
  • justify-self-stretch 

justify-self-auto:

Đây là giá trị dùng để căn chỉnh một item dựa trên giá trị của class justify-items của grid.

Syntax:

<element class="justify-self-auto">...</element>

Example:

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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-auto bg-green-500 rounded-lg m-4 h-12">
          1
        </div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-self

justify-self-start:

Nó cho phép nội dung tự căn chỉnh về phía bên trái của ô.

Syntax:

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

Example:

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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-start 
            bg-green-500 rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-self

justify-self-end:

Nó cho phép nội dung tự căn chỉnh về phía bên phải của ô.

Syntax:

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

Example:

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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-end bg-green-500 
            rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-self

justify-self-center:

Nó cho phép nội dung tự căn chỉnh vào giữa của ô.

Syntax:

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

Example:

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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-center bg-green-500 
            rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div> 
</body> 

</html>

Output:

tailwind-css-justify-self

justify-self-stretch:

Đây là giá trị mặc định của thuộc tính này. Nó làm cho nội dung lấp đầy toàn bộ chiều rộng của ô.

Syntax:

<element class="justify-self-stretch">...</element>

Example:

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 Self Class</b> 
    <div id="main" class="grid justify-items-stretch grid-cols-2"> 
        <div class="justify-self-stretch bg-green-500 
            rounded-lg m-4 h-12">1</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">2</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">3</div> 
        <div class="bg-green-500 rounded-lg m-4 h-12">4</div>
    </div> 
</body> 

</html>

Output:

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