[CSS3] Flexible Box Layout

플렉스 컨테이너 자식을 어떤 방향으로 배치할 수 있고, 자식의 크기도 유연하게 표현할 수 있습니다. 

 

 

display: flex

부모 요소 컨테이너의 속성으로 지정하여, 자식 속성을 유연하게 만듭니다.

.container {
	display: flex;
    	background: gray;
}

 

flex-direction

컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

.container {
	display: flex;
    	flex-direction: row;
    	background: gray;
}

기본값	row
상속	NO
애니메이션	NO
버전	CSS3
Javascript syntax:	object.style.flexDirection='row'
css syntax	row | row-reverse | column | column-reverse | initial | inherit

* 접근성 고려사항

flex-direction 속성에 row-reverse 또는 column-reverse 값을 사용할 경우 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 이용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서가 중요하다고 해도 스크린 리더 사용자는 그 순서가 어떻게 되는 지 알수 없습니다. 

 

justify-content

컨테이너 아이템들을 메인 축에서 정렬시킵니다.

* space-between : 공간의 여백을 균일하게 잡아줍니다.

* space-around: 아이템 요소 주위에 여백을 균일하게 잡아줍니다. 

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
    	background: gray;
}

기본값	flex-start
상속	NO
애니메이션	NO
버전	CSS3
Javascript syntax:	object.style.justifyContent='space-between'
css syntax	flex-start| flex-end | center | space-between | space-around |  initial | inherit

 

align-items

메인 축의 수직방향으로 정렬 시킵니다.

* 기본 값이 stretch 임으로, 플렉스 컨테이너 자식 요소들의 부모 요소의 높이만큼 늘어나게 됩니다.

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    	background: gray;
}

기본값	stretch
상속	NO
애니메이션	NO
버전	CSS3
Javascript syntax:	object.style.alignItems='center'
css syntax	stretch| flex-end | center | space-between | space-around |  initial | inherit

 

---

플렉서블 컨테이너의 자식 아이템에 주는 속성

flex-grow

* width (너비) 를 비율로 나눠 가지는 것이 아니라, 자기 컨텐츠를 제외한 여백의 비율을 설정한다.

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    	background: gray;
}

.item {
	flex-grow: 1;
	border: 1px solid black;
	font-size: 1em;
    	background: #fff;
}

.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 4; }
.item:nth-child(3) { flex-grow: 1; }
.item:nth-child(4) { flex-grow: 3; }

기본값	0
상속	NO
애니메이션	YES
버전	CSS3
Javascript syntax:	object.style.flexGrow='5'
css syntax	0 | number | initial | inherit

 

flex-basis

* flex-grow로 지정하면 자기 컨텐츠를 제외한 여백을 계산해서 설정하므로 px로 나오는 디자인을 작업하기 어려움이 있습니다.

그럴 때 flex-basis 속성을 사용하면 컨텐츠가 차지하는 영역을 0으로 설정하여 원하는 여백을 설정할 수 있습니다.

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    	background: gray;
}

.item {
	flex-grow: 0;
    	flex-basis: 0;
	border: 1px solid black;
	font-size: 1em;
    	background: #fff;
}

기본값	auto
상속	NO
애니메이션	YES
버전	CSS3
Javascript syntax:	object.style.flexBasis='10px'
css syntax	auto | number | initial | inherit

 

flex-shrink

플렉스 아이템의 크기가 플렉스 컨테이너보다 크면 따라서 아이템이 축소됩니다.

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    	background: gray;
}

.item {
	flex-grow: 0;
    	flex-basis: 0;
        flex-shrink: 1;
	border: 1px solid black;
	font-size: 1em;
    	background: #fff;
}

기본값	1
상속	NO
애니메이션	YES
버전	CSS3
Javascript syntax:	object.style.flexShrink='2'
css syntax	1 | number | initial | inherit

 

축약형 flex

축약형인 flex: 1; 로 설정할 경우, flex-grow: 1 , flex-basis: 0%, flex-shrink: 1 로 자동 설정된다.

flex-basis의 경우 기본값이 auto인데 축약형으로 사용할 경우 자동으로 0을 잡아줌으로 사용하기 편리하다. 

.container {
	display: flex;
    	flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    	background: gray;
}

.item {
	flex: 1;
    // flex-grow: 1;
    // flex-basis: 0%;
    // flex-shrink: 1;
	border: 1px solid black;
	font-size: 1em;
    	background: #fff;
}