@mixin flex-layout {
  .flexlayout {
    display: inline-flex;
  }

  // Align content
  .align-content-center {
    align-content: center;
  }
  .align-content-flex-end {
    align-content: flex-end;
  }
  .align-content-flex-start {
    align-content: flex-start;
  }
  .align-content-space-around {
    align-content: space-around;
  }
  .align-content-space-between {
    align-content: space-between;
  }
  .align-content-stretch {
    align-content: stretch;
  }

  // Align items
  .align-items-baseline {
    align-items: baseline;
  }
  .align-items-center {
    align-items: center;
  }
  .align-items-flex-end {
    align-items: flex-end;
  }
  .align-items-flex-start {
    align-items: flex-start;
  }
  .align-items-stretch   {
    align-items: stretch;
  }

  // Align self
  .align-self-baseline {
    align-self: baseline;
  }
  .align-self-center {
    align-self: center;
  }
  .align-self-flex-end {
    align-self: flex-end;
  }
  .align-self-flex-start {
    align-self: flex-start;
  }
  .align-self-stretch   {
    align-self: stretch;
  }

  // Justify content
  .justify-content-center {
    justify-content: center;
  }
  .justify-content-flex-end {
    justify-content: flex-end;
  }
  .justify-content-flex-start {
    justify-content: flex-start;
  }
  .justify-content-space-around {
    justify-content: space-around;
  }
  .justify-content-space-between {
    justify-content: space-between;
  }

  // Flex wrap
  .flex-nowrap {
    flex-wrap: nowrap;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  // Flex direction
  .column {
    flex-direction: column;
  }
  .column-reverse {
    flex-direction: column-reverse;
  }
  .row {
    flex-direction: row;
  }
  .row-reverse {
    flex-direction: row-reverse;
  }

  // Overflow
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-scroll {
    overflow: scroll;
  }
  .overflow-visible {
    overflow: visible;
  }

  // Position
  .position-absolute {
    position: absolute;
  }
  .position-fixed {
    position: fixed;
  }
  .position-static {
    position: static;
  }
  .position-sticky {
    position: sticky;
  }
  .position-relative {
    position: relative;
  }
  
  // Horizontal Layout
  .flex-horizontal {
  	display: flex;
    flex-direction: row;
  }
  
  .flex-vertical {
  	display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }

  // Spacing
  .flexlayout-spacing > * {
  	margin: 10px;
  }
  
  .flexlayout-spacing-left-right > * {
  	margin: 0px 10px 0px 10px;
  }
 
  .flexlayout-margin  {
  	margin: 10px;
  }
  
  .flexlayout-margin-left-right  {
  	margin: 0px 10px 0px 10px;
  }
}
