FlexBox

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….