====== CSS ======

===== Flex =====

Container/Parent options
<code css>
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;
</code>

Items/Children options
<code css>
order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
</code>
===== Useful classes =====
Responsive Boostrap like ''.component'' class.
<code css>.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;
  }
}</code>

===== SCSS helper classes =====
Generate list of ''.pt-n { padding-top: n rem; }''
<code css>
@mixin padding-top-list {
  @for $i from 1 through 10 {
    .pt-#{$i} {
      padding-top:#{$i}rem;
    }
  }
}

@include padding-top-list;</code>

===== References =====
  * [[https://css-tricks.com/snippets/css/a-guide-to-flexbox/|Flexbox]]