scss Flexbox的

Posted 2021-05-18

// https://speakerdeck.com/goetter/flexrox

.parent {
  display: flex; // flex | inline-flex
  
  flex-direction: row; // row | row-reverse | column | column-reverse
  flex-wrap: wrap; // nowrap | wrap | wrap-reverse
  //flex-flow: <‘flex-direction’> || <‘flex-wrap’>

  justify-content: flex-start; // flex-start | flex-end | center | space-between | space-around
  align-items: flex-start; // flex-start | flex-end | center | baseline | stretch
  align-content: flex-start; // flex-start | flex-end | center | space-between | space-around | stretch
}

.child {
  order: 1; // go to last place -1; go to first place
  align-self: auto; // auto | flex-start | flex-end | center | baseline | stretch
  
  flex-grow: 0; // capacité de grandir...
  flex-shrink: 1; // capacité de réduire...
  flex-basis: 22px; // <length> | auto : taille de base
  // flex: <flex-grow> <flex-shrink> <flex-basis>;
  
  // flex: 1 -> prend tout l'espace dispo, si 2 ont flex:1 alors 50%, etc...
  
  margin: auto; // centre enfant ! marche dans toutes les directions
}