Skip to main content

Align Selfs

Version: 0.9.0
Edit

Overrides a grid or flex item's align-items property. (MDN web docs)

Basic

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

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

Flexbox

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

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

Baseline

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

Align Self Baseline
<!-- align self baseline -->
<div>
  <div class="u-align-self-baseline">Align Self Baseline</div>
</div>

Globals

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

Align Self Inherit
Align Self Initial
Align Self Unset
<!-- align self inherit -->
<div>
  <div class="u-align-self-inherit">Align Self Inherit</div>
</div>
<!-- align self initial -->
<div>
  <div class="u-align-self-initial">Align Self Initial</div>
</div>
<!-- align self unset -->
<div>
  <div class="u-align-self-unset">Align Self Unset</div>
</div>