Justify Self

    Auto

    Use to align an item based on the value of the grid’s justify-items property:

    Use justify-self-start to align a grid item to the start its inline axis:

    Justify Self - 图2

    1. <div class="grid justify-items-stretch ...">
    2.   <div class="justify-self-start ...">1</div>
    3.   <!-- ... -->
    4.   <!-- ... -->
    5.   <!-- ... -->
    6.   <!-- ... -->
    7. </div>

    Center

    Use justify-self-center to align a grid item along the center its inline axis:

    Use justify-self-end to align a grid item to the end its inline axis:

    2.   <!-- ... -->
    3.   <div class="justify-self-end ...">1</div>
    4.   <!-- ... -->
    5.   <!-- ... -->
    6.   <!-- ... -->
    7. </div>

    Stretch

    Use justify-self-stretch to stretch a grid item to fill the grid area on its inline axis:

    Justify Self - 图5

    To control the alignment of a grid item inside its grid area at a specific breakpoint, add a {screen}: prefix to any existing utility class. For example, use md:justify-self-end to apply the justify-self-end utility at only medium screen sizes and above.

    Customizing

    By default, only responsive variants are generated for justify-self utilities.

    You can control which variants are generated for the justify-self utilities by modifying the justifySelf property in the section of your tailwind.config.js file.

    For example, this config will also generate hover and focus variants:

    1.   // tailwind.config.js
    2.   module.exports = {
    3.     variants: {
    4.       extend: {
    5.         // ...
    6. +       justifySelf: ['hover', 'focus'],
    7.       }
    8.     }
    9.   }

    Disabling

    If you don’t plan to use the justify-self utilities in your project, you can disable them entirely by setting the justifySelf property to false in the section of your config file:

     Align Content→