jonbeo 님의 블로그

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..