Flex-box: css3 layout방식, 요소의 크기와 순서를 유연하게 배치가능, Flex container 와 flex item으로 구성
Flex container: 전체적인 정렬이나 흐름
- display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
Flex item: 요소의 크기나 순서
- order, flex-grow, flex-shrink, flex-basis, align-self, flex,
기본방향: 좌->우 또는 상->하 (이럴때 기준이 되는 축을 main, 반대편을 cross로 본다)
사용방법은 부모(컨테이너)에서 속성으로 display: flex;
container
flex-direction: 기본 배열 방향
- row // 왼쪽부터 순서대로 (디폴트)
- row -reverse // 반대로
- column // 위에서부터 순서대로
- column-reverse // 반대로
flex-wrap: 컨텐츠가 라인에 찼을때 행동
- nowrap // 접지않음 (디폴트)
- wrap // 아이템이 라인에 꽉차면 라인을 넘긴다.
- wrap-reverse // 반대로 랩핑된다
flex-flow: flex-direction과 flex-wrap를 한번에 묶어서 할때
- flex-flow: column nowrap;
justify-content: 중심축 정렬
- flex-start // 기본값, 시작점(좌측, 상단)정렬
- flex-end // 반대편(우측,하단)정렬
- center // 중앙정렬
- space-around // 양쪽에 일정스페이스를 가지고 자리를 차지함. 따라서 양끝단은 스페이스가 절반정도
- space-evenly // 모든공백이 일정사이즈
- space-between // 양끝단은 붙고, 나머지는 일정사이즈
- stretch: 여러줄들을 컨테이너에 맞게 늘림
align-items: 반대축 정렬
- center // 중앙정렬
- flex-start // 시작점 정렬
- flex-end // 긑정렬
- baseline // 각 아이템의 중심으로 모든 아이템 정렬
align-content: 반대축 속성 지정 (wrap에 반응)
- justify-content의 속성들 사용
- flex-start, flex-end
- center: 중앙정렬
- space-around // 양쪽에 일정스페이스를 가지고 자리를 차지함. 따라서 양끝단은 스페이스가 절반정도
- space-evenly // 모든공백이 일정사이즈
- space-between // 양끝단은 붙고, 나머지는 일정사이즈
item
order: 순서결정 (디폴트 0 => 맨처음이 아닌 원래 자리값. 여러 item중 하나만 1로 지정하면, 나머지는 모두 순서가 0이기에 지정된것만 마지막으로 간다. 따라서 굳이 지정하려면 모든 아이템 같이 해주는게 맞음)
- -2,-1,1,2,3,…
flex-grow: 아이템이 그 공간을 다 채우려함, 0(디폴트), 값있는것들은 그공간을 맞추기위해 그만큼 커지다 일정 크기되면 다른것과 같아짐
- 1,2,…
flex-shrink: 컨테이너가 작아질때 행동, 0(디폴트), 2이면 2배 작게 작아짐
- 1,2,3…
flex-basis: 아이템이 공간을 차지하는 것을 설정, 나눠서 차지하게 함, auto(디폴트), grow나 shrink 사용하지않고 사용함
- 30%, 50%, 20%
align-self: 개별적용align-items보다 우선적용, 요소마다 다른 align속성값적용
- center, flex-end….