flex

flex Container

display, flex-flow(단축속성), flex-direction, flex-wrap, justify-content, align-content, align-items

 

display:flex

- flex아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼차지(inline요소들처럼)

height는 컨테이너의 높이만큼 늘어난다.

 

display:flex 와 display:inline-flex 차이

- flex : block요소와 같은 성향(수직쌓임) / inline-flex : inline요소와 같은 성향(수평쌓임)

- Container의 수직과 수평 쌓임의 차이 intes에 영향을 주지 않는다.

 

flex-flow (단축속성) 

- flex itens의 주축을 설정하고 items의 여러 줄 묶음도 설정 가능

.flex-container {
  flex-flow: row-reverse wrap;
}

flex-direction

- items의 주 축 설정

 

flex-wrap

items의 여러 줄 묶음(줄 바꿈) 설정

- nowrap : 모든 items를 여러 줄로 묶지 않음(한줄에 표시)

- wrap : items를 여러 줄로 묶음

- wrap-reverse : items를 wrap의 역 방향으로 여러 줄로 묶음

 

align-content

- 교차 축 정렬 flex-wrap속성을 통해 items가 여러줄이고 여백이 있을 경우에만 사용.

- items가 한 줄일 경우 align-items 속성 사용.

- flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬

stretch	            교차 축을 채우기 위해 Items를 늘림
flex-start	    Items를 시작점(flex-start)으로 정렬	
flex-end	    Items를 끝점(flex-end)으로 정렬	
center	            Items를 가운데 정렬	
space-between       시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨	
space-around	    Items를 균등한 여백을 포함하여 정렬

flex Items

order, flex(flex-grow,flex-shrink,flex-basis)단축속성, flex-grow, flex-shrink, flex-basis, align-self

 

order

- 아이템의 순서를 결정 order: 순서;

 

flex

- flex: 증가너비 감소너비 기본너비;

- Item의 너비(증가, 감소, 기본)를 설정하는 단축 속성

- flex : grow shrink basis 

- flex-grow를 제외한 개별 속성 생략가능 : flex:1 일경우 flex-grow:1과 동일 나머지는 flex-shrink:1, flex-basis:auto;

flex-basis의 기본값은 auto 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용 flex: 1; 혹은 flex: 1 1;은 flex: 1 1 0;

.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

flex-grow 

- item의 증가 너비 비율 설정 숫자가 크면 더 많은 너비 가진다. 

- flex-grow: 1, 2, 1 이라면 첫번째 item 은 총너비의 25% (1/4)  두번째item 은 총너비의 50% (2/4) 세번째 item 은 총너비의 25% (1/4)

- flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다

 

flex-shrink

-- item이 감소하는 너비의 비율 Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 

 

flex-basis

- Item의 (공간 배분 전) 기본 너비를 설정

- 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정

- flex 속성에서 설명한 것 같이 단축 속성 내에서 flex-basis를 생략하면 값이 0이 되는 것을 주의

align-self

- 교차 축(cross-axis)에서 개별 Item의 정렬 방법을 설정

- align-items는 Container 내 모든 Items의 정렬 방법을 설정

- align-items 속성보다 우선

 

참고: https://studiomeal.com/archives/197 / https://heropy.blog/2018/11/24/css-flexible-box/

https://codepen.io/kimjiwon506/pen/YzOLgoY