Flexbox

Sass mixins

Mixin	CSS properties
flex	display: flex
inline-flex	display: inline-flex
flex-row	flex-direction: row
flex-col	flex-direction: column
f-row	Alias for flex-row
f-col	Alias for flex-col
flex-row-reverse	flex-direction: row-reverse
flex-col-reverse	flex-direction: column-reverse
flex-wrap	flex-wrap: wrap
flex-nowrap	flex-wrap: nowrap
flex-wrap-reverse	flex-wrap: wrap-reverse
grow	flex-grow: 1
no-grow	flex-grow: 0
shrink	flex-shrink: 1
no-shrink	flex-shrink: 0
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly
items-start	align-items: flex-start
items-end	align-items: flex-end
items-center	align-items: center
items-baseline	align-items: baseline
items-stretch	align-items: stretch
self-auto	align-self: auto
self-start	align-self: flex-start
self-end	align-self: flex-end
self-center	align-self: center
self-baseline	align-self: baseline
self-stretch	align-self: stretch
content-start	align-content: flex-start
content-end	align-content: flex-end
content-center	align-content: center
content-between	align-content: space-between
content-around	align-content: space-around
content-evenly	align-content: space-evenly

Utility classes

Flex Display

Class	Property
flex	display: flex
inline-flex	display: inline-flex

Flex Direction

Class	Property
flex-row, f-row	flex-direction: row
flex-col, f-col	flex-direction: column
flex-row-reverse, f-row-reverse	flex-direction: row-reverse
flex-col-reverse, f-col-reverse	flex-direction: column-reverse

Flex Wrap

Class	Property
flex-wrap	flex-wrap: wrap
flex-nowrap	flex-wrap: nowrap
flex-wrap-reverse	flex-wrap: wrap-reverse

Flex Grow and Shrink

Class	Property
grow	flex-grow: 1
no-grow, grow-0	flex-grow: 0
shrink	flex-shrink: 1
no-shrink, shrink-0	flex-shrink: 0

Justify Content

Class	Property
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly

Align Items

Class	Property
items-start	align-items: flex-start
items-end	align-items: flex-end
items-center	align-items: center
items-baseline	align-items: baseline
items-stretch	align-items: stretch

Align Self

Class	Property
self-auto	align-self: auto
self-start	align-self: flex-start
self-end	align-self: flex-end
self-center	align-self: center
self-baseline	align-self: baseline
self-stretch	align-self: stretch

Align Content

Class	Property
content-start	align-content: flex-start
content-end	align-content: flex-end
content-center	align-content: center
content-between	align-content: space-between
content-around	align-content: space-around
content-evenly	align-content: space-evenly

Flexbox examples

Sass mixins

<style lang="scss">
  @use "crayon-css" as crayon;

  .site-nav {
    @include crayon.flex;
    @include crayon.items-center;
    @include crayon.justify-between;
    @include crayon.p(4);

    .links {
      @include crayon.flex;
      @include crayon.gap(4);
    }
  }
</style>

Utility classes

<nav class="site-nav flex items-center justify-between p-4">
  <a href="/">Logo</a>
  <div class="links flex gap-4">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

Sass functions

<style lang="scss">
  @use "crayon-css" as crayon;

  .site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: crayon.size(4);

    .links {
      display: flex;
      gap: crayon.size(4);
    }
  }
</style>

CSS Variables

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--size-4);
}

.site-nav .links {
  display: flex;
  gap: var(--size-4);
}