Flexbox
세 개의 버튼을 한 행에 배치하되, 고르게 간격을 두고, 모두 같은 높이로, 각 버튼의 텍스트 양에 관계없이 수직 중앙에 정렬하고 싶습니다. 예전에는 이를 위해 float, clearfix, 그리고 많은 추측이 필요했습니다. Flexbox는 정확히 이 목적으로 만들어진 도구입니다. 한 컨테이너에 자식 요소를 한 줄로 배치하도록 지시한 후, 두 축을 따라 요소들을 조정하여 원하는 위치에 배치합니다. 웹에서 볼 수 있는 대부분의 일상적인 레이아웃(네비게이션 바, 툴바, 카드 행)은 내부적으로 flex 컨테이너를 사용합니다.
flex 컨테이너
Flexbox는 부모 요소에 한 줄의 코드로 시작합니다. 컨테이너에 display: flex를 설정하면 그 직접 자식 요소들이 한 행에 나란히 배치됩니다. 그 컨테이너는 이제 **flex 컨테이너**이고, 그 안의 각 자식은 flex 항목이 됩니다.
.nav {
display: flex; /* 자식 요소들이 이제 한 행으로 배치됩니다 */
}항목들은 두 방향으로 배치됩니다. **주축(main axis)**은 왼쪽에서 오른쪽으로 실행되며, 항목들이 배치되는 방식입니다. **교차축(cross axis)**은 위에서 아래로 실행되며, 행을 가로지릅니다. 두 축을 따라 항목들을 조정할 것이므로, 지금 이를 시각화하는 것이 도움이 됩니다. 주축은 항목들이 앉아 있는 선이고, 교차축은 그것을 가로지르는 방향입니다.
.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 항목들이 그들 사이의 공간을 어떻게 분할하는지입니다.