플렉스 박스

display

플렉스 박스 레이아웃을 만드려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어야한다.
즉, 배치할 웹 요소가 있다면 그 요소를 감싸는 부모 요소를 만들고, 그 부모 요소를 컨테이너로 만들어야 한다. 이때, 부모 요소를 플렉스 컨테이너로 동작시키려면 display 속성을 이용해 이 부분에 플렉스 박스 레이아웃을 적용하겠다고 지정해야 한다.

display의 속성값

• flex : 컨테이너 안의 플렉스 항목을 '블록 레벨 요소'로 배치한다.
• inline-flex : 컨테이너 안의 플렉스 항목을 '인라인 레벨 요소'로 배치한다.

flex-direction

플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성이다.

flex-direction의 속성

• row : 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치한다. (기본값)
• row-reverse : 주축을 가로로 지정하고 오른쪽에서 왼쪽으로 배치한다.
• column : 주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치한다.
• column-reverse : 주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치한다.

flex-wrap

플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정하는 속성이다.

flex-wrap의 속성

• nowrap : 플렉스 항목을 한 줄에 표시한다. (기본값)
• wrap : 플렉스 항목을 여러 줄에 표시한다.
• wrap-reverse : 플렉스 항목을 여러 줄에 표시한다. 그리고 시작점과 끝점을 바꾼다.

flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정할 수 있는 속성이다. 기본값은 row nowrap이다.

<style>
#opt1 {
	flex-direction : row-reverse;
    flex-wrarp : wrap;
}
</style>
=
<style>
#opt1 {
	flex-flow : row-reverse wrap;
}
</style>

justify-content

'주축'에서의 플렉스 항목 간의 정렬 방법을 지정한다.

justify-content의 속성값

• flex-start : 주축의 시작점에 맞춰 배치한다.
• flex-end : 주축의 끝점에 맞춰 배치한다.
• center : 주축의 중앙에 맞춰 배치한다.
• space-between : 주축의 시작점과 끝점에 항목을 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
• space-around : 모든 항목을 주축에 같은 간격으로 배치한다.

align-items

'교차축'을 기준으로 플렉스 항목 전부를 정렬한다.

align-items의 속성값

• flex-start : 교차축의 시작점에 맞춰 배치한다.
• flex-end : 교차축의 끝점에 맞춰 배치한다.
• center : 교차축의 중앙에 맞춰 배치한다.
• baseline : 교차축의 문자 기준선에 맞춰 배치한다.
• stretch : 플렉스 항목을 늘려 교차축에 가득 차게 한다. (height 100vh처럼)

align-self

'교차축'을 기준으로 특정 항목만 정렬한다.

align-self의 속성값

• flex-start : 교차축의 시작점에 맞춰 배치한다.
• flex-end : 교차축의 끝점에 맞춰 배치한다.
• center : 교차축의 중앙에 맞춰 배치한다.
• baseline : 교차축의 문자 기준선에 맞춰 배치한다.
• stretch : 플렉스 항목을 늘려 교차축에 가득 차게 한다. (height 100vh처럼)

align-content

주축에서 줄 바꿈이 생겨 플렉스 항목이 여러 줄로 표시될 때 align-content 속성을 사용하여 교차축에서 플렉스 항목 간의 간격을 지정할 수 있다.

align-content의 속성값

• flex-start : 교차축의 시작점에 맞춰 배치한다.
• flex-end : 교차축의 끝점에 맞춰 배치한다.
• center : 교차축의 중앙에 맞춰 배치한다.
• space-between : 교차축의 시작점과 끝점에 항목을 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치한다.
• space-around : 모든 항목을 교차축에 같은 간격으로 배치한다.
• stretch : 플렉스 항목을 늘려 교차축에 가득 차게 한다. (height 100vh처럼)

플렉스 레이아웃을 활용해 중앙에 표시하는법
<style>
#center {
	display : flex;
    justify-content : center;
    align-items : center;
    min-height : 100vh;
}
</style>

• flex스타일 속성 중 align-items | align-content 분별하기