Container/Parent options

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction>  <flex-wrap>  /* shortcut */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;

Items/Children options

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;

Responsive Boostrap like .component class.

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
 
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
 
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
 
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Generate list of .pt-n { padding-top: n rem; }

@mixin padding-top-list {
  @for $i from 1 through 10 {
    .pt-#{$i} {
      padding-top:#{$i}rem;
    }
  }
}
 
@include padding-top-list;

• Flexbox