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를 줄이게 되는 것입니다. *여기까지 학습 하셨다면 학습노트를 나가셔도 좋습니다 👍

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

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

서원석

의 학습노트

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

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기