Flex Items

 이전 글 참고하며...

2021.04.14 - [개발노트/CSS] - Flex

Flex

 

Flex Items

Flex Items를 위한 속성들은 다음과 같습니다.

 

• oreder : Flex Item의 순서를 설정
  •  숫자로 Item의 순서를 설정을 합니다. ex> order : 1, -1, 0 (음수 설정도 가능합니다)
  • 숫자가 클수록 뒤로 밀립니다.
• flex  : flex-grow, flex-shrink, flex-basis의 단축 속성
  • Item의 너비(증가, 감소, 기본) 비율을 조정합니다. 
  • flex : 1는 flex : 1 1; 과 flex : 1 1 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-grow : Flex Item의 증가 너비 비율 조정
  • Item의 증가너비 비율을 설정합니다. 숫자가 크면 더 많은 너비를 가지며, 0인 경우 효과가 없습니다.
  • Item의 각 비중이 1,2,1 이면, 25%/50%/25% 비율로 증가하게 됩니다.
• flex-shrink : Flex Item의 감소 너비 비율 조정
  • Item이 감소하는 너비의 비율을 설정합니다. 숫자가 크면, 더 많은 너비가 감소합니다. 0 인 경우 효과가 없습니다.
  • 감소 너비는 계산하기 어렵습니다. 너비 영향을 많이 받기 때문에 width, height, flex-basis 등으로 너비가 지정된 경우를 의미합니다. Container의 너비가 줄어 Items의 너비에 영향을 미칠 경우, 영향을 미치기 시작한 지점부터 줄어든 거리만큼 감소 너비 비율에 맞게 Item의 너비가 줄어듭니다.
  • ItemA과 ItemB 2와 1이라면, 200*2=400 , 200 *1 = 200 비율은 2:1 이며, 90px을 줄이면 2/3만큼 60px감소하고, 1/3인 30px 만큼 감소합니다.

.itemA{
  flex-basis : 200px;
  flex-shrik : 2;
}

.itemB{
  flex-basis : 200px;
  flex-shrik : 1;
}

• flex-basis : Flex Item의 기본 너비 설정 
  • 값이 auto일 경우 width, height 등의 속성으로 Item의 너비를 설정 할수 있습니다.
  • 단, 단위 값이 주어지는 경우 설정할 수 없습니다.
•  align-self : cross-axis에서 Item의 정렬 방법을 설정
  • 교차축(cross-axis)에서 개별 Items의 정렬 방법을 설정합니다.
  • 필요에 의해서 일부 Items 정렬방법을 변경 하려는 경우 align-self를 사용합니다.
  • 이 속성은 align-items 속성보다 우선합니다.
    • auto : Container의 align-items 속성을 상속받음
    • stretch : Container의 교차 축을 채우기 위해 Item을 늘림.
    • flex-start : Items을 각 줄의 시작점(flex-start)으로 정렬.
    • flex-end : Items을 각 줄의 끝점(flex-end)으로 정렬.
    • center :  Items을 가운데 정렬
    • baseline : items을 문자 기준선에 정렬