📌 Flexbox

• flexbox는 정렬하고 싶은 것들의 부모에다가 써서 마법을 부림

🌜 Flexbox 용어

• flex box는 1차원 공간에서의 직선 정렬
• 부모와 자식관계에서만 flex 적용가능
• flex container : 아이템들을 감싸는 부모영역
• flex item : 내부에 정렬을 위해 담아놓은 아이템들
• main axis : 주축, 가로로 흐르며 왼쪽에서 오른쪽
• cross axis : 교차축, 세로로 흐르며 위쪽에서 아래쪽

📌 Flexbox - container에 사용하는 속성

🌜 display: flex

• 요소의 앞뒤에 있는 다른 요소들과 관계를 뜻하는게 아니라 이 요소 내부에 있는 아이템들을 1차원으로 정렬을 할 때 사용
• display는 요소의 내부와 외부 디스플레이 유형 설정
• 무조건 container 에다가 설정하는 것
• 외부 - 플로우 레이아웃에 요소가 참여하는 방법, block, inline
  내부 - 자식의 레이아웃 방식 설정, flex, grid
• 외부, 내부 동시에 나타내려면

display: inline-flex
/*대쉬로 연결해서 표현*/

🌜 flex-direction

• container에 적용하는 속성
• 아이템을 주축 및 방향(정방향, 역방향) 배치
• row(기본값) : 왼쪽에서 오른쪽
• row-reverse : 오른쪽에서 왼쪽
• column : 위쪽에서 아래쪽
• column-reverse : 아래쪽에서 위쪽

🌜 flex-wrap

• container에 사용하는 속성
• 요소를 강제로 한줄에 배치할 것인지(기본값), 여러행으로 나누어 배치할 것인지 결정하는 속성
• flexbox의 기본 속성 : 일차원 정렬이라 한 줄에 전부다 모든 아이템 들어가도록, 부모를 줄이면 아이템도 유연하게 줄어듬
• nowrap(기본값) : 한줄에 배치
• wrap : 여러 행에 걸쳐서 배치, 시작점은 flex-direction에 의해 결정, 자기의 원래 크기를 잃지 않기 위해 wrapping을 한다 라고 외우기
• warp-reverse : 여러 행에 걸쳐서 배치, 시작점과 끝점이 반대로 배치

🌜 flex-flow

• flex-direction, flex-wrap 속성의 단축속성
• 두개 나열해서 쓰면 됨

flex-direction: column;
flex-wrap: wrap;

flex-flow: column wrap;

🌜 justify-content

• container에 설정할 수 있는 속성
• 주축을 기준으로 아이템을 어떻게 정렬할 지 설정
• 주축에 관한 정렬 정의
  flex-start : 주축이 시작되는 위치에서 정렬
  flex-end : 주축이 끝나는 위치에서 정렬
  center : 주축을 기준으로 가운데 정렬
  space-between : 동일한 간격을 두고 자리를 잡고 flex-start와 flew-end에 첫번째,마지막번째 요소가 자리잡음
  space-around : 각각 요소 양옆으로 동일한 여백을 추가, 첫번째요소 마지막번째 요소도 마찬가지

🌜 align-items

• container에 사용하는 속성
• 교차축에 관한 정렬 정의 (한줄일 떄)
  stretch(기본값) : block요소처럼 위에서 끝까지 전부 다 차지
  flex-start : 연두색이 교차축의 시작점에 정렬
  flex-end : 연두색이 교차축의 끝지점에 정렬
  center : 연두색이 교차축의 가운데 정렬

  align-items은 전체 container 중에서 연두색을 어디다가 배치할지
  justify-content는 연두색안에서 item을 어떻게 정렬할지

🌜 align-content

• 교차축에 관한 정렬 정의 (여러줄일 떄 =warp인 경우)
• flex-start : 교차축의 시작점에 쫘르륵 달라붙게 됨
  flex-end : 교차축의 끝지점에 쫘르륵 달라붙게 됨
  center : 교차축의 가운데 정렬
  space-between : 가운데 동일한 간격을 가지고 흩뿌려짐
  space-around : 줄 위아래로 간격 동일하게 정렬

📌 Flexbox - item에 사용하는 속성

🌜 order

• flex item에 사용하는 속성 (부모에 무조건 flex가 설정되어 있어야함)
• flex or grid container 안에서 현재 요소의 배치 순서를 지정
• 코드 순서대로 배치되어 있지만 html 말고 css만으로도 단일 아이템의 순서를 바꿀 수 있음
• 기본값 0
• 정수 사용
• 오름차순으로 작은게 앞으로가고 큰수가 뒤로 감
• 같은 값인 경우 소스코드 순서대로 정렬

🌜 flex-grow

• 요소 내부에서 할당 가능한 공간의 정도를 선언
• 요소가 본인의 크기보다 더 많은 자리, 더 적은 자리를 차지할 수 있게함
• flex-container 요소의 크기가 flex-item 요소의 크기보다 클 때 사용
• 기본값 0
• 0 : 더 이상 늘어나지 않겠다
• 음수값을 제외한 숫자 사용
• 지정한 숫자만큼의 비율로 서로 나눠가짐
• 같은 숫자로하면 1:1:1로 한 줄에서 남은 공간을 자기들끼리 나눠가짐
• 동적인 메뉴바, 네비게이션에 활용하기 좋음

🌜 flex-shrink

• flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 사용
• 아이템들이 컨테이너보다 커서 컨테이너 안에 들어갈 수 없는 상황
• 기본값 1 : 이미 1:1:1로 shrink 값을 가지고 있음(grow는 0이 기본값)
• 음수값을 제외한 숫자
• 0 : 더 이상 줄어들지 않겠다, 나머지 애들이 줄어든 크기를 나눠가져서 평소보다 더 많이 줄어듬
• 줄어든 영역을 나눠가짐

🌜 flex-basis

• flex item의 초기 크기 지정
• shrink, grow도 되지 않았을 때 기본영역
• flex item에 width값을 지정하지 않으면 자기가 차지하고 있는 컨텐츠 크기만큼만 최소너비 갖게됨
• 가로비율을 grow랑 동일하게 맞추고 싶다면 -> width값을 동일하게 설정하거나, flex-basis값 동일하게 설정하거나 flex-basis:0;
  0으로 설정하면 기본크기가 없기때문에 나머지 동일한 비율로 나눠가지면 grow랑 동일하게 맞춰짐

🌜 flex (shorthand)

• 단축속성
• flex item에 적용하는 속성
• flex item이 자신이 container가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성
• 한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, flex-basis값은 auto가 아니라 0이 됨

🌜 align-self

• item에 사용하는 속성
• 별도로 작성하지 않으면 align-items 값을 그대로 갖다씀
• align-items랑 사용할 수 있는 키워드 다 똑같음, 개별로 적용하고 싶을 때 사용