[CSS] display: flex

1. display: flex는 해당 요소를 flex-container로 설정한다.

그리고 요소의 자식 요소를 flex-item으로 설정하며, 자손 요소는 포함되지 않는다.

 

2. 주축 (Main Axis)

가로를 기준으로 시작지점과 종료지점을 설정할 수 있다.

justify-content 속성을 이용한다.

 

3. 교차축 (Cross Axis)

세로를 기준으로 시작지점과 종료지점을 설정할 수 있다.

align-items 속성을 이용한다.

 

4. flex-direction

display: flex의 flex-direction 기본 값은 row이다.

column으로 설정하면 축은 반전된다.

flex-direction	수평	수직
row(default)	main (justify-content)	cross (align-items)
column	cross (align-items)	main (justify-content)

 

 

 브라우저 이슈

IE ~9 미지원

IE 10 -ms- prefix 필요

IE 11~ prefix 없이 지원가능