Skip to main content

Flex Basis

Version: 2.0.0
Edit

Utilities for setting the initial main size of a flex item using flex-basis.

Percentages

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-basis.scss#L11

Flex item
Flex basis 0
Flex item
Flex item
Flex basis 10%
Flex item
Flex item
Flex basis 20%
Flex item
Flex item
Flex basis 25%
Flex item
Flex item
Flex basis 30%
Flex item
Flex item
Flex basis 33%
Flex item
Flex item
Flex basis 40%
Flex item
Flex item
Flex basis 50%
Flex item
Flex item
Flex basis 60%
Flex item
Flex item
Flex basis 67%
Flex item
Flex item
Flex basis 70%
Flex item
Flex item
Flex basis 75%
Flex item
Flex item
Flex basis 80%
Flex item
Flex item
Flex basis 90%
Flex item
Flex item
Flex basis 100%
Flex item
<!-- flex basis zero -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-0">Flex basis 0</div>
  <div>Flex item</div>
</div>
<!-- flex basis 10% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-10">Flex basis 10%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 20% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-20">Flex basis 20%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 25% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-25">Flex basis 25%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 30% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-30">Flex basis 30%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 33% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-33">Flex basis 33%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 40% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-40">Flex basis 40%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 50% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-50">Flex basis 50%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 60% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-60">Flex basis 60%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 67% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-67">Flex basis 67%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 70% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-70">Flex basis 70%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 75% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-75">Flex basis 75%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 80% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-80">Flex basis 80%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 90% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-90">Flex basis 90%</div>
  <div>Flex item</div>
</div>
<!-- flex basis 100% -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-100">Flex basis 100%</div>
  <div>Flex item</div>
</div>

Auto

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-basis.scss#L181

Flex item
Flex basis auto
Flex item
<!-- flex basis auto -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-auto">Flex basis auto</div>
  <div>Flex item</div>
</div>

REM Units

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-basis.scss#L197

Flex item
Flex basis 9.25rem
Flex item
Flex item
Flex basis 11.25rem
Flex item
Flex item
Flex basis 13.5rem
Flex item
Flex item
Flex basis 17.5rem
Flex item
Flex item
Flex basis 20rem
Flex item
<!-- flex basis 9.25rem -->
<!-- 9.25rem = 148px -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-9-25rem">Flex basis 9.25rem</div>
  <div>Flex item</div>
</div>
<!-- flex basis 11.25rem -->
<!-- 11.25rem = 180px -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-11-25rem">Flex basis 11.25rem</div>
  <div>Flex item</div>
</div>
<!-- flex basis 13.5rem -->
<!-- 13.5rem = 216px -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-13-5rem">Flex basis 13.5rem</div>
  <div>Flex item</div>
</div>
<!-- flex basis 17.5rem -->
<!-- 17.5rem = 280px -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-17-5rem">Flex basis 17.5rem</div>
  <div>Flex item</div>
</div>
<!-- flex basis 20rem -->
<!-- 20rem = 320px -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-20rem">Flex basis 20rem</div>
  <div>Flex item</div>
</div>

Globals

Author: Mary Ditchen
Since: 2.0.0
Source: /source/patterns/utilities/flex-basis.scss#L261

Flex item
Flex basis inherit
Flex item
Flex item
Flex basis initial
Flex item
Flex item
Flex basis unset
Flex item
<!-- flex basis inherit -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-inherit">Flex basis inherit</div>
  <div>Flex item</div>
</div>
<!-- flex basis initial -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-initial">Flex basis initial</div>
  <div>Flex item</div>
</div>
<!-- flex basis unset -->
<div>
  <div>Flex item</div>
  <div class="u-flex-basis-unset">Flex basis unset</div>
  <div>Flex item</div>
</div>