HTML & CSS #16 : Flex Box Layout

플렉스 박스 레이아웃 (Flex Box Layout)

Grid Layout을 기본으로, Flex Box를 원하는 위치에 배치하는 것

 

 display 속성

배치되는 요소들을 감싸는 부모요소를 플렉스 컨테이너로 지정

display: flex | inline-flex

속성값은 flex(플렉스 박스를 박스 레벨 요소로 정의), inline-flex(플렉스 박스를 인라인 레벨 요소로 정의)

 

flex-direction 속성

플렉스 항목 배치 방향을 지정

flex-direction: row | row-inverse | column | column-inverse

flex-direction: column; 으로 지정하면 세로방향을 쌓인다. (위->아래)

 

flex-wrap 속성 

플렉스 항목을 한 줄 또는 여러 줄로 배치하는 속성

flex-wrap: no-wrap | wrap | wrap-reverse

속성값 no-wrap은 플렉스 항목들을 한 줄에 표시하는 값으로 기본값이다.(한줄에 꾸겨 넣는다고 생각하면 된다.)

wrap은 여러 줄에 표시하는 속성값.

flex-wrap: wrap;

wrap-reverse는 여러 줄에 표시하되, 기존의 방향과 반대로 배치하는 것.

flex-wrap: wrap-reverse;

flex-flow 속성

플렉스 배치 방향과 여러 줄 배치를 한꺼번에 지정하는 속성

flex-flow: <플렉스방향> <플렉스줄배치>

기본값은 flex-flow: row no-wrap; 이다.

 

order 속성

플렉스 항목의 배치 순서 바꾸기

order 값에 지정된 순서에 따라 배치된다.

 

flex 속성

플렉스 항목의 크기를 조절하는 속성.

flex-grow, flex-shrink, flex-basis은 속성이지만, 대부분 flex속성으로 묶어서 사용한다.

flex: [<flex-grow> <flex-shrink> <flex-basis>] | auto | initial

flex-grow는 플렉스 항목의 너비를 얼마나 늘릴지 숫자로 지정

flex-shrink는 플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정

flex-basis는 플렉스 항목의 기본 크기 지정하는 속성값이다. 

#box1 {
	flex: 1 1 0;
}

#box2 {
	flex: 2 2 0;
}

#box3 {
	flex: 1 1 0;
}

스타일을 이렇게 설정하면

flex 속성

이렇게 박스들이 설정된다.

 

justify-content 속성

플렉스 항목을 주축 방향으로 배치할 때의 배치 기준

좌우 content 배치 조절!

justify-content: flex-start | flex-end | center | space-between | space-around

justify-content 속성

 

align-items, align-self 속성

교차축을 기준으로 하는 배치 방법

(상/하 중간 : align-items: center;)

align-items: stretch | flex-start | flex-end | center | baseline

align-self: auto | stretch | flex-start | flex-end | center | baseline

align-items, align-self 속성

 

align-content 속성

플렉스 항목이 여러 줄로 표시될 때

교차 축 기준의 배치 방법 지정

align-content: flex-start | flex-end | center | space-between | space-around

align-content 속성

align-content가 align-items보다 우선순위이다.

 

 

 

 

 

 

 

 

 

 

 

출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희)

사진 출처 : Pixabay