첫 번째로는

박스에 적용되는 속성 값들이 존재한다.

container 를 꾸며줄 수 있는 속성들로는

Item 을 꾸며줄 수 있는 속성들은

두번째로는 flex box에는 중심축과 반대축이 있다.

Item 들이 왼쪽에서 오른쪽으로 정렬되어 있다. 이때 중심축은 오른쪽 방향!

반대축은 아래 방향!

이번꺼는 Item들이 위에서 아래쪽으로 정렬되어 있다. 이때 중심축은 아래 방향!

반대축은 오른쪽 방향!

% vs viewport height(vh)

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body> <!--div.container>div.item.item${$}*10-->
    <div class="container">
      <div class="item item1">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4">4</div>
      <div class="item item5">5</div>
      <div class="item item6">6</div>
      <div class="item item7">7</div>
      <div class="item item8">8</div>
      <div class="item item9">9</div>
      <div class="item item10">10</div>
    </div>
  </body>
</html>

.container {
  background: beige;
  height 100%;
}

container가 들어있는 부모의 높이에 맞춰서 보여주겠다. 현재 container의 부모는
body.그리고 body의 부모는 html. 따라서 부모가 가지고 있는 높이에 맞춰진다.

.container {
  background: beige;
  height 100vh;
}

vh 는 부모의 높이와 상관없이 나는 다 쓸꺼야!

색깔을 보는 사이트!

https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=FF8A80