Flexbox는 화면에 HTML 요소를 배치하는 데 도움이되는 널리 사용되는 CSS 레이아웃 모듈입니다. 

신의 선물이 될 수 있는 여러 사용 사례가 있습니다. 수평 및 수직 중앙 정렬이 그 중 하나입니다. 

Flexbox 센터링은 기존 CSS 상자 모델로 작업 할 때 발생할 수 있는 일반적인 정렬 문제를 해결합니다. 

몇 줄의 CSS 코드만으로 컨테이너 내에서 항목을 가로 및 세로로 가운데에 맞출 수 있습니다.

https://onextrapixel.com/flexbox-centering-guide/ 

행과 열 기반 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 센터링에 대해 말할 때 두 종류의 센터링에 대해 이야기합니다.

1. 주축 (블록 축이라고도 함)을 중심으로합니다.
2. 교차 축을 따라 중앙에 위치 (인라인 축이라고도 함).

완벽하게 중앙에 위치한 플렉스 아이템을 원한다면 두 축을 따라 중앙에 배치해야 합니다.

주축을 중심으로 

기본 축을 따라 플렉스 항목을 가운데에 맞추려면 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 속성이 있습니다.

1. 모든 플렉스 아이템의 단일 라인 센터링을 위한 align-items
2. 개별 플렉스 아이템의 단일 라인 센터링을 위한 align-self
3. 모든 플렉스 항목의 여러 줄 가운데 맞춤을 위한 align-cntent (이 속성은 플렉스 항목이 여러 줄로 줄 바꿈 되는 경우에만 작동 함).

이제 서로 다른 flex-direction 속성 값에서 어떻게 작동하는지 봅시다.