📘 float

• 초기 목적은 이미지와 텍스트들을 어떻게 배치할지 정의하기 위해 나옴. 예를들어 float: left 는 이미지를 왼쪽 위에 두고, 텍스트를 감싸는 목적으로 만든거고, float: center 는 이미지를 가운데 두고, 텍스트를 감싸는 목적으로 만든거였음. 그러나 초기에는 css에 레이아웃을 할 수 있는 기능이 없다보니 float 을 이용했었음. 그러나 float 의 생성 목적에 어긋나는 사용이였음. 현재는 flexbox 의 등장으로 float 은 원래 용도로 쓰이는 중

📘 Flexbox

1️⃣ flexbox는 container에 적용하는 속성값들과 item들에 적용하는 속성값들이 따로 존재함

📖 container 에 들어가는 속성값

• display : display: flex 를 부모 요소에 주면 자식요소들 적용됨
• flex-direction : 배열 방향을 정함. row , row-reverse , column , column-reverse 가 있음
• flex-wrap : 아이템들이 많아질때 정렬 방법을 설정. 기본값은 nowrap. wrap 으로 바꾸게 되면 아이템들이 꽉 차면 다음 라인으로 넘어감
• flex-flow : flex-direction 과 flex-wrap 를 합친 것
• justify-content : 아이템들을 어떻게 배치할건지
  • flex-start : 앞쪽이 딱 붙어서 시작
  • flex-end : 뒤쪽이 딱 붙게 끝남
  • center : 가운데에 둠
  • space-around : 한 요소에 일정한 간격을 줌. 두 간격이 곂치는 곳은 좀더 두꺼워짐
  • space-evenly : 모든 간격이 동일해짐
  • space-between : 맨앞 맨뒤는 끝에 붙이고 간격을 일정하게 함
• align-items : 반대축에서 배열을 배치
  • center : 반대축에서 아이템을 가운데 배치
  • baseline : 한놈에 패딩이 있어서 위치가 균등하지 않을 때 사용
• align-content : 반대축에서 아이템을 배치

📖 item 에 들어가는 속성값

• order : 순서 변경(현업에선 거의 안씀)
• flex-grow : 기본값은 0. 한줄에 있는 요소들에게 숫자를 부여하면 그 비율대로 창을 늘렸을때 커짐
• flex-shrink : 기본값은 0. 컨테이너가 점점 작아질때 어떻게 행동할 지. 한줄에 있는 요소들에게 숫자를 부여하면 그 비율대로 창이 줄어들때 더욱 줄어듬(2:1:1을 주면 2를 준놈이 2배 빨리 줄어듬)
• flex-basis : 기본값은 auto. 아이템들이 공간을 어떻게 차지하고 있어야하는지 세부적으로 명시할 수 있게 도와줌. 30%, 20%, 50% 이런식으로 세 요소에 주면 창이 늘어나든 줄어들든 항상 저 비율을 유지함
• align-self : 아이템 별로 정렬 가능. 컨테이너에 지정된 것을 벗어나서 아이템 하나만 특별이 배치하고 싶을 때 사용

2️⃣ flexbox에는 중심축과 반대축 개념이 있다

• 수평축이 메인축(main axis)이 된다면 수직축은 반대축(cross axis)이되고, 수직축이 메인축이 된다면 수평축은 반대축이 됨
• 아이템들이 정렬되어가는 곳이 메인축이다