Flexbox 바로 알기(2) - main axis와 cross axis 상에서 요소 위치 결정하기 :: justify-content, align-items, flex-direction

Flexbox의 Main axis와 Cross axis

flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 자식 요소의 위치 속성을 제어한다.

 

이때 default로 주축은 수평 방향, 교차축은 수직 방향을 나타내며, 각 방향에 따라 적용되는 위치 속성값이 달라진다.

• 주축에 있는 item에 적용되는 속성: justify-content
• 교차축에 있는 item에 적용되는 속성: align-items

 

justify-content

main-axis(주축, default: horizontal)상에 있는 자식 요소들의 위치를 변경하는 flex 속성

 

대표적인 property values

justify-content: center;
: 주축 기준 중앙정렬

justify-content: center;

justify-content: space-between;
: 화면 끝과 끝을 기준으로 box 사이 간격을 동일하게

justify-content: space-between;

justify-content: space-around;
: 양 사이드를 포함하여 box 사이 간격을 동일하게

justify-content: space-around;

align-items

cross-axis(교차축, default: vertical)상에 있는 자식 요소들의 위치를 변경하는 flex 속성

 

이때, 수직선 상에서 요소들을 움직이려면 flex container의 height를 충분히 설정해줌으로써 자식 요소가 움직일 공간을 할당해주어야 한다.

 

대표적인 property values

align-items: flex-start | start;
: 교차축 맨 위에 정렬

align-items: center;
: 교차축 기준 중앙정렬

align-items: center;

align-items: flex-end | end;
: 교차축 맨 아래에 정렬

align-items: stretch;
: box(자식 요소)의 높이를 설정해주지 않았을 경우 flex container(부모 요소)의 전체 높이만큼 늘어나서 채워진다.

align-items: stretch;

 

flex-direction: column | row | reverse;

주축과 교차축 (수평/수직)을 바꿔주려면 `flex-direction`을 수정하자!

어떤 속성값으로 수정하느냐에 따라 `justify-content`와 `align-items`가 적용되는 양상이 달라진다.

 

flex-direction: row;
주축-수평 / 교차축-수직(default)

flex-direction: row;

flex-direction: column;
주축-수직 / 교차축-수평

flex-direction: column;

reverse = 순서 반전
flex-direction: row-reverse; => 좌우 반전
flex-direction: column-reverse; => 상하 반전

flex-direction: row-reverse;

flex-direction: column-reverse;

 

* flex 속성 연습해보기 좋은 게임 => Flexbox Froggy

Flexbox Froggy