[CSS] Flexbox 개념과 적용

[CSS] Flexbox 개념 정리 (넘나 중요)

★flex (flexbox)

• 모던 웹을 위하여 제안된 CSS3의 새로운 layout 방식
• 요소의 사이즈가 불명확하거나, 변화할 때도유연하게 레이아웃을 설정 할 수 있음.
• container(부모)와 item(자식)으로 구성됨 => 부모 자식간의 종속관계에 유의
• 적용하고자 하는 요소(item)의 부모인 container에 스타일을 부여하는 방식

flex-direction

• flex 요소의 정렬 방향을 설정. 기준 축(Axis)에 따라 item의 정렬방향이 결정됨 (기본값 : row)\
  1. flex-direction : row => 행을 기준 축으로 정렬 (가로정렬)
  2. flex-direction : column => 열을 기준 축으로 정렬 (세로정렬)
  3. flex-direction : row-reverse => row 정렬의 역순
  4. flex-direction : column-reverse => column 정렬의 역순

justify-content

• felx-direction으로 설정된 기준축으로 정렬된 item의 간격을 설정

align-items

• felx-direction으로 설정된 기준축의 교차(수직) 축(Cross Axis)의 item 간격을 설정

flex

• 해당 flex 요소에서의 자리차지 비율 설정 ⇒ 1: 100% 자리차지, 2: 50%+50% 자리차지, …

★justify-content & align-items 공통 속성

• center : item들이 가운데에 우선 배치
• flex-start : (기본값) item을 앞에서부터 순서대로 정렬한다.
• flex-end : item을 끝에서부터 순서대로 정렬한다.