뒤로 가기
홈으로 이동
LearnFit
공유하기
YouTube, CSS Flexbox Tutorial #4 - Flex Shrink
서원석님의 학습노트

[CSS - 요약] Flex Shrink

#전체
#개발자
#프론트엔드
#css flexbox practical examples
#css flex property
#css flexbox layout
#flexbox tutorial
#flexbox css
#flexbox layout
#flexbox tutorials
#css flexbox tutorials
#css flexbox
#css flexbox tutorial
#flex shrink
#flex-shrink
#flex shrink tutorial
#flex shrink example
#flexbox shrink
#flexbox flex shrink
#flexbox flex-shrink
#flexbox shrink example
00:00영상 시작 전 배경 지식: flex-shrink는 flex-item인 경우에만 사용할 수 있는 CSS 속성입니다. flex-item이 되려면 부모가 display: flex여야합니다. 그러면 바로 1분 19초로 건너뛰어볼까요? *flex-shrink를 사용하려면 크기가 지정되어 있어야합니다. width or flex-grow로 지정해주세요. *flex-shrink는 flex-item들의 width합이 부모 요소의 width보다 커지려는 순간에 동작합니다.
01:18영상 시작 화면을 줄이니까 세 개의 box가 동일한 비율로 줄어드는 모습을 확인할 수 있습니다. 세 개의 box에 default로 flex-shrink: 1가 입력되어있기 때문입니다. *flex-item의 flex-shrink의 default value는 1입니다. 그렇다면 flex-shrink가 무엇일까요? 다음 해설노트를 보겠습니다.
01:55여기서부터 02:05까지 봐주세요. 그리고 이 노트를 봐주세요. 02:05까지 영상을 재생하면 세 개의 box가 줄어들 때 1:2:3 비율로 줄어드는 것을 확인할 수 있습니다. 이것은 flex-shrink가 세 개의 box에 대해 각각 1, 2, 3으로 적용되어있기 때문입니다. flex-container(display: flex면 flex-container입니다)보다 flex-item(flex-container 하위에 있으면 flex-item입니다)들의 width 합이 커지려는 순간부터 flex-shrink가 동작합니다. 위에서 flex-shrink의 default value가 1이라고 말씀드렸었죠? 예를들어 width가 1000인 flex-container가 있고 width가 250인 flex-item이 네 개 있다고 가정해볼게요. flex-item의 width 합이 딱 1000이므로 flex-shrink는 동작하지 않습니다. 그런데 화면이 줄어들면서 flex-container의 width가 900이 되었다고 가정해볼게요. 그러면 flex-item의 합인 1000보다 width가 100 작아지게 되죠? container는 item들을 감싸기 위해서 item들의 width 크기를 줄여버립니다. 어떤 기준으로 줄일까요? 바로 flex-shrink의 비율대로 줄입니다. flex-shrink의 default value는 1이기 때문에 네 개의 flex-item들은 1:1:1:1 비율로 100을 나눠서 그 값만큼 자신의 width에서 빼게 됩니다. 이렇게 되면 각 flex-item의 width는 225, 225, 225, 225가 되며 총 합이 900이 되므로 container의 width와 같아지게 되는 것이죠. 이 원리를 이해한다면 세 개의 box에 각각 flex-shrink: 1, flex-shrink: 2, flex-shrink: 3이 적용되면 왜 영상처럼 크기가 줄어드는지 이해하실 수 있습니다.
01:55영상에서 다루지 않았지만 flex-shrink: 0은 어떻게 동작하게 될까요? 예시: flex-container가 width: 1000, flex-item이 각각 width: 500, width: 500인 코드가 있다고 가정해볼게요. 첫 번째 flex-item에는 flex-shrink: 1을 입력하고 두 번째 flex-item에는 flex-shrink: 0을 입력한 후에 flex-container의 크기를 브라우저 창 조절로 width가 800이 될 때까지 줄인다면 어떻게 될까요? 정답은 '첫 번째 flex-item의 width는 300, 두 번째 flex-item의 width는 500이 된다'입니다. flex-shrink가 0이라면 flex-container의 부족해진 width를 위해서 줄여야될 flex-item의 후보군에서 제외되기 때문입니다. flex-shrink가 1인 첫 번째 flex-item의 width에서만 flex-container의 부족한 width를 줄이게 되는 것입니다. *여기까지 학습 하셨다면 학습노트를 나가셔도 좋습니다 👍
✔ 학습 완료

이런 러닝패스는 어때요?

서원석님의 다른 노트는 어때요?

서원석의 프로필 이미지
서원석
의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
25
00:01
이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)
00:25
코드 살펴보기 시작
👍
2
스크랩
서원석의 프로필 이미지
서원석
의 학습노트

네거티브 마진 negative margins | 코딩가나다 | 빔캠프

영상 재생 모양 아이콘
Video
⏱ 핵심 스탬프
6
04:38
B에 negative margin을 적용하기
05:00
마크업 상에서 아래 쪽에 위치하면 위로 올라갑니다. *negative margin과 상관없는 이야기
👍
6
스크랩
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기