<container>
<item></item>
<item></item>
<item></item>
</container>
각 위치의 element가 포함하는 속성(property)
| container | item |
| display | order |
| flex-direction | flex-grow |
| flex-wrap | flex-shrink |
| flex-flow | flex-basis |
| justify-content | flex |
| align-items | align-self |
| align-content | - |
속성을 적용하기 전
1) container에 'display: flex;' 속성 주기2) container에 'flex-direction: row, column, row-reverse, column-reverse' 주기
기타 참고
1) item 선택하기L .item:nth-child(1) {
....
}
1. container 속성
flex-wrap:
L nowrap = 기본값, item이 container 크기에 맞춘다.
L wrap = 컨테이너보다 아이템들의 함이 크다면 줄바꿈이 된다.
L wrap-reverse = 그 반대순서
align-items:(모든 아이템 각각에 대해서 적용)
L flex-start = 각각 item의 크기를 갖게 되고, 시작점에 붙는다.
L flex-end = 각각 item의 크기를 갖게 되고, 끝점에 붙는다.
L center = 각각 item의 크기를 갖게 되고, 중간에 붙는다.
L baseline = 가상의 줄에 맞춰 정렬한다.
L stretch =기본값, direction 속성의 값에 따라 item들이 크기를 꽉 채운다.
justify-content:
L flex-start
L flex-end
L space-between
L center
L space-around
align-content:(아이템 그룹별로 적용)
L flex-start
L flex-end
L center
L space-between
L space-around
L stretch
2. item 속성
flex-basis:
L 해당 item의 기본 크기(direction 속성에 따라 결정)
align-self:
L auto, flex-start, flex-end, center, baseline, stretch
L align-items를 각각의 item에 적용할 때 사용
flex-grow:
L 각 엘리먼트에 x 값을 주면, 전체 아이템 n개에 대해서
컨테이너 공간을 x/n으로 나눠가짐
컨테이너 공간을 x/n으로 나눠가짐
flex-shrink:
L 각 엘리먼트에 x 값을 주면, 전체 아이템 n개에 대해서
컨테이너 공간이 item 크기보다 줄어들 때 공간에 대한 줄어듬의 부담을
x/n 만큼 나눠서 부담한다.
컨테이너 공간이 item 크기보다 줄어들 때 공간에 대한 줄어듬의 부담을
x/n 만큼 나눠서 부담한다.
flex:
L grow, shirink, basis 축약.
L .item { flex: flex-grow [flex-shrink] [flex-basis(%)]; }
L ex) .item { flex: 1 0 100% }
order:
L item의 순서를 바꾸고 싶을 때 쓴다.
L 문서상에서 element의 순서를 실제로 바꾸지 않더라도
화면에 표시되는 순서(위치)에 영향을 줄 수 있다.
댓글 없음:
댓글 쓰기