[CSS] Flex 컨테이너

이번 포스팅에서는 CSS 속성 중 하나인 Flex 컨테이너에 대하여 공부를 해보고자 한다.

 

---

Flex 컨테이너란

Flex 컨테이너는 웹 개발에서 사용되는 반응형 디자인을 구현하기 위한 CSS 속성 중 하나다.
Flexbox 레이아웃 모델을 사용하여 요소들을 유연하게 정렬하고 배치하는 데 도움을 준다.
Flexbox는 요소를 행 또는 열의 형태로 배치하고, 각 요소의 크기와 간격을 조정할 수 있는 강력한 도구다.

 

Flex 컨테이너는 부모 요소에 적용되는 CSS 속성이다.
아래는 Flex 컨테이너를 구성하는 주요 속성들에 대한 설명입니다:

• display
  Flex 컨테이너를 정의하기 위해 display: flex 또는 display: inline-flex를 사용한다.
  display: flex는 블록 수준의 컨테이너를 생성하고, display: inline-flex는 인라인 수준의 컨테이너를 생성한다.
  
  
• flex-direction
  Flex 항목들이 배치되는 주 축과 방향을 지정한다.
  주로 사용되는 값은 row (기본값, 요소들을 행으로 배치), column (요소들을 열로 배치), row-reverse (요소들을 역순의 행으로 배치), column-reverse (요소들을 역순의 열로 배치) 등이 있다.
  
  
• justify-content
  주 축에서 요소들의 정렬 방식을 지정한다.
  일반적으로 사용되는 값으로는 flex-start (시작 부분에 정렬), flex-end (끝 부분에 정렬), center (가운데 정렬), space-between (요소들 사이에 동일한 간격을 두고 정렬), space-around (요소들 주변에 동일한 간격을 두고 정렬) 등이 있다.
  
  
• align-items
  교차 축에서 요소들의 정렬 방식을 지정한다.
  일반적으로 사용되는 값으로는 stretch (요소들을 컨테이너의 전체 높이로 늘림), flex-start (시작 부분에 정렬), flex-end (끝 부분에 정렬), center (가운데 정렬), baseline (요소들의 기준선에 정렬) 등이 있다.
  
  
• flex-wrap
  Flex 항목들이 한 줄에 배치되지 않을 경우 줄 바꿈을 할지 여부를 지정한다.
  기본값은 nowrap으로 줄 바꿈을 하지 않고, wrap으로 설정하면 Flex 항목들이 여러 줄에 걸쳐 배치된다.
  
  
• align-content
  여러 줄이 있는 경우 교차 축에서 줄들의 정렬 방식을 지정한다.
  주로 사용되는 값으로는 stretch (줄들을 컨테이너의 전체 높이로 늘림), flex-start (시작 부분에 정렬), flex-end (끝 부분에 정렬), center (가운데 정렬), space-between (줄들 사이에 동일한 간격을 두고 정렬), space-around (줄들 주변에 동일한 간격을 두고 정렬) 등이 있다.

 

이러한 속성들을 조합하여 Flex 컨테이너를 구성하면 내부 요소들의 배치와 크기를 유연하게 조정할 수 있다.
Flexbox는 복잡한 레이아웃을 단순하게 구현할 수 있는 강력한 도구이며, 반응형 디자인을 구현하는 데 매우 유용하다.

 

---

예시

아래는 Flex 컨테이너를 사용한 예시 코드이다.

 

HTML

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

 

CSS

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

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

• 위의 예시 코드에서는 flex-container 클래스를 가진 <div> 요소를 Flex 컨테이너로 지정하고 있다.
• 내부에는 flex-item 클래스를 가진 세 개의 <div> 요소가 있다.
• CSS에서 .flex-container 클래스에는 display: flex 속성을 사용하여 Flex 컨테이너로 설정하고 있다.
• 또한, justify-content: space-between 속성은 주 축에서 요소들을 양쪽 끝에 정렬하고 간격을 균등하게 분배하도록 지정한다.
• align-items: center 속성은 교차 축에서 요소들을 수직 중앙에 정렬하도록 지정한다.
• .flex-item 클래스에는 각 요소의 크기와 배경색을 지정하고 있다.

 

이 예시 코드를 실행하면 세 개의 Flex 항목이 주 축에서 양쪽 끝에 정렬되고, 교차 축에서 수직 중앙에 정렬된 형태로 표시된다.
요소들 간에는 간격이 있고, 크기는 100px × 100px로 설정되며 배경색은 연한 파란색이다.
Flex 컨테이너의 속성을 조정하고 내부 요소들을 추가 및 수정함으로써 다양한 레이아웃을 만들 수 있다.

 

---