CSS 공부하기 - 플렉스

플렉스 박스가 뭘까.. 

코드를 짜기 전까지 이론만 공부했을 때 정말 어렵다고 생각한 파트

그렇지만 실제 작성할 때, 정말 필요하고 필수적이라고 생각한 파트 !

>> 한마디로 레이아웃을 짜기 위한 코드 ! <<

 

👩🏻‍💻공부하다가 몇가지 알게 된 부분이 있어 나중에 내가 다시 보기 쉽게 정리해두기 :)

 📝공부하다가 자꾸 궁금한게 생겨서 비교해보고 다시 정리중...

 

 

출처 : Chat GPT

---

네모네모 사고 하는 습관 기를 것 - ⭐️

 

 

 

공부하다가 강사님이 소개해주신 정말 쉽고 좋은 사이트!! 

https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

 

정말.. 큰 도움이 된 사이트 :) !! 

---

 

CSS에서 display: flex;를 설정한다는 것은 "이 요소를 플렉스 박스로 만들겠다"는 뜻이야.

즉, 부모 요소에 display: flex;를 주면, 그 안에 있는 자식 요소들이 플렉스 규칙에 따라 정렬되기 시작.

 

💡기본적으로 플렉스는 수평(가로) 정렬이야!

즉, display: flex;를 적용하면 자식 요소들이 기본적으로 가로 방향(row)으로 배치돼.
이걸 수직(세로) 정렬로 바꾸고 싶다면 flex-direction: column;을 써야 해.

 

📌 display: flex;를 주면 어떤 변화가 생길까?

1. 기본적으로 가로 정렬이 됨
   • 블록 요소(<div>, <p> 등)는 원래 세로로 쌓이지만, display: flex;를 주면 가로로 배치됨.
2. 자식 요소들이 유연하게 크기를 조정할 수 있음
   • flex: 1; 같은 속성을 주면 자동으로 크기를 나눠가짐.
3. 정렬을 쉽게 할 수 있음
   • justify-content, align-items 같은 속성으로 쉽게 가운데 정렬 가능.

 

---

📌 가로 + 세로 중앙 정렬 코드

justify-content: center;	(가로) 가운데 정렬	플렉스 박스 안의 요소들을 가로 방향으로 중앙 배치
align-items: center;	(세로) 가운데 정렬	플렉스 박스 안의 요소들을 세로 방향으로 중앙 배치

✅ 둘 다 쓰면 가로+세로 중앙 정렬!

👉 💡 이 조합은 플렉스에서 가장 많이 쓰는 코드!
👉 "가운데 정렬하고 싶다" → display: flex; + justify-content: center; + align-items: center; 하면 됨!

이제 바로 써먹을 수 있다 😆

 

 

🎯 플렉스에서 자주 쓰이는 코드

display: flex;	플렉스 박스로 만들기	부모 요소를 플렉스 박스로 변경
justify-content: center;	(가로) 가운데 정렬	가로 방향으로 중앙 배치
align-items: center;	(세로) 가운데 정렬	세로 방향으로 중앙 배치
flex-direction: row;	가로 정렬(기본값)	요소들을 가로 방향으로 배치
flex-direction: column;	세로 정렬	요소들을 세로 방향으로 배치
justify-content: space-between;	(가로) 양 끝 정렬	첫 번째, 마지막 요소를 양 끝에 배치
justify-content: space-around;	(가로) 요소들 사이 균등한 여백	요소들 사이에 같은 크기의 여백 배치
justify-content: space-evenly;	(가로) 요소들 간 간격 균일	모든 요소가 같은 간격으로 정렬
align-items: flex-start;	(세로) 위쪽 정렬	요소들을 위쪽에 정렬
align-items: flex-end;	(세로) 아래쪽 정렬	요소들을 아래쪽에 정렬
flex-wrap: wrap;	자동 줄바꿈	요소들이 많으면 다음 줄로 이동 (반응형 디자인에 유용)
gap: 10px;	요소 간 간격	요소들 사이의 간격을 지정

---

공부하다가 급 궁금해진 것.

float란 기능도 있는데 ?! 하며 찾아본.... 

📌 float vs flex 차이

 

원래 목적	텍스트 주위에 이미지를 배치하기 위해 사용	레이아웃을 쉽게 정렬하기 위해 사용
정렬 방식	왼쪽(float: left;) 또는 오른쪽(float: right;)에 배치	부모 요소 안에서 자유롭게 가로/세로 정렬 가능
정렬 제어	요소들이 겹칠 수 있어서 clear 속성 필요	요소 간 정렬이 더 직관적이고 깔끔함
레이아웃 적용 범위	가로 정렬이 기본, 세로 정렬은 어려움	가로/세로 모두 자유롭게 정렬 가능

 

💡 결론

• float → 이미지 정렬 같은 간단한 작업에 사용
• flex → 레이아웃을 만들고 요소들을 정렬할 때 사용 (현대적인 웹 개발에서 더 추천됨!)

이제 웹사이트 만들 때 float보다는 flex를 쓰는 게 더 좋다! 😊