[ CSS ] Flex Container 제대로 이해하기

css 배너

 

CSS Flexbox 레이아웃 모델은 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와줍니다.

이 모델의 핵심 개념 중 하나가 바로 플렉스 컨테이너(flex container) 입니다.

이번 포스팅 에서는 Flex Container의 역할, 설정 방법, 그리고 다양한 속성에 대해 자세히 알아보겠습니다.

 

 

그 외에 CSS modal 등 다양한 CSS 의 효과들이 궁금하시다면 아래 포스팅을 참고해주세요

---

 

✅  애니메이션

 

[ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기

[ CSS ] 모바일 환경을 위한 스크롤애니메이션 만들기

 

 

✅  햄버거 메뉴 & 다크모드 토글

 

[ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기

[ CSS ] 모바일 환경을 위한 CSS 햄버거 메뉴 만들기

 

[ CSS ] 모바일 환경을 위한 다크모드 토글 만들기

[ CSS ] 모바일 환경을 위한 다크모드 토글 만들기

 

 

✅  다양한 modal 

 

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 팝업모달

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 팝업모달

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 바텀시트

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 바텀시트

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 다이얼로그

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 다이얼로그

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 토스트 toast 알림

[ CSS ] 모바일 환경을 위한 모달창 만들기 - 토스트 toast 알림

 

 

---

 

 

# 1. Flex Container  란?

Flex Container는 Flexbox 레이아웃에서 Flex Items(플렉스 아이템들) 를 포함하는 요소입니다.

Flex Container를 사용하면 내부에 있는 아이템들이 유연하게 배치되고 정렬될 수 있습니다.

Flex Container는 'display' 속성을 통해 정의되며, 주로 'flex' 또는 'inline-flex' 값을 사용합니다.

 

 

 

 

display: flex;

 

.container {
  display: flex;
}

 

• 이 속성은 요소를 블록 수준의  Flex Container 로 설정합니다.

 

 

display: inline-flex;

.container {
  display: inline-flex;
}

• 이 속성은 요소를 인라인 수준의 Flex Container 로 설정합니다.

 

# 2.Flex Container의 주요 속성

Flex Container에는 여러 가지 중요한 속성이 있습니다.

이러한 속성들은 Flex Items가 어떻게 배치되고 정렬되는지를 결정합니다.

 

앞으로 하나씩 포스팅예정이고 이번 포스팅에선 대략적인 설명을 드리도록 하겠습니다.

 

 

 

 

flex-direction

 

.container {
  display: flex;
  flex-direction: row;
}

 

flex-direction 속성은 플렉스 아이템들이 배치되는 주 축의 방향을 설정합니다.

• row: 기본값, 수평 방향으로 아이템 배치
• row-reverse: 수평 방향, 반대 순서로 아이템 배치
• column: 수직 방향으로 아이템 배치
• column-reverse: 수직 방향, 반대 순서로 아이템 배치

 

 

flex-wrap

 

.container {
  display: flex;
  flex-wrap: wrap;
}

 

flex-wrap 속성은 플렉스 아이템들이 컨테이너를 넘칠 때 줄바꿈을 할지 여부를 설정합니다.

• nowrap: 기본값, 줄바꿈 없음
• wrap: 줄바꿈 있음
• wrap-reverse: 줄바꿈 있음, 반대 방향

 

 

 

 

justify-content

 

.container {
  display: flex;
  justify-content: center;
}

 

justify-content 속성은 주 축을 따라 플렉스 아이템들을 정렬합니다.

• flex-start: 아이템들을 시작점으로 정렬 (기본값)
• flex-end: 아이템들을 끝점으로 정렬
• center: 아이템들을 중앙으로 정렬
• space-between: 아이템들 사이에 동일한 간격 배치
• space-around: 아이템들 주위에 동일한 간격 배치

 

align-items

 

.container {
  display: flex;
  align-items: center;
}

 

align-items 속성은 교차 축을 따라 플렉스 아이템들을 정렬합니다.

• flex-start: 아이템들을 시작점으로 정렬
• flex-end: 아이템들을 끝점으로 정렬
• center: 아이템들을 중앙으로 정렬
• baseline: 아이템들을 텍스트 베이스라인 기준으로 정렬
• stretch: 아이템들을 컨테이너에 맞게 늘림 (기본값)

align-content

 

.container {
  display: flex;
  align-content: space-between;
}

 

align-content 속성은 여러 줄의 플렉스 아이템들을 교차 축을 따라 정렬합니다.

• flex-start: 줄들을 시작점으로 정렬
• flex-end: 줄들을 끝점으로 정렬
• center: 줄들을 중앙으로 정렬
• space-between: 줄들 사이에 동일한 간격 배치
• space-around: 줄들 주위에 동일한 간격 배치
• stretch: 줄들을 컨테이너에 맞게 늘림 (기본값)

 

 

# 3.실용적인 예제

 

이해를 돕기 위해 다양한 플렉스 컨테이너 속성을 적용한 예제입니다.

 

🚩기본 Flex Container

 

<div class="container" style="display: flex;">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

결과 이미지

🚩 줄바꿈 있는 Flex Container

 

<div class="container" style="display: flex; flex-wrap: wrap;">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

 

결과 이미지

🚩 중앙 정렬된 Flex Container

 

<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

결과 이미지

 

 

 

 

 

# 4. 마무리

 

Flex Container 는 CSS Flexbox 레이아웃의 기본 구성 요소로서, 플렉스 아이템들의 배치와 정렬을 쉽게 제어할 수 있도록

도와줍니다. display: flex;를 사용하여 Flex Container 를 정의하고, 다양한 속성을 통해 원하는 레이아웃을 구현해 보신다면

이해가 더 쉽습니다. 이를 통해 더 유연하고 반응적인 웹 디자인을 만들어낼 수 있습니다.

이 글이 Flex Container 를 이해하고 실무 프로젝트에 활용하는 데 도움이 되길 바랍니다.

 

추가 질문이나 궁금한 사항이 있다면 댓글로 남겨주세요!