🌱 기초 프론트엔드
Flexbox가 뭔가요?
쉽게 이해하기
Flexbox는 고무줄로 연결된 상자들 같아요. 공간이 남으면 늘어나고, 부족하면 줄어들면서 자동으로 배치됩니다. 예전에는 블록 쌓기처럼 딱딱하게 배치해야 했는데, Flexbox는 훨씬 유연하게 움직여요.
핵심 정리
CSS에서 요소들을 가로나 세로로 유연하게 배치하는 레이아웃 방식입니다.
자세히 알아보기
Flexbox는 'Flexible Box Layout'의 줄임말로, CSS의 레이아웃 기법 중 하나입니다. 요소들을 가로(row) 또는 세로(column) 방향으로 배치하고, 공간을 자동으로 분배해주는 기능이에요.
사용법은 간단합니다. 부모 요소에 'display: flex'를 적용하면, 그 안의 자식 요소들이 자동으로 가로로 나란히 배치됩니다. 'justify-content'로 가로 정렬을, 'align-items'로 세로 정렬을 조절할 수 있죠. 예를 들어 버튼 3개를 화면 가운데 정렬하려면 예전엔 복잡한 CSS가 필요했지만, Flexbox는 몇 줄이면 됩니다.
실무에서는 네비게이션 바, 카드 레이아웃, 폼 요소 정렬 등에 Flexbox를 많이 씁니다. 특히 반응형 웹을 만들 때 화면 크기에 따라 요소들이 자동으로 재배치되도록 하는 데 아주 유용해요.
Flexbox와 함께 쓰이는 또 다른 레이아웃 기법으로 CSS Grid가 있는데, Grid는 2차원 레이아웃(행과 열)에 강하고 Flexbox는 1차원 레이아웃에 강합니다. 둘을 상황에 맞게 조합해서 쓰면 거의 모든 레이아웃을 만들 수 있어요.