jonbeo 님의 블로그

Flexbox 레이아웃을 만들 때,아이템 사이 간격을 주려고 margin-right, margin-bottom… 복잡하게 썼던 경험 있죠?이젠 그럴 필요 없어요!gap 속성 하나면 모든 아이템 간 간격을 한 번에 정리할 수 있어요! ✅ 기본 문법.container { display: flex; gap: 20px;} gap은 아이템 사이의 공간만 설정해주는 속성이에요.바깥쪽 여백은 적용되지 않고,첫 요소와 마지막 요소 바깥은 건드리지 않아요! 📐 두 가지 버전으로 쓸 수 있어요gap: 20px; /* row + column 모두 20px */gap: 20px 10px; /* row 간격 20px, column 간격 10px */💡 Flexbox에선 주로 gap: 20px 단일값으로 ..

Flexbox를 쓰다 보면 한 아이템은 꽉 차고, 다른 건 작게 줄어들고,비율대로 공간을 유연하게 나누고 싶을 때가 있어요.그럴 때 반드시 알아야 할 속성이 바로 이 3가지!flex-growflex-shrinkflex-basis이번 포스팅에서는 이 3개의 속성이 어떻게 조합되고,공간을 어떻게 계산해서 배치하는지 확실히 정리해보겠습니다!✅ 기본 문법.item { flex-grow: 1; flex-shrink: 1; flex-basis: 0;} 사실 이 3개는 하나로 합쳐서도 쓸 수 있어요!.item { flex: 1 1 0;} 1️⃣ flex-grow – 남는 공간을 얼마나 "더" 가져갈지.item { flex-grow: 1;} flex-grow는 컨테이너에 남는 여유 공간을 아이템끼리 나눌 때..

Flexbox로 정렬을 잘 해놨는데...아이템이 많아지니까 한 줄에 너무 꽉 차서 깨지거나, 줄바꿈이 안 되던 경험 있으신가요?그럴 때 필요한 속성이 바로 **flex-wrap**입니다!자동 줄바꿈을 허용할지 말지, 이 속성이 정해줘요. ✅ 기본 문법.container { display: flex; flex-wrap: wrap;} 기본적으로 Flexbox는 한 줄에 모든 아이템을 우겨 넣으려고 해요그래서 너비가 넘쳐도 줄바꿈이 안 되고 깨지거나 뒤엉켜버립니다. 🧩 속성값 정리값설명nowrap기본값. 줄바꿈 안 됨. 한 줄에 전부 배치wrap자동 줄바꿈 허용 (다음 줄로 내려감)wrap-reverse줄바꿈은 되지만 아래에서 위로 쌓임 (드물게 사용) 🧪 실습 예시 1 2 3 4 5 이 코..

Flexbox로 정렬을 하다 보면,가로 정렬은 잘 되는데 왜 세로 정렬은 자꾸 안 맞지?라고 생각한 적 한 번쯤 있으시죠?그럴 땐 주축이 아닌 교차축 정렬, 즉 align-items와 align-self를 확인해봐야 해요.이 두 속성이 Flexbox에서 세로 방향 정렬을 담당합니다.이번 포스팅에서는 이 두 속성의 차이와 활용법을 쉽게 정리해볼게요! ✅ align-items란?align-items는 모든 Flex 아이템들의 세로 정렬(교차축 정렬) 방식을 한 번에 지정해주는 속성이에요..container { display: flex; align-items: center;} 📦 align-items의 속성값값설명stretch기본값. 아이템 높이를 컨테이너에 맞춰 늘림flex-start위쪽 정렬 (교차..

Flexbox를 쓰다 보면 "가운데 정렬은 어떻게 하지?", "아이템을 양쪽에 나눠서 정렬하고 싶어!" 이런 상황 자주 생기죠.그럴 때 꼭 써야 하는 속성이 바로 **justify-content**입니다.이 속성은 아이템을 주축(main axis) 방향으로 어떻게 정렬할지 결정하는 속성이에요.이번 포스팅에서는 justify-content의 다양한 값과 시각적인 차이를 비교하면서어떤 상황에서 어떤 정렬이 적합한지도 함께 정리해볼게요!✅ 기본 문법.container { display: flex; justify-content: center;} justify-content는 아이템들이 놓일 방향의 중심 정렬 방식을 설정합니다.주축이 가로(row)일 수도 있고, 세로(column)일 수도 있어요! 📦 사용 ..

Flexbox를 쓸 때 가장 먼저 설정해야 하는 속성이 있습니다.바로 flex-direction입니다.이 속성은 아이템들이 나열되는 기본 방향을 정해주는 역할을 합니다.그런데 이 방향 하나만 바꿨을 뿐인데, 전체 레이아웃이 완전히 달라져 보이는 경험, 해보신 적 있으시죠?이번 포스팅에서는 flex-direction의 기본 개념부터각 속성값이 실제로 어떻게 작동하는지 차근차근 살펴보겠습니다! ✅ 기본 문법.container { display: flex; flex-direction: row; /* 기본값 */} flex-direction은 Flexbox의 주축(main axis) 방향을 설정해주는 속성입니다.주축이 어디냐에 따라 justify-content, align-items 같은 정렬 방식도 달라져..

이전 Flexbox 관련 포스팅에서는 Flexbox와 CSS Grid의 차이를 비교해보며언제 어떤 레이아웃을 쓰는 게 좋은지 알아봤습니다.이번엔 Flexbox 속성 하나하나에 대해 심화 학습을 시작해보려고 합니다.“flex로 정렬은 하긴 하는데, 정확히 무슨 속성이 뭘 하는 거였더라?”이런 고민이 있었다면 이번 flex 시리즈가 큰 도움이 될 거예요 :)✅ display: flex, 다시 정리해보기Flexbox의 핵심은 다음 두 가지로 나뉩니다:Flex 컨테이너: display: flex가 적용된 부모 요소Flex 아이템: 컨테이너 안에 있는 자식 요소들 A B C 🧩 Flex 컨테이너에서 쓸 수 있는 주요 속성들속성기능 요약flex-direction주축 방향을 설정 (가로 또는 세로)justi..