- display
flex 컨테이너 요소가 블록
inline-flex 컨테이너 요소가 인라인
* flex-flow
- flex-direction 아이템의 주축(*main-axis)을 설정
row 수평
row-reverse 수평 거꾸로
column 수직
column-reverse 수직 거꾸로
- flex-wrap 아이템의 줄바꿈을 설정
nowrap 여러줄로 묶지 않고 한줄로 표시(기본 설정 값이며 아이템에 지정한 값이 가변함)
wrap 여러줄로 묶음 (아이템에 지정한 값을 고정으로 가져감)
wrap-reverse 여러줄로 묶되 역방향으로
- justify-content 주축(main-asix)의 정렬방법을 설정
flex-start 아이템을 시작점(flex-start)으로 정렬(왼쪽 정렬)
flex-end 아이템을 끝(flex-end)으로 정렬(오른쪽 정렬)
center 아이템을 가운데 정렬
space-between 시작 아이템은 시작점, 마지막 아이템은 끝점에 정렬되고 나머지 아이템들은 사이에 고르게 정렬
space-around 아이템을 균등한 여백을 포함하여 정렬
- align-content 교차축의 정렬방법을 설정(주축이 변경될 경우 함께 변경됨)
*flex-wrap의 속성을 통해 items가 여러줄(2줄 이상)이고 여백이 있는 경우에만 사용 가능
stretch 교차축을 채우기 위해 items을 늘림(기본 설정)
flex-start 아이템을 시작점(flex-start)으로 정렬(왼쪽 정렬)
flex-end 아이템을 끝(flex-end)으로 정렬(오른쪽 정렬)
center 아이템을 가운데 정렬
space-between 시작 아이템은 시작점, 마지막 아이템은 끝점에 정렬되고 나머지 아이템들은 사이에 고르게 정렬
space-around 아이템을 균등한 여백을 포함하여 정렬
- align-items 교차축의 아이템의 정렬방법을 설정
* items이 한줄일 경우 사용 가능
stretch 교차축을 채우기 위해 items을 늘림(기본 설정)
flex-start 아이템을 시작점(flex-start)으로 정렬(왼쪽 정렬)
flex-end 아이템을 끝(flex-end)으로 정렬(오른쪽 정렬)
center 아이템을 가운데 정렬
baseline 아이템을 문자 기준선에 정렬
[참고]
main-axis 수평의 교차축
cross-axis 수직의 교차축
flex-start 시작점
flex-end 끝점
cross-start 교차축의 시작점
cross-end 교차축의 끝점
'css' 카테고리의 다른 글
| flex items 속성 - flex-grow (0) | 2020.07.08 |
|---|---|
| flex items 속성 - order (0) | 2020.07.08 |
| multi columns(다단) (0) | 2020.07.05 |
| animation (0) | 2020.07.05 |
| transform(변환 속성) (0) | 2020.07.04 |