📌 display: flex; 쉽고 빠르게 배우는 법 🚀

안녕하세요! 😊 오늘은 CSS에서 레이아웃을 쉽게 정리할 수 있는 display: flex; 속성을 준비했습니다!

위치 잡기 어려우신 분들은 꼭 보시고 완.전.정.복 해봐요!🏗️

💡 display: flex;란?

**display: flex;**는 요소들을 가로 또는 세로로 정렬할 때 사용하는 CSS 속성이에요.

✔️ flex를 사용하면?
✅ 요소를 가운데 정렬하기 쉬워요.
✅ 가로, 세로 정렬을 자유롭게 조절 가능해요.
✅ float, position 없이도 레이아웃을 깔끔하게 정리할 수 있어요!

 

📌 기본 문법

.container {
    display: flex; /* flexbox 적용 */
}

이제 flex를 잘 활용하는 방법을 하나씩 알아볼까요? 😊

1️⃣ justify-content (가로 정렬)

justify-content**는 가로 방향(주 축, main axis)의 정렬을 결정해요.

📌 주요 값과 예제

값	설명	예제
flex-start	왼쪽 정렬 (기본값)	🔳🔳🔳⬜⬜⬜
flex-end	오른쪽 정렬	⬜⬜⬜🔳🔳🔳
center	가운데 정렬	⬜⬜🔳🔳🔳⬜⬜
space-between	양쪽 끝 정렬	🔳⬜⬜🔳⬜⬜🔳
space-around	요소 주위에 같은 간격 배치	⬜🔳⬜🔳⬜🔳⬜
space-evenly	요소 사이의 간격을 균등하게 배치	🔳🔳🔳🔳🔳🔳

✅ justify-content 예제

.container {
    display: flex;
    justify-content: center; /* 요소를 가운데 정렬 */
}

✅ 요소들이 가로 방향에서 가운데 정렬돼요! 🎯

2️⃣ align-items (세로 정렬)

align-items는 세로 방향(교차 축, cross axis)의 정렬을 결정해요.

📌 주요 값과 예제

값	설명
flex-start	위쪽 정렬 (기본값)
flex-end	아래쪽 정렬
center	세로 가운데 정렬
stretch	요소를 높이에 맞춰 늘림
baseline	텍스트 기준선에 맞춤

✅ align-items 예제

.container {
    display: flex;
    align-items: center; /* 요소를 세로 중앙 정렬 */
}

✅ 요소들이 세로 방향에서 가운데 정렬돼요! 🎯

3️⃣ flex-direction (방향 설정)

flex-direction은 아이템들이 배치되는 방향을 정하는 속성입니다.

📌 주요 값과 예제

값	설명
row	기본값 (가로 방향 배치)
row-reverse	가로 방향 반대로 배치
column	세로 방향 배치
column-reverse	세로 방향 반대로 배치

✅ flex-direction 예제

.container {
    display: flex;
    flex-direction: column; /* 요소를 세로 방향으로 배치 */
}

✅ 요소들이 위에서 아래로 배치돼요! 🎯

4️⃣ flex-wrap (줄 바꿈 설정)

기본적으로 flexbox는 모든 요소를 한 줄에 배치하려고 해요. flex-wrap을 사용하면 여러 줄로 나눌 수 있어요!

📌 주요 값과 예제

값	설명
nowrap	기본값 (줄 바꿈 없음)
wrap	요소가 넘치면 다음 줄로 배치
wrap-reverse	요소를 역순으로 다음 줄 배치

✅ flex-wrap 예제

.container {
    display: flex;
    flex-wrap: wrap; /* 요소가 넘치면 다음 줄로 이동 */
}

✅ 화면 크기에 맞게 자동으로 줄 바꿈됨! 🎯

🎯 display: flex; 완벽 예제!

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 300px;
    background-color: lightgray;
}
.item {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin: 10px;
}

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

✅ 요소들이 가로 중앙 정렬 + 세로 중앙 정렬 + 넘치면 줄 바꿈됨! 🎯

🎯 정리!

✔️ display: flex를 사용하면 요소 정렬이 쉬워짐!
✔️ 가로 정렬 → justify-content
✔️ 세로 정렬 → align-items
✔️ 배치 방향 변경 → flex-direction
✔️ 줄 바꿈 설정 → flex-wrap

📢 이제 display: flex;를 활용해서 멋진 레이아웃을 만들어보세요! 🚀

다른의견이 있다면 댓글로 남겨주세요! 😊