Align Self
Controls the positioning of a single flex or grid element along the transverse axis of its container.
Class | Properties |
---|---|
as-auto | align-self: auto; |
as-b | align-self: baseline; |
as-c | align-self: center; |
as-fe | align-self: flex-end; |
as-fs | align-self: flex-start; |
as-s | align-self: stretch; |
Auto
This example sets the align self to auto. The item will use the default alignment based on the container’s alignment properties.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-auto bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Baseline
This example sets the align self to baseline. The item will be aligned along the baseline of the container.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-b bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Center
This example sets the align self to center. The item will be centered within its container.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-c bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Flex-End
This example sets the align self to flex-end. The item will be aligned to the end of its container.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-fe bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Flex-Start
This example sets the align self to flex-start. The item will be aligned to the start of its container.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-fs bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Stretch
This example sets the align self to stretch. The item will stretch to fill its container along the cross axis.
<div class="tc-white"> <div class="d-f g-4 h-24 rad-1 stripes w-full"> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">A</div> <div class="ai-c as-s bg-indigo d-f f-1 jc-c p-4 rad-1">B</div> <div class="ai-c bg-d-indigo-4 d-f f-1 jc-c p-4 rad-1">C</div> </div></div>
Conditional styles
Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.
You can combine responsive breakpoints like sm:as-*
,md:as-*
, lg:as-*
, and xxl:as-*
allows targeting specific utilities in different viewports.
<div class="as-s md:as-e ..."></div>
Alternatively, you can apply :hover
by using h:as-*
utility to override elements and change their values when hovering over them.
<div class="as-s h:as-e ..."></div>