Flexbox는 화면에 HTML 요소를 배치하는 데 도움이 되는 널리 사용되는 CSS 레이아웃 모듈입니다.
godsend가 될 수 있는 여러 사용사례가 있습니다.
수평 및 수직 센터링이 그 중 하나입니다.
Flexbox 센터링은 기존 CSS 상자 모델로 작업 할 때 발생할 수 있는 일반적인 정렬 문제를 해결합니다.
몇 줄의 CSS 코드만으로 컨테이너 내에서 항목을 가로 및 세로로 가운데에 맞출 수 있습니다.
행과 열 기반 Flexbox 레이아웃
Flexbox는 1차원 레이아웃 모듈로, 레이아웃이 행 또는 열을 기반으로 함을 의미합니다.
Flex 컨테이너에서 사용해야 하는 flex-direction 속성을 사용하여 레이아웃 방향을 설정할 수 있습니다.
row, row-reverse, column 및 column-reverse의 네 가지 값을 사용할 수 있습니다.
화면에서 네 가지 다른 플렉스 방향이 다음과 같이 나타납니다.
행 기반 플렉스 레이아웃 (기본값) :
<!-- HTML -->
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
flex-direction: row;
}
역행 기반 플렉스 레이아웃 :
.container {
display: flex;
flex-direction: row-reverse;
}
열 기반 플렉스 레이아웃 :
.container {
display: flex;
flex-direction: column;
}
열 기반 플렉스 레이아웃 반전 :
.container {
display: flex;
flex-direction: column-reverse;
}
위의 그림에서 flex-wrap 속성의 기본값 (현재는 랩)을 변경하지 않았으므로 한 줄 flexbox 레이아웃을 볼 수 있습니다.
따라서 둘 이상의 행이나 열에 항목을 표시하려면 flex-wrap을 추가하십시오. wrap; 플렉스 컨테이너에도 적용됩니다.
Flexbox 센터링은 어떻게 작동합니까?
실제로 flexbox는 "수평"및 "수직"중심 개념을 사용하지 않습니다.
대신, 화면에서 가로 및 세로 중심으로 보이는 주축 및 십자 축과 함께 작동합니다.
주축 및 횡축의 방향은 전술 한 플렉스-방향 특성의 값에 의존한다.
행 기반 flexbox 레이아웃 (행 및 행 역)에서 주 축은 가로 방향으로 실행되고 교차 축은 수직입니다.
반면, 열 기반 플렉스 박스 레이아웃 (열 및 열 역)에서 주축은 세로로 실행되고 가로축은 가로입니다.
flexbox 축 작동 방식에 더 관심이 있는 경우 MDN 관련 flexbox 설명서를 살펴보십시오.
우리는 flexbox 센터링에 대해 말할 때 두 종류의 센터링에 대해 이야기합니다.
완벽하게 중앙에 위치한 플렉스 아이템을 원한다면 두 축을 따라 중앙에 배치해야 합니다.
주축을 중심으로
기본 축을 따라 플렉스 항목을 가운데에 맞추려면 justify-content 속성을 사용해야 합니다.
기본값은 flex-start이며, 이는 flex 컨테이너 내부의 모든 항목을 기본 축의 시작 부분에 정렬합니다.
항목을 중앙에 배치하려면 중심 값과 함께 사용해야 합니다.
행 기반 레이아웃의 경우 다음 CSS 코드는 항목을 가로로 가운데에 배치합니다 (여기에서 기본 축도 가로로 실행 됨).
.container {
display: flex;
flex-direction: row;
justify-content: center;
}
그리고 열 기반 레이아웃의 경우 동일한 justify-content 속성이 항목을 세로로 정렬합니다 (여기에서와 같이 주축은 세로로 실행 됨).
.container {
display: flex;
flex-direction: column;
justify-content: center;
}
위의 예에서와 같이, 우리는 플렉스 아이템을 중심에 두고, 행-역 및 열-역 방향은 행 및 열과 같은 방식으로 작동합니다. 주축의 중심이 시작점과 끝점에서 같은 거리에 있기 때문입니다.
그러나 flex-end와 같은 다른 값과 함께 justify-content 속성을 사용하려는 경우 길 찾기가 바뀌면 결과 레이아웃이 다르게 나타납니다.
교차 축을 중심으로
flexbox는 1 차원 레이아웃이므로 횡축은 2 차 역할을 합니다.
플렉스 아이템은 주축을 따라 흐릅니다. 가로축은 흐름 방향을 변경하지 않고 화면의 항목을 조정하기 만합니다.
교차 축을 따라 중심을 맞추는 데 사용할 수 있는 세 가지 CSS 속성이 있습니다.
이제 서로 다른 flex-direction 속성 값으로 작동하는 방법을 살펴 보겠습니다.
1. 단일 라인 교차 축 중심
align-items 속성을 사용하여 교차 축을 따라 항목을 정렬 할 수 있습니다.
center 속성과 함께 사용하는 경우 flex-direction이 행 또는 행 반대 인 경우 세로로, flex-direction이 열 또는 열 반대 인 경우에는 가로로 항목을 가운데에 맞 춥니 다.
가로축을 따라 가운데에 있는 항목이 행 기반 레이아웃에서 보이는 방식입니다.
.container {
display: flex;
flex-direction: row;
align-items: center;
}정의 컨텐츠를 변경하지 않았으므로 기본값 인 flex-start를 사용합니다.
이런 방식으로 플렉스 항목은 기본 (수평) 축의 시작과 교차 (수직) 축의 중심에 정렬됩니다.
열 기반 레이아웃을 사용할 때는 align-items 속성을 사용하여 플렉스 항목을 가로로 가운데에 배치 할 수 있습니다.
이 경우 교차 축이 가로로 실행됩니다. CSS에서 :
.container {
display: flex;
flex-direction: column;
align-items: center;
}여기서 justify-content 속성은 기본값 (flex-start)으로 유지됩니다.
열 기반 레이아웃에서와 같이 기본 축은 세로 축이며, flexbox는 항목을 컨테이너의 상단 (기본 축의 시작)에 맞추고 항목은 정렬 항목 : 중심 규칙에 따라 가로로 가운데에 맞춥니다.
2. 단일 품목 교차 축 중심
교차 축을 따라 플렉스 항목을 대량으로 중앙에 배치 할 수 있을 뿐만 아니라 정렬 항목을 재정의 하는 align-self CSS 속성을 사용하여 하나의 단일 항목을 중앙에 배치 할 수도 있습니다.
다음과 같은 방법으로 플렉스 컨테이너 대신 개별 플렉스 아이템에 정렬 자체를 추가해야 합니다.
<!-- HTML -->
<div class="container">
<div class="item"></div>
<div class="item center"></div>
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
flex-direction: row;
}
.center {
align-self: center;
background: magenta;
}아래 스크린 샷에서 볼 수 있듯이 가로 축을 따라 두 번째 항목을 가운데에 배치합니다 (수직으로 행 기반 레이아웃이므로). 동시에 나머지 항목은 기본 위치에 유지됩니다.
위의 예제는 행 기반 flexbox 레이아웃을 사용하지만 열 기반 레이아웃의 경우 align-item도 동일한 방식으로 작동합니다.
3. 다중 라인 교차 축 중심
flexbox 레이아웃 모듈을 사용하면 십자선을 따라 여러 줄의 항목을 중앙에 배치 할 수도 있습니다.
align-content 속성을 사용하면 여러 줄로 줄 바꿈 할 때 항목 주위에 공간을 분산 시킬 수 있습니다.
맞춤 항목과 맞춤 콘텐츠의 차이점을 이해하기는 다소 어렵으므로 서로 비교하는 방법을 살펴 보겠습니다.
flex-wrap을 랩으로 설정하고 align-items 속성 만 중앙에 놓으면 다음과 같은 이점이 있습니다.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
랩핑 플렉스 아이템은 (수직으로) 횡축을 따라 중심에 있지만 공간은 균등하게 분배됩니다. 이것은 다음과 같은 방식으로 컨텐츠 정렬을 통해 변경할 수 있습니다.
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
}아래에서 볼 수 있듯이 align-content 속성은 교차 축을 따라 공간 분포를 담당합니다.
중앙으로 설정되면 멀티 라인 품목은 가능한 한 플렉스 컨테이너의 중앙을 향해 "당겨집니다".
정렬 내용은 두 줄 이상의 플렉스 항목이 있는 경우에만 작동합니다. 따라서 하나 또는 두 개의 플렉스 아이템이 있을 때 걱정할 필요가 없습니다.
완벽한 중심 플렉스 아이템
flexbox를 사용하여 완벽하게 중앙에 배치 된 레이아웃을 만들려면 주축과 교차 축을 따라 중앙에 배치해야 합니다.
가장 빈번한 사용 사례는 한 요소를 다른 요소의 중앙에 놓을 때입니다.
flexbox의 경우 이것은 세 가지 CSS 규칙이며 div뿐만 아니라 모든 종류의 HTML 요소와 작동합니다.
<!-- HTML -->
<div class="container">
<div class="item"></div>
</div>
/* CSS */
.container {
display: flex;
justify-content: center;
align-items: center;
}flex-direction 속성에 값을 설정하지 않았으므로 기본값인 행을 사용합니다.
단일 항목 외에도 flexbox를 사용하여 여러 행의 항목을 완벽하게 가운데에 맞출 수 있습니다. 행 기반 레이아웃의 경우 다음 CSS를 사용해야 합니다.
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
align-content: center;
}
그리고 이것은 flex-direction이 열로 설정 될 때 완벽하게 중앙에 위치한 여러 줄 레이아웃이 어떻게 보이는 지입니다
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
align-content: center;
}
결론
Flexbox 센터링을 사용하면 컨테이너 안에 모든 종류의 HTML 요소를 배치 할 수 있습니다.
표시 : 컨테이너에 플렉스 규칙 추가 : 항목을 가로, 세로 또는 둘 다 가운데에 맞추려는 경우 편리합니다.
Flexbox 센터링은 완벽하게 중앙에 위치한 타이틀, 이미지, 비디오 및 제품 갤러리 등을 만드는 데 탁월한 솔루션입니다.
인생을 편하게 해줄 수 있는 CSS 기술과 도구가 많이 있습니다.
이에 대한 자세한 내용은 CSS 사양에 대해 알아야 할 5 가지 사항에 대한 기사를 살펴 보거나 최고의 flexbox 코드 스니펫 모음을 확인하십시오.
등록된 댓글이 없습니다.
