Align Self

    Utilities for controlling how an individual flex or grid item is positioned along its container’s cross axis.

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

    Start

    Use self-start to align an item to the start of the container’s cross axis, despite the container’s align-items value:

    1. <div class="flex items-stretch ...">
    2.   <div>01</div>
    3.   <div class="self-start ...">02</div>
    4.   <div>03</div>
    5. </div>

    Use to align an item along the center of the container’s cross axis, despite the container’s align-items value:

    Align Self - 图3

    End

    Use self-end to align an item to the end of the container’s cross axis, despite the container’s align-items value:

    1.   <div>01</div>
    2.   <div class="self-end ...">02</div>
    3.   <div>03</div>
    4. </div>

    Align Self - 图5

    Hover, focus, and other states

    Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:self-end to only apply the self-end utility on hover.

    1. <div class="self-auto hover:self-end">
    2.   <!-- ... -->
    3. </div>

    For a complete list of all available state modifiers, check out the documentation.

    You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:self-end to apply the self-end utility at only medium screen sizes and above.