-
[Day 14]CSS Flex 2 (-basis, -grow, -shrink)TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 15. 23:22SMALL
1. flex-basis
말 그대로 basic하게 기본값을 정할 때 사용하며,
자식 요소에 사용한다.
width와 height와 다른 점은 axis 방향에 따라 달라지며, 안에 컨텐츠에 따라 크기가 유연하게 바뀐다는 점이다.
기본 디폴트는 auto이다.(이 경우 width와 height 값을 사용)
만약 width, height 값이 적용되어 있어도 basis 속성이 사용된다면 무시된다.
출처: CSS-TRICKS 2. flex-grow
자식요소에 사용
만약 flex-grow: 1이면 박스의 여백크기가 모든 자식들에게 균등하게 분배된다.
만약 자식 중 하나만 2의 값을 가지면, 다른 자식들보다 여백의 크기가 2배로 길다.
3. flex-shrink
flex-shrink는 브라우저에게 요소가 최소로 줄어들 수 있는 사이즈를 알려준다.
사실 말로만 들었을 땐 대충만 이해만 간다. .
flew 속성 사용해서 함 만들어봐! 했을 때 막상 쓸라하면 잘 모르겠는 이 속성들..
나의 심정 진짜 퐉! 이해하고 싶어서 CSS TRICKS 사이트에서 설명한 내용을 한국어로 핵심만 설명해 보겠다!
(그렇다고 100%이해까진 아니지만 한발짝 가까워졌다....ㅎㅎ)
원문: https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/
Understanding flex-grow, flex-shrink, and flex-basis | CSS-Tricks
When you apply a CSS property to an element, there's lots of things going on under the hood. For example, let’s say we have some HTML like this:
css-tricks.com
아래 코드를 살펴보자.
<style> .parent { display: flex; } .child { flex: 0 1 auto; /* Default flex value */ } </style> <body> <div class="parent"> <div class="child">Child</div> <div class="child">Child</div> <div class="child">Child</div> </div> </body>이렇게 부모와 세 개의 자식요소가 있다고 가정해보자.
부모요소에 플렉스가 설정이 되어있다면, 자식요소에는 내가 직접 css코드를 적지않아도
디폴트로 위와 같이 적용되어있다고 한다.
저 자식요소에 디폴트로 적용된 flex 단축 속성을 풀어쓰자면 다음과 같다.
.child { flex-grow: 0; flex-shrink: 1; flex-basis: auto; }이러한 디폴트값은 자식요소가 어떻게 길이가 늘어나고 넓이가 넓어지는지를 알려준다.
하나하나 상세히 풀어보자.
1. flex-grow:0
우리는 기본적으로 자식요소가 마음대로 커지지 않고 대부분 컨텐츠의 사이즈에 따라 변하길 원한다.
이것이 flex-box의 디폴트된 behavior이다.
컨텐츠가 길수록 박스 길이가 길다. 그래서 기본적으로 flex-grow 는 0으로 설정되어 있다.
그러나, 우리가 flex-grow 의 디폴트값을 예를 들어 0에서 1로 바꾸고 싶다면,
이렇게 자식 요소들은 부모를 기준으로 여백이 균등한 비율을 차지하도록 grow된다.
응용해서 자식들 중 하나만 flex-grow 값을 3으로 줘보자.
자식의 여백 공간이 3배 차이남을 알 수 있다. 2. flex-shrink:1
앞에서 서술했듯이 -shrink는 브라우저에게 요소가 최소로 줄어들 수 있는 사이즈를 알려준다.
즉 디폴트가 1로 설정되어 있다는 것은 브라우저에게 이렇게 말하는 것과 같다.
"브라우저야, 항상 똑같은 크기의 여백을 차지하게 만들어줘~"
그런데, 만약 이러한 디폴트 1를 0으로 설정한다면, 자식 요소에게 shrink(줄어들게)하지 말라고 말하는 것이다.
즉, "계속~ 똑같은 사이즈로 있어
(이 망할)요소야!"라고 말하는 걸로 비유할 수 있다.
(CSS-Tricks에 고대로 써있었다..ㅎ 제대로 몰입하기 위해 고대로 가져왔다^_^)
3. flex-basis: auto
-basis는 요소에게 이상적인 사이즈를 고수(stick to an ideal size)하라고 말하는 속성이다.
즉 디폴트값인 auto는 앞에서 서술한 것과 마찬가지로 "내 너비나 높이를 사용해~"라고 말하는 것이다.
디폴트 auto 가 적용된 위의 예시를 보자. 역시나 컨텐츠의 길이에 따라 width가 정해진 걸 볼 수 있는데,
이렇게 auto는 콘텐츠에 의해 정해진 것을 ideal size로 본다.
만약 요소가 공백없이 부모 전체를 차지하게 만들기 위해선,
자식 요소에게 width: 100% 혹은
flex-basis: 100% 혹은
flex-grow: 1
로 설정하면 된다.
이런 경우의 예시도 살펴보자
.child-three { flex: 0 1 1000px; }-basis의 값을 1000px로 주었다.
이것은 우리가 브라우저에게 이렇게 말하는 것과 같다.
"제발 제발 1000픽셀의 여백을 차지하도록 제발 시도해주라,,,,"
이렇게 까지 부탁하는데 브라우저는 들어주려고 노력하겠지만,,
만약 이렇게 써도 가능하지 않는 경우가 존재하는데, (예를 들어 작은 모니터 화면인 경우)
이럴 경우는 다른 요소에 비해 비율적으로 최대-한 많은 여백을 차지한다.
이렇게 설정된 상태에서 다른 자식요소에 더 많은 컨텐츠를 적으면 역시나 컨텐츠 양에 비례하게 늘어나게 된다.
(1000px로 설정된 요소가 있음에도 불구하고)
요런 식으로
이렇게 -grow, -shrink, -basis 를 살펴봤는데,
이러한 특성들로 얻을 수 있는 교훈은 다음과 같다.
1. -grow, -shrink 등 속성을 따로 쓰지말고 flex 단축속성을 쓰자.
(한꺼번에 써서 조절하면서 쓰는게 더 편리하다.)
2. flex 속성 사용시 원하는 최대, 최소, 이상적인 사이즈를 정해서 사용해보자.
2. 요소 안 컨텐츠는 -grow, -shrink, -basis가 같이 작동하는 것에 영향을 줄 수 있다.
(그래서 특정 값을 지정해도 특정상황에선 브라우저가 잘 안따라줄 수 있다. 그저 부탁하는 것일 뿐..)
우리 모두 flex 속성을 자유자재로 쓰는 그날까지..
💪💪💪💪
반응형'TIL > 멋쟁이사자처럼 FE스쿨 2기' 카테고리의 다른 글
[Day 17] 드롭박스 구현 코드리뷰 & CSS 실무 테크닉 (0) 2022.04.20 [Day 16] 로그인창 구현 코드 리뷰 (0) 2022.04.18 [Day 14] CSS Grid (0) 2022.04.15 [Day 13] CSS Combinator & Flex (0) 2022.04.13 [Day 12] CSS float (0) 2022.04.12