OCDE - Pattern Library v1.13.0

Flex 

<!-- Default -->
l-flex


<!-- Space 0 P 5 X -->
l-flex-space0p5x


<!-- Space 1 X -->
l-flex-space1x


<!-- Space 1 P 5 X -->
l-flex-space1p5x


<!-- Space 2 X -->
l-flex-space2x


<!-- Space 2 P 5 X -->
l-flex-space2p5x


<!-- Space 3 X -->
l-flex-space3x


<!-- Space 3 P 5 X -->
l-flex-space3p5x


<!-- Align Center -->
l-flex-aligncenter


<!-- Align End -->
l-flex-alignend


<!-- Align Stretch -->
l-flex-alignstretch


<!-- Column -->
l-flex-column


<!-- Justify Around -->
l-flex-justifyaround


<!-- Justify Between -->
l-flex-justifybetween


<!-- Justify Center -->
l-flex-justifycenter


<!-- Justify End -->
l-flex-justifyend


<!-- Column + Space 1x + Align Center (Example) -->
l-flex-column l-flex-space1x l-flex-aligncenter


{{^modifier}}l-flex{{/modifier}}{{modifier}}
 
/* Default */
{
  "modifier": "l-flex"
}


/* Space 0 P 5 X */
{
  "modifier": "l-flex-space0p5x"
}


/* Space 1 X */
{
  "modifier": "l-flex-space1x"
}


/* Space 1 P 5 X */
{
  "modifier": "l-flex-space1p5x"
}


/* Space 2 X */
{
  "modifier": "l-flex-space2x"
}


/* Space 2 P 5 X */
{
  "modifier": "l-flex-space2p5x"
}


/* Space 3 X */
{
  "modifier": "l-flex-space3x"
}


/* Space 3 P 5 X */
{
  "modifier": "l-flex-space3p5x"
}


/* Align Center */
{
  "modifier": "l-flex-aligncenter"
}


/* Align End */
{
  "modifier": "l-flex-alignend"
}


/* Align Stretch */
{
  "modifier": "l-flex-alignstretch"
}


/* Column */
{
  "modifier": "l-flex-column"
}


/* Justify Around */
{
  "modifier": "l-flex-justifyaround"
}


/* Justify Between */
{
  "modifier": "l-flex-justifybetween"
}


/* Justify Center */
{
  "modifier": "l-flex-justifycenter"
}


/* Justify End */
{
  "modifier": "l-flex-justifyend"
}


/* Column + Space 1x + Align Center (Example) */
{
  "modifier": "l-flex-column l-flex-space1x l-flex-aligncenter"
}
  • Content: 
    .l-flex {
  align-items: flex-start;
  display: flex;

  .l-flex-x-grow {
    flex-grow: 1;
  }

  .l-flex-x-shrink {
    flex-shrink: 1;
  }

  .l-flex-x-auto {
    flex: 0 0 auto;
  }

}

// Space Children

@each $name, $value in $utility-gridsubmodules {

  .l-flex-space#{$name} {

    > *:not(:last-child) {
      margin-right: $gridspacing * $value;
    }

  }

  .l-flex-space#{$name}.l-flex-column {

    > *:not(:last-child) {
      margin-bottom: $gridspacing * $value;
      margin-right: 0;
    }

  }

}

// Alignment

.l-flex-aligncenter {
  align-items: center;
}

.l-flex-alignend {
  align-items: flex-end;
}

.l-flex-alignstretch {
  align-items: stretch;
}

// Column

.l-flex-column {
  flex-direction: column;
}

// Justification

.l-flex-justifyaround {
  justify-content: space-around;
}

.l-flex-justifybetween {
  justify-content: space-between;
}

.l-flex-justifycenter {
  justify-content: center;
}

.l-flex-justifyend {
  justify-content: flex-end;
}
  • URL: /components/raw/l-flex/_l-flex.scss
  • Filesystem Path: src/scss/03-layouts/l-flex/_l-flex.scss
  • Size: 980 Bytes

No notes defined.