[CSS3] display : flex ① Flex 컨테이너에 적용되는 속성들

  반응형 웹페이지를 만들기 위해선, 박스모델들의 너비 비율을 유지한 채 박스모델들을 한 줄로 정렬하는 작업이 필수적이다. 그러나 이는 position이나 float로 처리하기 꽤나 까다롭다. (원래 그러한 목적으로 만들어진 기능들도 아니다. float의 경우, 이미지 주변에 글귀들을 두기 위해 사용되는 속성이다. 또한 Position의 경우, HTML 요소에 차원을 부여하고 위치를 지정하기 위해 생성된 기능이다) 

물론 inline-block을 써도 화면과 같이 작업할 수 있다. 그러나 반응형으로 만든다면 이야기는 달라진다. 

 

 이럴 때 아주 유용하게 쓸 수 있는 기능이 있는데, 바로, display : flex이다!! 다만, 비교적 최근에 나온 기능이라 크로스 브라우징을 고려했을 때 고민하는 분들이 더러 있을 것 같다. 그러나 거의 모든 브라우저는 display : flex를 지원한다. (뿐만 아니라, align-content & justify-content 등등 여러 기능들도 함께 지원한다. 

 

IE 6-9를 제외하곤 거의 지원된다고 보면 된다. align-items에 들어가는 속성 중, 적용 안되는 값들도 있으니 잘 살펴보자. 

 

display : flex가 지정된 박스 모델은 기본축(main axis)과 교차축(cross axis)을 기준으로 정렬된다.

 

 우리가 Container에 flex를 지정하면 다음과 같이 Flex container 안의 Flex item들이 정렬되는 것을 볼 수 있다. 컨테이너의 너비가 줄어들 때, 각각의 아이템들의 너비도 같은 비율로 줄어드는 것을 알 수 있다. 기본 값은 다음과 같이 적용되며, 이 값들을 변경해주는 요소들에 대해 더 이야기해보자. 

 

See the Pen flex-box by joonho lee (@goldycoder) on CodePen.

 

기본축 방향 변경 ( flex-direction )

 우리가 앞서 보았듯, 아이템들이 행(row)을 기준으로 정렬된 것을 알 수 있다. 이는 flex를 적용할 때, flex-direction 요소의 기본 값이 row로 적용됐기 때문이다. 기본축을 열(column)으로 바꾸려면, flex-direction : coulmn을 사용하면 된다. (그 외, row-reverse와 column-reverse를 사용하면 역방향으로 배치할 수도 있다)

 

줄바꿈 ( flex-wrap ) 

  컨테이너의 너비를 줄이면, 아이템의 너비도 줄어든다고 했다. 이는 flex-wrap의 기본 값이 nowrap으로 적용됐기 때문이다. 아이템에 적용된 너비보다 컨테이너의 화면이 더 작아질 경우, 다음과 같이 줄바뀜 현상이 발생한다 (이는 display : inline-block을 적용했을 때에도 살펴볼 수 있다) 

 

기본축을 기준으로 정렬 ( justify-content )

  이 요소는 우리가 이미 알고 있는 float과 기능이 유사하다. 값을 오른쪽/왼쪽/가운데 등으로 정렬한 것이기 때문이다. 기본 설정 값인 'justify-content : flex-start'을 쓰면 우리가 float: left를 쓴 것처럼 컨테이너 왼쪽(기본축이 시작하는 위치)으로 값이 정렬되며, flex-end를 쓰면 오른쪽(기본축이 끝나는 위치)으로 정렬된다. center를 쓰면 가운데(기본 축의 가운데)로 정렬된다. 또한 축을 활용한다는 점에서 flex-direction과 유사하나, flex-direction처럼 축이 변화되는 것은 아니라는 점에서 다르다. 

 

교차축을 기준으로 정렬 ( align-items )

 이 요소는 교차축을 기준으로 아이템들의 정렬에 영향을 준다. 예를 들어, center를 지정하면 아이템들이 컨테이너의 가운데로 정렬된다. 우리가 CSS로 line-height를 지정해준 것과 비슷한 효과이다. start는 justify-content의 flex-start 값과 동일한 효과를 준다. end도 마찬가지이다. 그 외 baseline을 지정하면, 텍스트가 위치한 위치를 기준으로 박스들을 정렬하는 효과를 준다. 또한 교차축을 기준으로 여러 행 정렬을 정렬하려면 align-content를 쓰면 된다. 

 

 

내용출처 및 참고 사이트

 

크로스 브라우징 체크 사이트

Can I use... Support tables for HTML5, CSS3, etc

CSS Flex-box 레이아웃

Flexbox

CSS Flex-box

 

1분코딩 Flex-box

이번에야말로 CSS Flex를 익혀보자