CSS Flexbox

이충섭·2024년 1월 17일

Flexbox

Flexbox를 이용할 때 반드시 알아야 하는 것!

Flexbox의 구성
- flex-container : 정렬이 필요한 요소를 감싸는 요소 (부모)
- item: 정렬을 적용할 요소 (자식)
  (flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있음.)

Flexbox의 축
- 중심축
- 교차축, 반대축

dispay: flex;

item(내부요소)을 감싸는 요소의 형식을 flex 변경
-> item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역만큼의 크기만 가지게됨

flex-direction (부모 전용 속성)

: 메인축의 방향과 시작 위치를 지정하는 속성

행 방향 (가로, 기본값)
- flex-direction: row;

행 방향 (가로) + 순서 반대
- flex-direction: row-reverse;

열 방향 (세로)
- flex-direction: column;

열 방향 (세로) + 순서 반대
- flex-direction: column-reverse;

flex-wrap (부모 전용 속성)

: 내부 item들을 포장하는 속성 item들이 강제로 한줄에 배치되게 할지, 한줄을 벗어나 여러 줄로 배치할 것인지 지정

item을 한줄로 배치 (기본값)
- flex-wrap: nowrap

item을 여러줄로 배치
- flex-wrap: wrap;

item을 여러 줄로 배치(뒤에서 배치)
- flex-wrap: wrap-reverse;

justify-content

: 메인축 방향으로 item의 정렬 방법을 조정함

메인축 방향으로 앞에서부터 정렬 (기본값)
- justify-content: flex-start;

메인축 방향으로 뒤에 붙어서 정렬
- justify-content: flex-end;

메인축 방향으로 가운데 정렬
- justify-content: center;

메인축 방향으로 일정 간격으로 사이를 띄움(좌우 끝 제외)
- justify-content: space-around;

메인축 방향으로 일정 간격으로 사이를 띄움(좌우 끝 포함)
- justify-content: space-evenly;

메인축 방향으로 좌우 끝 제외 일정 간격으로 사이를 띄움
- justify-content: space-between;