Flexbox

Display Property

display의 프로퍼티는 레이아웃 정의에 사용되는 아주 중요한 프로퍼티이다.

해당 프로퍼티에 속하는 키워드는 다음과 같다.

flex 프로퍼티 키워드	설명
block	-새로운 라인에서 시작한다 -width: 100%, height: auto (default) -width, height, margin, padding 프로퍼티 지정이 가능하다.
inline	-다른 요소들과 같은 행에 위치한다 -width, height, margin등의 프로퍼티를 저정할 수 없다. -content의 너비만큼 가로폭을 차지한다.
line-block	inline 요소와 같이 한 줄에 표현되면서 width, height, margin과 같은 프로퍼티를 설정할 수 있다.

display 프로퍼티는 상속되지 않는다.

 

Flexbox

flexbox는 모던 웹을 위해 제안된 새로운 형태의 layout이다.

flexbox는 요소의 사이즈가 불명확하거나 동적으로 변화하여도 유연한 레이아웃을 가능하게 한다.

 

수평으로 나열되는 요소에 대해 생각해보자

기본 display property의 keyword는 block이기 때문에 수직방향으로 나열된다. 기존의 display layout방식으로 수평정렬을 구현하기 위해서는 inline, inline-block, float등의 키워드를 사용해야 하고 위의 키워드를 사용할 경우 더 복잡한 설정이 요구된다. 이 때 flexbox의 장점이 드러나는데 flexbox의 장점을 나열하자면 다음과 같다

 

• 한 줄의 코드로 수평 정렬이 가능하다
• 요소의 정렬 방향, 순서 전환이 간단하다
• 요소간 간격 조절이 가능하다

IE 8,9의 경우에 flexbox의 지원이 안되니 사용에 주의가 요구된다. 만약 꼭 사용해야 할 경우에는 flexibility.js를 사용하도록 하자.

(인터넷익스플로어.. 이제는 손절하자..)

 

flexbox 레이아웃은 부모 요소 flex-container 안에 flex item이 포함되어 있는 형태로 구성된다. flexbox를 부여하기 위해 부모요소의 display property에 flex 또는 inline-flex 키워드를 부여해준다.

 

다음으로 flexbox froggy사이트를 이용하여 flexbox에 대한 연습을 해보자.

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

justify-content

justifu-content는 행을 기준으로 요소들을 정렬한다. justify-content의 키워드는 다음과 같다.

• flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
• flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
• center: 요소들을 컨테이너의 가운데로 정렬한다.
• space-between: 요소들 사이에 동일한 간격을 두고 정렬한다.
• space-around: 요소들 주위에 동일한 간격을 두고 정렬한다.

align-items

align-items는 열을 기준으로 요소들을 정렬한다. align-items의 키워드는 다음과 같다.

• flex-start: 요소들을 컨테이너의 꼭대기에 정렬한다.
• flex-end: 요소들을 컨테이너의 바닥에 정렬한다.
• center: 요소들을 컨테이너의 세로선 상의 가운데에 정렬한다.
• baseline: 요소들을 컨테이너의 시작 위치에 정렬한다.
• stretch: 요소들을 컨테이너에 맞도록 늘린다.

flex-direction

flex-direction는 정렬방향에 대한 프로퍼티이다. flex-direction의 키워드는 다음과 같다.

flex-direction이 reverse인 경우 다른 정렬 키워드도 반대로 적용되니 주의하자.

• row: 요소들을 텍스트의 방향과 동일하게 정렬한다.
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬한다.
• column: 요소들을 위에서 아래로 정렬한다.
• column-reverse: 요소들을 아래에서 위로 정렬한다. 

flex-wrap

하나의 열 또는 행에 너무 많은 요소가 몰린 경우 flex-warp을 통해 간격을 조절하고 넘치는 요소들을 다음 열 또는 행으로 개행하도록 하는 프로퍼티다. 키워드는 다음과 같다.

• nonwrap: defualt이며 모든 요소를 한 줄에 정렬한다.
• wrap: 요소들을 여러 줄에 걸쳐 정렬한다.
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬한다.

flex-flow

flex-direction과 flex-wrap은 자주 같이 사용되기 때문에 flex-flow로 대신할 수 있다. 이 프로퍼티는 공백문자를 이용하여 두 속성의 값들을 인자로 받는다. 예를 들어 flex-direction의 row와 flex-wrap의 warp을 함께 사용하고 싶다면

flex-flow: row wrap과 같이 사용할 수 있다.

 

align-content

flex-wrap으로 인해 다음 줄로 개행될 때 줄간 간격이 발생한다. 이러한 간격을 조작하기 위해서 align-content를 사용한다.