[JS] web기초 Flex Box

1. 예전의 방식 Float

   1. float : left
      1. 이미지를 왼쪽에 두고 이미지의 옆에 글이 자연스레 오도록 한다.
   2. float : center
      1. 이미지를 가운데 두고 이미지의 양옆에 글이 자연스레 오도록 한다.
   3. float : right
      1. 이미지를 오른쪽에 두고 이미지의 옆에 글이 자연스레 오도록 한다.

2. 클래스를 만들때에 팁

   1. div.container>div.item.item$ {$} * 4 

<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> // 이런식으로 만들어진다

1. Flex box

   1. Container 속성
      1. container 안에서 100vh를 쓰면 보이는 전체를 지정하는것
         1. 만약 vh를 안쓰고 %를 쓴다면 container의 부모인 body 부모인 html까지 값을 100%로 해줘야 지정이된다 따라서 vh만 쓰면 부모신경을 안써도되겠다.
      2. 플렉스 박스는 플렉스 디렉션에 따라 중심축과 반대축이 바뀌게 되는데 플렉스 박스의 방향이 가로축이면 중심축(main axis)은 가로축이 되고 반대축(cross axis)은 수직축이 된다.
      3. flex-wrap
         1. nowrap(default) : 화면이 작아져도 다음 라인으로 옮겨가지 않는다
         2. wrap : 화면이 작아지면 다음라인으로 이동
      4. border(바깥 테두리) : ( 1px solid black) ( 크기 타입 색) 순으로 쓰면 복잡하게 안쓸수있다
      5. justify-content = 아이템들의 배치를 결정한다(중심축기준)
         1. space around : 각각 같은여백을 가진다 (여백이 겹치는 부분은 좀 넓어짐 )
         2. space evenly : 각각 같은 여백을 가진다(여백이 겹치는 부분상관없이 똑같아짐)
         3. space beetween : 중간에서 양끝으로 나눔
      6. align-items : 반대축을 기준으로 한다.
         1. center 중앙배치
         2. baseline 텍스트 기준으로 일자정렬
      7. align-content : 반대축을 기준으로 한다 (2줄이상에서 쓰임)
         1. space-beetween : 반대축을 기준으로 위아래 사이공간만듬
         2. center : 위아래있는 줄들을 가운데로 모아준다
   2. Item 속성
      1. order : 아이템에 순서를 지정한다
      2. flex-grow : 아이템이 지정해준 비율에 따라 창크기에 맞게 늘어나거나 줄어든다
      3. flex-shrink : 1을 주면 똑같이 줄어들고 만약 2를 주면 2배만큼 더 작아진다 (만약 창크기가 줄어들경우)
      4. flex-basis : 기본값(auto), 60%를 주면 항상 60%를 차지한다 (다른아이템에 비해서)
      5. align-self : center (하나의 아이템만 지정해 이동가능하다)