h1 h1

hello

CSS Flexbox 완전 정복 가이드 🚀

Flexbox는 현대적인 웹 개발에서 필수적인 CSS 레이아웃 기법입니다. 이 가이드에서는 Flexbox의 핵심 개념부터 실전 예제까지 폭넓게 다룹니다.

📌 1. Flex Container 기본 설정

/* 부모 요소 */
.container {
  display: flex;
  flex-direction: row; /* 주 축 방향 */
  justify-content: center; /* 주 축 정렬 */
  align-items: center; /* 교차 축 정렬 */
  gap: 20px; /* 아이템 간격 */
  flex-wrap: wrap; /* 줄 바꿈 */
}

🎯 2. Flex Item 속성

/* 자식 요소 */
.item {
  flex: 1 1 200px; /* grow | shrink | basis */
  order: 2; /* 순서 조정 */
  align-self: flex-end; /* 개별 정렬 */
}

🏗️ 3. 실전 레이아웃 예제

3-1. 반응형 네비게이션 바 만들기

<nav class="flex-nav">
  <div class="logo">LOGO</div>
  <div class="menu">Home</div>
  <div class="menu">About</div>
  <div class="menu">Contact</div>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  background: #f5f5f5;
}
.menu {
  flex: 1;
  text-align: center;
  padding: 12px;
}

3-2. 3열 카드 그리드

<div class="card-grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-grid {
  display: flex;
  gap: 15px;
  padding: 20px;
}
.card {
  flex: 1;
  min-width: 250px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

🌍 4. 브라우저 호환성 대응

/* IE11 대응 */
.container {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
}
.item {
  -ms-flex: 1 0 auto;
}

🔥 5. 필수 Flexbox 팁

✅ 수직 중앙 정렬 (Flexbox 활용)

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

✅ 요소 간격 균등 배분

.container {
  display: flex;
  justify-content: space-evenly;
}

✅ 반응형 레이아웃 최적화

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

이 가이드를 통해 Flexbox의 핵심을 이해하고 다양한 레이아웃을 자유롭게 구성해보세요! 🎨💡