내가 헷갈렸던 내용들 요약
Container - flex-wrap, flex-flow(shorthand)
flex-wrap : flex-item 요소들이 강제로 한줄에 배치되게 할 것 인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현할 것 인지 결정
값
nowrap : 기본값으로 컨테이너 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치
시작점은 flex-direction에 의해 결정된 방향
wrap : flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐 배치
시작점은 nowrap과 같음
일반적으로는 위에서 아래로 쌓이는 순서
wrap-reverse : wrap과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치
flex-flow 는 flex-direction, flex-wrap의 단축속성
→ flex-flow: row-reverse wrap;
순서는 관련 없다.
Item - flex-grow
flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언
flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 된다.
- 기본값은 0인데 공간이 늘어나지 말라는 말이다.
- 할당(수용)이 가능한 공간이 있다면, 나눠서 가질 수 있다는 말
만약에 1, 2, 3이 있는데
.item:nth-child(2) {
flex-grow: 2;
}
.item:nth-child(3) {
flex-grow: 1;
}을 주게되면 남은 공간을 3개로 나누어서 2에는 공간2만큼을 더, 3에게는 공간1만큼을 더 준다.
flex-grow가 없는 1은 원래의 크기를 지킨다.
→ 헤더같은 걸 만들 때 유용할 수 있다.
Item - flex-shrink
flex-shrink는 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink를 사용하는데, 설정된 숫자 값에 따라 flex-item 요소 크기가 축소된다.
- flex-grow와의 차이점으로 grow는 늘어나는데 비해, shrink는 줄어든다.
- 기본값이 1이기 때문에, 크기가 자동으로 1:1 비율로 줄어든다.
- 0일 때는 무조건 그 크기를 지킨다.
만약에 1, 2, 3이 있는데
.item:nth-child(1) {
flex-shrink: 0;
}
.item:nth-child(3) {
flex-shrink: 2;
}을 주게되면 줄어드는 공간을 3개로 나눠서, flex-shrink가 0 인 1 은 크기를 지키고 남은 2, 3이 줄어드는 크기를 비율에 맞춰서 가져가며 줄어든다.
→ grow와 반대 개념으로 생각하면 쉽다.
CSS에서는 FLEX가 매우 중요한 메서드 같다.
미션 수행 중 하나의 큰 틀부터, 작은 요소들까지 flex로 묶어 활용하고 있는데 어떤 속성을 사용하느냐에 따라서 요소들의 위치들이 시시각각 변하고 있다.
그것들을 잘 파악해서 디자인하는데 적용하는데에 익숙해져야겠다!
