Flex 컨테이너의 수평 위치 중앙에 배치

flex 컨테이너 스크롤-바를 수평 위치 중앙에 배치하기 위하여 justify-content와 overflow를 동시에 설정할 때 발생하는 호환성 문제를 해결하는 방법입니다.

현재 사용 코드

 

#header {
	position: relative;
	max-width: 1366px;
	margin: 0 auto;
	}
#gnb {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	}
......
#gnb ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	}

 

위의 코드는 BookClub 스킨에서 사용하는 GNB 내비게이션 스크롤 메뉴의 수정 형태입니다. "#gnb ul"을 flex container로 변경하였습니다. 원본 코드는 inline-block을 사용합니다.

 

#gnb ul {
	display: inline-block;
	margin-left: -30px;
	vertical-align: top;
}

 

flex의 호환성 부족

 

flex container로 변경한 것은 내부의 flex box들을 항상 수직의 중앙에 배치하기 위한 목적입니다. container의 높이가 변해도 수직의 중앙으로 이동합니다. 이제 마지막으로 flex container를 수평의 중앙에 배치하기 위하여 하나의 코드를 추가합니다.

 

justify-content: center;

 

뜻하지 않은 문제가 발생했습니다. GNB 스크롤-바를 중앙에 배치하는 목적은 이루었지만, 좌우 폭이 스크롤-바의 길이에  비하여 작을 경우 양쪽의 일부 flex box가 보이지 않고 스크롤이 안 되는 오류가 발생합니다. 스크롤-바로 사용하는 flex container에는 코드가 호환되지 않는 것입니다.

문제 해결을 위한 대체 코드

 

위 코드를 사용하지 않고 수평의 중앙에 container를 배치하는 방법이 있습니다.

 

max-width: 1366px;
margin: 0 auto;

GNB 스크롤-바의 parent 객체인 #header에 위 2줄의 코드를 추가하는 것입니다. 일반적으로 객체를 수평의 중앙에 배치하기 위한 코드는 "margin: 0 auto;"로 충분합니다. flex container는 좌우 폭을 모두 점유하기 때문에 반드시 parent 객체에 폭을 지정해 주어야 합니다. 그래서 "max-width: 1366px;" 코드를 추가하였습니다. GNB 스크롤-바의 폭에 약간의 여분의 공간을 추가한 값이  1366px입니다. 미니 노트북의 기본적인 해상도입니다. 정확하게 중앙은 아닙니다. 본 블로그의 편집 프레임 구조에 맞는 형태입니다.

 

flex properties and syntax

 

1-value syntax

<number> / <width>

 

2-value syntax
<number>(flex-grow) + <number>(flex-shrink) / <value for width>(flex-basis)

 

/* Two values: flex-grow | flex-basis */
flex: 1 30px;

/* Two values: flex-grow | flex-shrink */
flex: 2 2;

 

3-value syntax
<number>(flex-grow) + <number>(flex-shrink) + <value for width>(flex-basis)

/* Three values: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;