Skip to main content

Align Items

Version: 0.9.0
Edit

Sets the align-self value on all flex/grid items as a group. (MDN web docs)

Basic

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-items.scss#L11

Align Items Center
Align Items Start
Align Items End
Align Items Stretch
<!-- align items center -->
<div class="u-align-items-center">Align Items Center</div>
<!-- align items start -->
<div class="u-align-items-start">Align Items Start</div>
<!-- align items end -->
<div class="u-align-items-end">Align Items End</div>
<!-- align items stretch -->
<div class="u-align-items-stretch">Align Items Stretch</div>

Flexbox

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-items.scss#L50

Align Items Flex-Start
Align Items Flex-End
<!-- align items flex start -->
<div class="u-align-items-flex-start">Align Items Flex-Start</div>
<!-- align items flex end -->
<div class="u-align-items-flex-end">Align Items Flex-End</div>

Baseline

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-items.scss#L69

Align Items Baseline
<!-- align items baseline -->
<div class="u-align-items-baseline">Align Items Baseline</div>

Globals

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/utilities/align-items.scss#L81

Align Items
Align Items Initial
Align Items Unset
<!-- align items inherit -->
<div class="u-align-items-inherit">Align Items </div>
<!-- align items initial -->
<div class="u-align-items-initial">Align Items Initial</div>
<!-- align items unset -->
<div class="u-align-items-unset">Align Items Unset</div>