🍫 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 를 쓰면 된다.
하지만 개별 자식요소를 한쪽 끝으로 밀어내는 첫번째 케이스 같은 경우에는 종종 유용할 것 같다는 생각은\ 든다.
