CSS3 - flex (positioning)

https://beautifulcss.com/archives/2812

Beautiful CSS » 포지셔닝 : Flexbox

 

-Flexbox로 레이아웃을 잡으면 모바일을 포함한 하이브리드 앱으로 만들때도 별도의 추가작업이 필요하지 않음.

 

Flexbox는, 유연한 요소(내용물)

그리고 그 요소를 담을 그릇으로 이루어짐.

 

 

1. 그릇에 해당하는 부모 요소(=컨테이너) 에 display: flex 를 입력해주어

flexbox임을 선언함.

 

2. 자식요소를 어떻게 배열할지 (방향성) flex-direction을 입력해줌.

 

row	수평방향(행. 가로) / 좌-우
row-reverse	수평방향(행. 가로) / 우-좌
column	수직방향(열. 세로) / 상-하
column-reverse	수직방향(열. 세로) / 하-상

 

3. 자식요소를 감싸주는 wrap의 여부를 flex-wrap으로. (아이템의 줄 넘김)

 

nowrap	default 값. 한줄에 모든 아이템 나타냄.
wrap	한줄 이상으로 길다면, 다음줄로 나타냄. (복수의 줄로 나타냄)
wrap-reverse	wrap과 같은데, 다음줄로 넘어가는게 아니라 이전 줄로 올라감.

 

4. 아이템간의 여백 or 정렬을 설정해주는 jusify-content

 

flex-start	아이템을 한 덩어리로 묶어, 수평방향 시작 점에 위치시킴
flex-enter	아이템을 한 덩어리로 묶어, 수평방향의 끝 점에 위치시킴
center	아이템을 한 덩어리로 묶어, 수평방향의 중앙에 위치시킴
space-between	아이템을 컨테이너의 양쪽 끝에 맞춰 정렬
space-around	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

 

 

5. 수직방향으로의 정렬을 설정해주는 align-items

 

** justify-content의 수직버전이라 생각하면 쉽다.

flex-start	아이템을 한 덩어리로 묶어, 수직방향의 시작 점에 위치
flex-enter	아이템을 한 덩어리로 묶어, 수직방향의 끝 점에 위치
center	아이템을 한 덩어리로 묶어, 수직방향의 중앙에 위치
baseline	아이템을 컨테이너의 baseline에 맞춰 정렬
stretch	컨테이너의 양쪽 끝을 기준으로 각 아이템의 전, 후에 일정한 간격의 공간을 만들어 정렬

baseline 정렬 / cr. https://beautifulcss.com/archives/