플렉서블 박스 flexible box 레이아웃

1.플렉서블 박스 = 플렉스(flex) 박스라고도 부른다.

 

2.CSS3에서 처음 소개된 레이아웃 모델

 

3.주요개념

- flex-direction : 플렉스 컨테이너 안에서 플렉스 요소가 배치될 방향 설정

1) row : 기본설정 / 왼쪽에서 오른쪽으로

2) row-reverse : row의 반대 / 오른쪽에서 왼쪽으로

3) column : 위쪽에서 아래쪽으로

4) column-reverse : column의 반대 / 아래쪽에서 위쪽으로

 

- justify-content : 플렉스 요소의 수평 방향 정렬 방식 설정

 

- align-items : 플렉스 요소의 수직 방향 정렬 방식 설정

 

- flex-wrap : 플렉스 라인에 더 이상의 여유 공간이 없을 때, 플렉스 요소 위치를 다음 줄로 넘길지 여부 결정

 

*참고사이트

https://ipex.tistory.com/entry/CSS3-flex-Box-flexdirection-%EC%83%9D%EC%84%B1-%EB%B0%A9%ED%96%A5
http://www.tcpschool.com/css/css3_expand_flexbox