CSS Flexbox 완전 정복 가이드

CSS Flexbox는 웹 디자인에서 유연하고 효율적인 레이아웃을 구현하기 위한 강력한 도구입니다. Flexbox는 1차원 레이아웃을 관리하며, 요소들을 가로 또는 세로로 배치하고 정렬할 수 있도록 돕습니다. 이 가이드에서는 Flexbox의 기본 개념부터 고급 활용법까지 자세히 다룹니다.

ㅇㅞㅂ

---

1. Flexbox의 기본 개념과 구조

Flexbox는 부모 컨테이너와 자식 요소 간의 관계를 정의하여 레이아웃을 조정합니다.

1. Flex 컨테이너(Flex Container)
   • Flexbox를 활성화하려면 부모 요소에 display: flex;를 설정합니다.
     .container {
         display: flex;
     }
2. Flex 아이템(Flex Item)
   • Flex 컨테이너의 직계 자식 요소가 Flex 아이템이 됩니다.
     <div class="container">
         <div class="item">1</div>
         <div class="item">2</div>
         <div class="item">3</div>
     </div>
3. 주축(Main Axis)과 교차축(Cross Axis)
   • 주축(Main Axis): 요소가 배치되는 기본 축. 기본값은 가로 방향.
   • 교차축(Cross Axis): 주축에 수직인 축.

---

2. Flex 컨테이너의 주요 속성

1. flex-direction
   • 주축 방향을 설정합니다.
     .container {
         display: flex;
         flex-direction: row; /* 기본값: 가로 */
         /* 다른 값: column, row-reverse, column-reverse */
     }
2. justify-content
   • 주축 방향으로 요소를 정렬합니다.
     .container {
         justify-content: flex-start; /* 기본값 */
         /* 다른 값: flex-end, center, space-between, space-around, space-evenly */
     }
3. align-items
   • 교차축 방향으로 요소를 정렬합니다.
     .container {
         align-items: stretch; /* 기본값 */
         /* 다른 값: flex-start, flex-end, center, baseline */
     }
4. align-content
   • 여러 줄로 나뉜 요소들을 교차축에서 정렬합니다.
     .container {
         align-content: flex-start; /* 기본값 */
         /* 다른 값: flex-end, center, space-between, space-around, stretch */
     }

---

3. Flex 아이템의 주요 속성

1. flex-grow
   • 사용 가능한 공간을 Flex 아이템이 얼마나 차지할지 결정합니다.
     .item {
         flex-grow: 1; /* 공간을 동일하게 나눕니다. */
     }
2. flex-shrink
   • 공간이 부족할 때 Flex 아이템이 얼마나 축소될지 결정합니다.
     .item {
         flex-shrink: 1; /* 기본값: 축소 가능 */
     }
3. flex-basis
   • 아이템의 기본 크기를 설정합니다.
     .item {
         flex-basis: 200px; /* 기본 크기를 200px로 설정 */
     }
4. flex
   • flex-grow, flex-shrink, flex-basis를 단축형으로 설정합니다.
     .item {
         flex: 1 1 200px; /* grow 1, shrink 1, basis 200px */
     }
5. align-self
   • 특정 Flex 아이템만 교차축에서 정렬합니다.
     .item {
         align-self: flex-end;
     }

---

4. Flexbox를 활용한 실용적인 예제

1. 가로 정렬 및 가운데 정렬
   • 자식 요소를 가로로 배치하고 중앙에 정렬합니다.
     .container {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
     }
2. 네비게이션 바 만들기
   • Flexbox로 반응형 네비게이션 바를 구현합니다.
      
     • css
       .nav {
           display: flex;
           justify-content: space-between;
           align-items: center;
           background-color: #333;
           padding: 10px 20px;
       }
       
       .nav a {
           color: white;
           text-decoration: none;
           margin: 0 10px;
       }
       
       
     • html
       <div class="nav">
           <div class="logo">Logo</div>
           <div class="links">
               <a href="#">Home</a>
               <a href="#">About</a>
               <a href="#">Contact</a>
           </div>
       </div>
3. 카드 레이아웃
   • Flexbox로 카드 그리드를 구성합니다.
     • css
       .cards {
           display: flex;
           flex-wrap: wrap;
           gap: 20px;
       }
       
       .card {
           flex: 1 1 calc(33.333% - 20px);
           background-color: #f4f4f4;
           padding: 20px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
       
       
     • html
       <div class="cards">
           <div class="card">Card 1</div>
           <div class="card">Card 2</div>
           <div class="card">Card 3</div>
       </div>
       
       
4. 대칭형 레이아웃
   • 부모와 자식을 정렬하여 대칭적인 레이아웃을 만듭니다.
     .container {
         display: flex;
         justify-content: space-evenly;
         align-items: stretch;
         height: 100vh;
     }
     
     .box {
         flex: 0 1 200px;
         background-color: #ccc;
         padding: 20px;
         text-align: center;
     }

---

5. Flexbox와 Grid의 차이점

기능	Flexbox	Grid
레이아웃 방식	1차원(행 또는 열) 레이아웃	2차원(행과 열) 레이아웃
정렬	주축 및 교차축에서 정렬 가능	정밀한 행과 열 기반 정렬 가능
사용 목적	간단한 정렬 및 유연한 배치	복잡한 레이아웃 구성
대표 속성	flex, justify-content, align-items	grid-template-rows/columns

 

---

결론

Flexbox는 현대 웹 디자인에서 유연성과 간결함을 제공하는 중요한 도구입니다. 기본적인 개념부터 고급 활용까지 이해하면 효율적으로 레이아웃을 설계할 수 있으며, Grid와 함께 사용하면 더욱 강력한 디자인을 구현할 수 있습니다. 꾸준히 연습하고 다양한 레이아웃을 시도하여 Flexbox 전문가로 성장해보세요.