Flex - 자식요소 속성

🍫 flex

• 플렉스 자식요소의 너비를 상대적으로 설정해주는 속성이다.
• flex-grow , flex-shrink , flex-basis 를 한번에 지정할 수 있는 축약형 속성이다.
  

🍫 flex-grow

• 부모요소에 여분의 공간이 남아있다면 해당 자식요소를 확장할 건지 설정한다.
• default 값은 0이다.
  ex)
  자식요소가 3개이고 flex-gorw를 1 , 2 , 1을 주었다면
  비율에 따라 25% ( 1 / 4 ) , 50% ( 2 / 4 ), 25% ( 1 / 4 ) 의 너비를 배정한다.

// flex 속성에 숫자하나만 쓰면 flex-grow 값으로 할당된다.

.child1 {
  background-color : red;
  flex : 1;
}
.child2 {
  background-color : green;
  flex : 2;
}
.child3 {
  background-color : blue;
  flex : 1;
}

🍫 flex-shrink

• 플렉스 자식요소의 감소 너비 비율을 설정한다.
• default 값은 1

사실, flex-grow 같은 경우에는 grow를 준 값을 더한 다음 숫자에 맞게 배분해야 해서 직관적으로 이해하기 쉬웠지만,
이 flex-shrink 는 요소의 너비, 높이의 영향을 받아 계산이 조금 복잡해서 이해가 가지 않았었다.
활용도가 높지 않다고 하기는 하지만, 뭔가 찜찜해서 어떻게 계산되는지 열심히 서치해본 결과
정리가 잘된 자료를 찾아냈다 ! (감사합니다 ㅠ)

< 출처 : parkoon님의 블로그 원문 >

위 첫번째 그림의 예시에서 flex-basis 값을 각각 100px, 200px로 가정하고 있다.
이 상태에서 90px가 줄어들 때 각각의 자식요소를 얼마나 줄일지 계산한다.
먼저, 줄어들 비율을 정해야 하는데, flex-basis의 값과 flex-shrink 값을 곱한다.

곱셈 결과 100 대 400으로 1 : 4 비율을 가진다.

여기서 줄어든 길이(90px)를 1:4 비율로 나누면 된다.

90 x ( 1 / 5 ) 와 90 x ( 4 / 5 )

따라서 90px를 줄일 때 왼쪽 주황색 박스는 18px만큼 줄이고,
오른쪽 보라색 박스는 72px 만큼 줄이게 된다.

🍫 flex-basis

• 플렉스 자식요소의 공간 배분 전 기본 너비 설정
• default 값은 flex-basis : auto;
• 플렉스에서 사용하는 width 값이라고 생각해도 크게 무리가 없을 듯 하다.

.child1 {
  background-color : red;
  flex-basis : 100px;
}
.child2 {
  background-color : green;
  flex-basis : 200px;
}
.child3 {
  background-color : blue;
  flex-basis : 300px;
}

• 이처럼 작성하면 각 박스가 지정한 flex-basis 만큼 너비값을 가진다.
• 다만 flex-grow속성을 0보다 큰 정수로 설정하면 flex-basis로 지정한 값을 보장할 수 없게 된다. ( flex-grow는 남는 여백을 채우려고 하기 때문이다.)

🍫 order

• 플렉스 자식요소의 순서를 설정한다.
• order 속성은 0이상의 정수, 기본값이 0이기 때문에 order을 주지 않으면 첫번째에 배치된다.
  
  이 그림에서 아래처럼 flex 자식요소에 order 속성을 주게 되면

.child1 {
  background-color : red;
  order : 3;
}
.child2 {
  background-color : green;
  order : 2;
}
.child3 {
  background-color : blue;
  order : 1;
}

이와 같이 자식요소의 배치순서가 변경된다.

🍫 align-self

• 부모요소에 사용하는 align-items 와 별개로 개별 자식요소들의 수직배치를 변경한다.

.parent {
  align-itmes : center;
}

.child1 {
  background-color : red;
  align-self : flex-start;
}
.child2 {
  background-color : red;
}
.child3 {
  background-color : red;
  align-self : flex-end;
}

위와 같이 부모요소 parent 에 align-items : center; 가 적용되어 있지만,
child 1과 child 3에는 각각 align-self 값을 따로 줘서 개별적으로 위치를 조정할 수 있는 것이다.

🍫 margin

• margin 속성을 auto로 설정해서 타 요소를 반대방향으로 밀어내어 왼쪽 끝 또는 오른쪽 끝으로 배치하는 방법이다.
• 엄밀히 말하면 flex의 속성은 아니고, 약간 편법(?) 같은 느낌이다.

무슨말인지 내가 적어놓고도 이해가 안가니, 예시를 보자..

요런 3개의 flex 자식요소가 있다고 치자.여기서, child1 에 margin-right : auto 속성을 준다.

.child1 {
  background-color : red;
  margin-right : auto;
}
.child2 {
  background-color : red;
}
.child3 {
  background-color : red;
}

그러면 child 1 의 오른쪽 마진을 자동으로 끝으로 밀어낸다.
이번엔 모든 자식요소에 margin : auto 를 줘보자.

.child1 {
  background-color : red;
  margin: auto;
}
.child2 {
  background-color : red;
  margin: auto;
}
.child3 {
  background-color : red;
  margin: auto;
}

각각의 자식요소가 왼쪽 / 오른쪽을 기준으로 똑같은 간격만큼 밀어내게 된다.

사실 이 경우에는 부모요소에 justify-content : space-around 를 쓰면 된다.

하지만 개별 자식요소를 한쪽 끝으로 밀어내는 첫번째 케이스 같은 경우에는 종종 유용할 것 같다는 생각은\ 든다.