[CSS] 플렉스박스(Flexbox) 개념 정리

Flexbox 구성 요소

Flexbox는 일반적으로 Flex container와 Flex item으로 구성된다

HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

CSS

.container {
  display: flex;
}

Flex container에 적용가능한 대표적인 속성

• justify-content
• align-items
• flex-direction
• flex-wrap
  
  

Flex item에 적용가능한 대표적인 속성

• align-self
• order
• flex
  
  

Main Axis와 Cross Axis

• flexbox에는 main axis(중심축)와 cross axis(반대축)의 두 가지 방향이 존재한다
• cross axis는 main axis를 지정해주면 자동으로 지정된다
• main axis를 수평에 두냐 수직에 두냐에 따라 반대축이 지정됩니다
• row(수평) 즉 ㅡ 방향으로 두었을때 (X축)이 main axis가 되고 column(수직)일 경우 반대이다

justify-content : flex item을 main axis를 기준으로 어떻게 정렬할지를 결정

• 기본값 / flex-start : flex item을 main axis의 맨 앞으로 정렬
• flex-end, center, space-between, space-evenly, space-around

align-items : flex item을 cross axis를 기준으로 어떻게 정렬할지를 결정

• 기본값 / stretch : flex item을 flex container의 (row)높이 또는 (column)너비만큼 늘려줌
• center, flex-start, flex-end, baseline

flex : flex-grow와 flex-shrink, flex-basis 속성을 한 번에 적용할 수 있도록 함

• flex-grow : flex item이 main axis 상에 공백이 있을 때, 이 공백을 얼마나 점유할지 지정
• flex-shrink : flex item이 main axis 상에 공간이 부족할 때, 얼마나 공간을 양보할지 지정
• flex-basis : flex item이 main axis 상에 공백이 있을 때, 최소 얼만큼의 공간을 점유할지를 지정

flex-direction : 컨테이너 안의 아이템들이 배치되는 주축(main axis)의 방향을 지정

• 기본값 / row : 아이템들이 좌에서 우로 가로 방향으로 배치
• row-reverse : 아이템들을 가로 방향으로 우에서 좌로 배치
• column : 아이템들을 세로 방향으로 위에서 아래로 배치
• column-reverse : 아이템들을 세로 방향으로 아래에서 위로 배치

flex-wrap : 컨테이너의 크기를 넘치는 경우 아이템들을 한 줄에 모두 배치할지, 여러 줄로 나누어 배치할지를 결정

• 기본값 / nowrap : 아이템들이 한 줄에 모두 배치
• wrap: 아이템들이 너비를 넘치는 경우 여러 줄로 나누어 배치
• wrap-reverse: 아이템들이 너비를 넘치는 경우 여러 줄로 나누어 배치되지만, 역방향으로 배치