<CSS> Flexbox 레이아웃 (1)

- Flexbox란?
CSS3의 새로운 레이아웃 방식으로, 비교적 최신 브라우저에서 사용이 가능하다. Flexbox 레이아웃을 이용하면 부모 태그 내 자식 태그들의 위치나 정렬 등의 레이아웃 설정을 보다 편리하게 할 수 있다는 장점이 있다.


- Flexbox 레이아웃 구성
크게 flex container라는 부모 요소가 있고, 이 내부에 flex item이라 불리는 자식 요소들이 위치한 형태로 구성된다. 이러한 관계를 갖고 있기 때문에, Flexbox를 사용하려면 부모 요소에 display 속성의 값을 flex로 먼저 설정한 후 사용할 수 있다. 혹은 부모 요소가 inline이면 inline-flex로 display 속성의 값을 설정해주면 된다.

 

구성은 flex container과 flex item들이 있으며, 정렬은 주축(main axis)과 주축의 반대축인 교차축(cross axis) 두 가지를 기준으로 정렬한다.


- Flexbox container 속성의 종류

1. 부모 요소 flex container

부모 요소인 flex container를 정렬할 수 있는 속성에는 여러가지가 있는데, 다음과 같다.

1) flex-direction
flex 컨테이너의 주축 방향을 설정한다.
*row : 좌에서 우로 수평 정렬
*row-reverse : 우에서 좌로 수평 정렬
*column : 위에서 아래로 수직 정렬
*column-reverse : 아래에서 위로 수직 정렬

2) flex-wrap

자식 요소인 flex item이 다수일 때 1행 또는 복수행으로 배치한다.

*nowrap : 1줄로 배열되며, flex item들은 부모 요소인 flex container의 크기에 맞게 자동 축소. 다만 flex item들의 width를 합한 길이가 flex container의 길이보다 길 경우 넘치게 되는데 이 때 overflow: auto를 설정하면 가로 스크롤과 함께 넘치지 않음

*wrap : nowrap과 다르게 flex item들의 width 길이 합계가 flex container보다 길면 위에서 아래의 순서로 다수의 줄로 배치

*wrap-reverse : wrap과 비슷하나, 순서가 아래에서 위로 배치

 

3) flex-flow

전체적인 flex container에 flex-direction과 flex-wrap 속성을 부여하기 위한 속성이다. 기본값은 flex-direction은 row, flex-wrap은 nowrap으로 설정된다.

 

4) justify-content

flex container의 메인축을 기준으로 flex item의 정렬 방향을 결정한다.

*flex-start : 기본값. 주축의 시작점을 기준으로 정렬

*flex-end : 주축의 시작점을 우측을 기준으로 정렬

*center : 주축의 중앙에 정렬

*space-between : flex-item들을 균등한 간격을 두고 배치(양 끝의 flex-item은 좌우 끝에 배치)

*space-around : flex-item들을 모두 균등한 간격으로 배치

 

5) align-items

flex item들을 수직 방향으로 정렬한다. 모든 flex item들에게 적용된다.

*stretch : 기본값. flex container의 height 길이에 맞게 바뀌어 정렬(flex container의 height에 꽉차게)

*flex-start : flex container의 교차축이 시작되는 지점을 기준으로 정렬

*flex-end : flex container 교차축이 끝이 나는 지점을 기준으로 정렬

*center : 교차죽의 중앙에 정렬

*baseline : 폰트의 받침선(baseline)을 기준으로 정렬

 

6) align-content

flex item들이 한 줄이 아닌 다수의 줄일 때, flex container의 교차축을 기준으로 flex item들을 정렬한다.

*flex-start : 기본값. 교차축의 시작점을 기준으로 정렬

*flex-end : 교차축의 시작점을 우측을 기준으로 정렬

*center : 교차축의 중앙에 정렬

*space-between : flex-item들을 균등한 간격을 두고 배치(양 끝의 flex-item은 좌우 끝에 배치)

*space-around : flex-item들을 모두 균등한 간격으로 배치

 

 

 

참고 : poiemaweb 웹사이트