flex 기본

Taek·2020년 6월 13일
0
post-custom-banner

1. justify-content

flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
center : 요소들을 컨테이너의 가운데로 정렬
space-between : 요소들 사이에 동일한 간격을 둠
space-around : 요소들 주위에 동일한 간격을 둠


2. align-items

flex-start : 요소들을 컨테이너의 꼭대기로 정렬
flex-end : 요소들을 컨테이너의 바닥으로 정렬
center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬
baseline : 요소들을 컨테이너의 시작 위치에 정렬
stretch : 요소들을 컨테이너에 맞도록 늘림


3. flex-direction

row : 요소들을 텍스트의 방향과 동일하게 정렬
row-reverse : 요소들을 텍스트의 반대 방향으로 정렬
column : 요소들을 위에서 아래로 정렬
column-reverse : 요소들을 아래에서 위로 정렬


4. order

flex 요소간 Depth?


5. align-self

단일 align-items


6. flex-wrap

nowrap : 모든 요소들을 한 줄에 정렬
wrap : 요소들을 여러 줄에 걸쳐 정렬
wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬


7. flex-flow

flex-direction + flex-wrap


8. align-content

flex-start : 여러 줄들을 컨테이너의 꼭대기에 정렬
flex-end : 여러 줄들을 컨테이너의 바닥에 정렬
center : 여러 줄들을 세로선 상의 가운데에 정렬
space-between : 여러 줄들 사이에 동일한 간격을 둠
space-around : 여러 줄들 주위에 동일한 간격을 둠
stretch : 여러 줄들을 컨테이너에 맞도록 늘림

post-custom-banner

0개의 댓글