CSS Flexbox

안녕하세요. 오늘은 CSS Flexbox에 대해 알아볼게요.

 

 

 

CSS Flexbox

 

CSS의 Flexbox(Flexible Box Layout)는 웹 페이지에서 

 

요소들을 쉽고 깔끔하게 정렬하고 배치하기 위한 레이아웃 시스템이에요.

 

특히 가로 또는 세로 방향으로 정렬, 요소 간 간격 조절, 가운데 정렬, 화면 크기에 따라 자동 정렬 등을 손쉽게 할 수 있어요.

 

 

 

Flexbox 기본 개념

 

 

Flexbox는 부모(Container)와 자식(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; /* Flexbox 활성화 */
}


.container → Flex 컨테이너
.item → Flex 아이템

 

그리고 Flexbox에는 두 가지 축이 있어요.

Main Axis (주축)	아이템이 배치되는 주요 축	가로 방향 (→)
Cross Axis (교차축)	주축에 수직인 축	세로 방향 (↓)

 

flex-direction 속성으로 축의 방향을 바꿀 수 있어요.

.container {
  display: flex;
  flex-direction: row;        /* 기본값: 가로로 정렬 */
  /* flex-direction: column;  세로로 정렬 */
}

 

 

Flexbox 주요 속성

 

부모(Container) 주요 속성과 예시예요.

속성	역할	예시
display: flex	Flexbox 활성화
flex-direction	아이템의 주축 방향 설정	row, column
justify-content	주축(가로축) 정렬 방식	flex-start, center, space-between 등
align-items	교차축(세로축) 정렬 방식	flex-start, center, stretch 등
flex-wrap	아이템 줄바꿈 여부	nowrap, wrap
align-content	여러 줄 정렬 (wrap 시)	space-between, center 등

 

.container {
  display: flex;
  justify-content: center; /* 가운데 정렬 (가로) */
  align-items: center;     /* 가운데 정렬 (세로) */
  height: 100vh;
}

 

 

자식(Item) 주요 속성과 예시예요.

속성	역할	예시
flex-grow	남은 공간을 얼마나 차지할지 비율 설정	flex-grow: 1;
flex-shrink	공간이 부족할 때 줄어드는 비율	flex-shrink: 0;
flex-basis	기본 크기 설정 (width와 유사)	flex-basis: 200px;
flex	위 3가지를 한번에 설정	flex: 1 0 200px;
align-self	개별 아이템 정렬 방식	align-self: center;

 

 

html

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>


css
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 200px;
  background: #eee;
}

.item {
  background: skyblue;
  padding: 20px;
  border-radius: 8px;
}

 

 

 

Flexbox 실습페이지

 

아래의 링크는 Flexbox를 재밌게 배울 수 있는 게임이에요. 

 

힌트와 팁도 있으니 편하게 즐겨보세요.

 

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

 

 

여기까지 CSS Flexbox에 대해 알아봤는데요.

 

어렵다고 생각하시면 꼭 Flexbox게임을 한번 즐겨보시면 좋을 것 같아요.