Learn HTML & CSSFlexbox
버튼 세 개를 한 줄에 나란히, 간격을 균등하게, 높이를 똑같이, 그리고 텍스트 양이 달라도 항상 수직 중앙에 오도록 배치하고 싶다고 해봅시다. 예전에는 이런 걸 하려면 float와 clearfix를 쓰고 이런저런 값을 계속 추측해가며 맞춰야 했습니다. flexbox는 바로 이런 상황을 위해 만들어진 도구입니다. 컨테이너 하나에 자식들을 한 줄로 배치하라고 지시하면, 그다음 두 축을 따라 조금씩 밀어가며 원하는 위치에 맞출 수 있습니다. 웹에서 흔히 보는 레이아웃, 즉 내비게이션 바, 툴바, 카드가 줄지어 있는 형태는 대부분 그 안에 flex 컨테이너가 자리 잡고 있습니다.
flex 컨테이너
flexbox는 부모 요소에 한 줄만 추가하면 시작됩니다. 컨테이너에 display: flex를 설정하면 그 직계 자식들이 한 줄로 나란히 늘어섭니다. 이제 이 컨테이너는 **flex 컨테이너**가 되고, 그 안의 각 자식은 flex 항목이 됩니다.
.nav {
display: flex; /* 자식들이 이제 한 줄로 늘어선다 */
}항목들은 두 방향을 따라 배치됩니다. 메인 축은 왼쪽에서 오른쪽으로, 항목들이 줄지어 서는 방향입니다. 교차 축은 위에서 아래로, 그 줄을 가로지르는 방향입니다. 이 두 축을 따라 항목을 조정하게 될 것이므로 지금 미리 그려보면 도움이 됩니다. 메인 축은 항목들이 놓이는 선이고, 교차 축은 그것을 가로지르는 방향입니다.
.nav {
display: flex;
}선언 하나로 어떤 블록의 자식들이든 위에서 아래로 쌓이던 것을 멈추고 한 줄로 늘어서게 됩니다. 이 장의 나머지 내용은 모두 컨테이너 안에 들어간 이 항목들을 어떻게 조정하는지에 관한 것입니다.
display: flex를 지정하면 직계 자식들이 한 줄로 늘어섭니다. 이 부모가 flex 컨테이너이고, 자식들이 flex 항목입니다. 항목들은 두 방향을 따라 움직입니다. 메인 축은 항목들이 놓이는 선이고, 교차 축은 그것을 가로지르며, 여러분은 이 두 축을 따라 항목을 밀게 됩니다. 축을 따라 정렬하기
항목들이 한 줄로 늘어서면, 두 속성으로 이들을 움직일 수 있습니다. **justify-content**는 항목들이 놓인 방향, 즉 메인 축을 따라 간격을 조정합니다. align-items는 교차 축을 따라, 즉 줄 안에서 위아래로 항목을 움직입니다.
.nav {
display: flex;
justify-content: space-between; /* 줄을 따라 항목들을 서로 밀어낸다 */
align-items: center; /* 수직 중앙에 맞춘다 */
}justify-content의 자주 쓰는 값으로는 flex-start(왼쪽에 몰림), center(가운데에 몰림), flex-end(오른쪽에 몰림), space-between(항목 사이에만 간격, 양 끝에는 없음), space-around(각 항목의 양쪽에 간격)가 있습니다. align-items는 center를 가장 많이 쓰게 됩니다.
양쪽 방향으로 모두 중앙에 맞추려면, 누구나 처음 배우는 방법이 있습니다. 둘 다 center로 설정하는 것입니다.
.hero {
display: flex;
justify-content: center; /* 메인 축을 따라 중앙 정렬 */
align-items: center; /* 교차 축을 따라 중앙 정렬 */
}justify-content는 메인 축을 따라 항목 간격을 조정하고, align-items는 교차 축을 따라 항목을 움직입니다. 첫 번째 속성에서 꼭 기억할 값은 center, space-between, flex-start입니다. 둘 다 center로 설정하면 안에 든 것이 정확히 중앙에 오는데, 이 방법은 앞으로 계속 쓰게 됩니다. 방향과 줄바꿈
기본적으로 flex 컨테이너는 항목들을 한 줄로 배치합니다. 이를 바꾸려면 **flex-direction**을 사용합니다. 이를 column으로 설정하면 항목들이 나란히 놓이는 대신 위에서 아래로 쌓입니다.
.sidebar {
display: flex;
flex-direction: column; /* 이제 항목들이 수직으로 쌓인다 */
}한 줄에 놓인 항목들이 자리가 부족해지면 점점 더 좁게 눌립니다. 대신 새 줄로 넘어가게 하려면 flex-wrap: wrap을 추가합니다.
.card-row {
display: flex;
flex-wrap: wrap; /* 자리가 부족한 항목은 다음 줄로 넘어간다 */
}항목 사이 간격을 주려면 gap을 사용합니다. 이는 바깥쪽 가장자리에는 공간을 추가하지 않고, 모든 항목 사이에 일정한 간격만 추가합니다.
.card-row {
display: flex;
gap: 16px; /* 각 항목 사이에 16px */
}flex-direction: column은 항목을 한 줄로 놓는 대신 수직으로 쌓습니다. flex-wrap: wrap은 자리가 부족한 항목을 눌러 찌그러뜨리는 대신 새 줄로 넘깁니다. 그리고 gap은 가장자리에는 공간을 추가하지 않고 항목 사이에만 균등한 공간을 넣어주므로, 마진보다 먼저 떠올려야 할 도구입니다. 항목의 유연한 크기 조정
flexbox의 핵심은 항목들이 늘어나거나 줄어들면서 공간을 나눠 가질 수 있다는 점입니다. 가장 많이 쓰게 될 축약 속성은 항목에 지정하는 flex: 1로, 이는 해당 항목에게 늘어나서 사용 가능한 공간을 균등하게 나눠 가지라고 지시합니다.
.card {
flex: 1; /* 모든 카드가 균등하게 늘어나 줄을 나눠 가진다 */
}한 줄에 있는 카드 세 개에 모두 flex: 1을 주면 컨테이너가 세 개의 동일한 너비로 나뉩니다. 한 카드에만 flex: 2를 주면 다른 카드보다 두 배의 공간을 차지합니다. 이 숫자 하나가 항목들이 남는 공간을 나누는 방식을 결정합니다.
flex: 1 뒤에는 세 가지 독립적인 설정이 숨어 있습니다. 항목이 얼마나 늘어나는지, 얼마나 줄어드는지, 그리고 시작 크기입니다. 처음에는 이 값들을 하나씩 직접 설정할 일이 거의 없습니다. 축약 속성이 흔한 경우를 다 처리해주지만, 그 뒤에 이런 값들이 있다는 것을 알아두면 도움이 됩니다.
.layout {
display: flex;
gap: 24px;
}
.sidebar {
flex: 0 0 240px; /* 고정 240px, 늘어나거나 줄어들지 않는다 */
}
.main {
flex: 1; /* 남는 공간을 모두 차지한다 */
}고정된 사이드바 옆에 유연한 메인 열, 딱 세 줄로 의도를 표현했습니다. 이 한 가지 패턴에 앞서 나온 정렬된 내비게이션 바를 더하면, 앞으로 만들게 될 레이아웃의 상당 부분을 다룰 수 있습니다.
flex: 1은 늘어나서 줄의 공간을 균등하게 나눠 가지라는 뜻이므로, flex: 1을 가진 카드 세 개는 같은 너비로 나옵니다. 하나를 flex: 2로 올리면 두 배의 공간을 차지합니다. 이 숫자 하나로 flex 항목들이 공간을 나누는 방식이 정해집니다.