<h2>Flex align examples</h2>
<div class="container-a">
  <div class="box anchor-top anchor-left">
    TOP LEFT
  </div>
  <div class="box anchor-top anchor-center-hor">
    TOP CENTER
  </div>
  <div class="box anchor-top anchor-right">
    TOP RIGHT
  </div>
  <div class="box anchor-center anchor-left">
    CENTER LEFT
  </div>
  <div class="box anchor-center anchor-center-hor">
    CENTER CENTER
  </div>
  <div class="box anchor-center anchor-right">
    CENTER RIGHT
  </div>
  <div class="box anchor-bottom anchor-left">
    BOTTOM LEFT
  </div>
  <div class="box anchor-bottom anchor-center-hor">
    BOTTOM CENTER
  </div>
  <div class="box anchor-bottom anchor-right">
    BOTTOM RIGHT
  </div>
</div>
<h2>Flex grow examples</h2>
<p>As you can see the boxes will grow different because they have different flex-grow properties</p>
<div class="container-b">
  <div class="box-1">
    FLEX-GROW: 1
  </div>
  <div class="box-2">
    FLEX-GROW: 2
  </div>
  <div class="box-3">
    FLEX-GROW: 3
  </div>
</div>

<h2>Flex shrink examples</h2>
<p>The boxes will keep the minimum size according to their contents:</p>
<div class="container-c">
  <div class="box-4">
    FLEX-SHRINK: 1 - LOREM
  </div>
  <div class="box-5">
    FLEX-SHRINK: 2 - LOREM IPSUM
  </div>
  <div class="box-6">
    FLEX-SHRINK: 3 - LOREM IPSUM DOLOR
  </div>
</div>

<h2>Flex wrap examples</h2>
<p>With $wrap: wrap; the container will force the content to a new line if the container size is less than its content:</p>
<div class="container-d">
  <div class="box-7">
    Lorem ipsum dolor sit amet
  </div>
  <div class="box-7">
    Lorem ipsum dolor sit amet
  </div>
</div>
<p>Else, with $wrap: nowrap; the container will force the content to the same line:</p>
<div class="container-e">
  <div class="box-7">
    Lorem ipsum dolor sit amet
  </div>
  <div class="box-7">
    Lorem ipsum dolor sit amet
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:300,400,700&display=swap');
/**
* FLEXBOX
* A mixin to rule complex flexbox layout
* @author nicolacastellanidev@gmail.com
*/
@mixin flexbox(
  $display: flex,
  $direction: row,
  $placeContent: null,
  $placeItems: null,
  $wrap: nowrap,
  $shrink: 1,
  $grow: 0,
  $alignContent: null,
  $justifyContent: null,
  $alignItems: null,
  $justifyItems: null) {

    display: $display;
    flex-direction: $direction;
    
    @if $placeContent == null {
      @if $alignContent   { align-content: $alignContent; }
      @if $justifyContent { justify-content: $justifyContent; }
    } @else {
      place-content: $placeContent;
    }
    
    @if $placeItems == null {
      @if $alignItems   { align-items: $alignItems; }
      @if $justifyItems { justify-items: $justifyItems; }
    } @else {
      place-items: $placeItems;
    }

    flex-wrap: $wrap;
    flex-shrink: $shrink;
    flex-grow: $grow;
}

html, body {
  width:       100%;
  height:      100%;
  padding:     0;
  margin:      0;
  background:  #4a4a4a;
  color:       lawngreen;
  font-family: 'Roboto Mono', monospace;
  overflow:    auto;
  zoom: .75;
  @include flexbox($placeContent: flex-start, $placeItems: center, $direction: column);
  
  .container-a {
    display:               grid;
    grid-template-columns: repeat(3, 10rem);
    grid-template-rows:    repeat(3, 10rem);
    grid-row-gap:          1rem;
    grid-column-gap:       1rem;
  }
  
  .container-b,
  .container-c {
    padding: 1rem;
    border: 1px solid lawngreen;
    width: 50vw;
    @include flexbox($placeContent: center, $placeItems: center);
  }
  
  .container-d {
    padding: 1rem;
    border: 1px solid lawngreen;
    width: 5rem;
    @include flexbox($placeContent: center, $placeItems: cente, $wrap: wrap);
  }
  
  .container-e {
    padding: 1rem;
    border: 1px solid lawngreen;
    width: 5rem;
    @include flexbox($placeContent: center, $placeItems: cente, $wrap: nowrap);
  }
  
  .box {
    width:  10rem;
    height: 10rem;
    border: 2px solid lawngreen;
  }
  
  .anchor-top {
    @include flexbox($placeItems: flex-start);
  }

  .anchor-bottom {
    @include flexbox($placeItems: flex-end);
  }

  .anchor-center {
    @include flexbox($placeItems: center);
  }

  .anchor-left {
    @include flexbox($placeContent: flex-start);
  }

  .anchor-right {
    @include flexbox($placeContent: flex-end);
  }

  .anchor-center-hor {
    @include flexbox($placeContent: center);
  }

  .box-1 {
    background: red;
    @include flexbox($placeContent: center, $placeItems: center, $grow: 1);
  }

  .box-2 {
    background: blue;
    @include flexbox($placeContent: center, $placeItems: center, $grow: 2);
  }
  
  .box-3 {
    background: orange;
    @include flexbox($placeContent: center, $placeItems: center, $grow: 3);
  }
  
  .box-4 {
    background: red;
    @include flexbox($placeContent: center, $placeItems: center, $shrink: 1);
  }

  .box-5 {
    background: blue;
    @include flexbox($placeContent: center, $placeItems: center, $shrink: 2);
  }
  
  .box-6 {
    background: orange;
    @include flexbox($placeContent: center, $placeItems: center, $shrink: 3);
  }
  
  .box-6 {
    background: red;
    @include flexbox($placeContent: center, $placeItems: center, $shrink: 1, $wrap: wrap);
  }
  
  .box-7 {
    background: red;
    @include flexbox($placeContent: center, $placeItems: center, $wrap: wrap);
    
    & + .box-7 {
      margin-top: 1rem;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.