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

[CSS - 요약] Flex Grow

#전체
#개발자
#프론트엔드
#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 grow
#flex-grow
#css flex-grow
#css flex grow
#flexbox grow
#flexbox flex grow
#flex-grow tutorial
#flex grow tutorial
00:00영상 시작 전 배경 지식: flex-grow는 flex-item인 경우에만 사용할 수 있는 CSS 속성입니다. flex-item이 되려면 부모가 display: flex여야합니다. 그러면 바로 15초로 건너뛰어볼까요?
00:15영상 시작 00:20까지 듣고 멈춰주세요. 그리고 해당 노트를 읽어주세요. 간략한 코드 설명: display: flex인 container가 세 개의 flex-item(box)을 하위에 두고 있습니다. 각각의 box는 빨강, 파랑, 초록색이니 색으로 구분해주세요. *box의 width, height는 전부 100px입니다. 해당 학습노트는 영상으로 예시를 확인하고 노트로 원리를 설명합니다. 노트의 원리 설명 때 영상과는 다른 예시를 들어 설명하니 이 점 참고해주세요. *노트를 다 읽으셨으면 01:29로 skip 🏃‍♂️ 해주세요.
01:2901:34까지 영상을 시청해주세요. 그리고 해당 노트를 집중해서 읽어주세요. flex-grow: 1을 box에 적용 *참고로 flex-item의 flex-grow default value는 0입니다. flex-grow: 1을 입력하니 세 개의 box가 container의 남은 공간을 같은 비율로 가득 채우고 있습니다. 간략한 원리 설명: 예를들어 width가 1000인 flex-container(display가 flex면 flex-container)가 있고 그 하위에 각각 width가 100인 5개의 flex-item(flex-container의 하위에 위치하면 flex-item)들이 있다고 가정해볼게요. flex-grow는 flex-item들의 width의 합이 flex-container의 width보다 작을 때 동작하는데요, 현재 flex-container의 width가 5개의 flex-item width 합보다 500 더 크죠? 이 500에 대해 item들이 grow의 비율만큼 추가 width를 확보하게 되는 것입니다. 만약 5개의 flex-item이 전부 flex-grow: 1일 경우, 남은 500에 대해 1:1:1:1:1 비율로 자신의 width를 확장하려고 할 것입니다. 즉 200(100+100), 200(100+100), 200(100+100), 200(100+100), 200(100+100)이 되면서 width의 합이 1000이 되는 것이죠. *이 노트를 다 읽으셨다면 03:07으로 skip🏃‍♂️ 해주세요
03:07세 개의 box에 대해 각각 flex-grow: 1, flex-grow: 2, flex-grow: 3 적용 세 개의 box가 container의 남은 공간을 1대2대3 비율로 가득 채우고 있습니다. 간략한 원리 설명: flex-container와 flex-item들의 width 여백 공간이 660px일 때 1:2:3으로 크기를 나눠가지면 110, 220, 330이 됩니다. 즉, 첫 번째 박스는 210(100+110), 두 번째 박스는 320(100+220), 세 번째 박스는 430(100+330) 가로 크기를 가지게 됩니다. container의 크기가 커지고 작아짐에 따라 box들의 크기도 같이 커졌다가 작아지겠지만 여백의 크기를 나눠갖는 비율은 1:2:3으로 유지 될 것입니다. *여기까지 학습 하셨다면 학습노트를 나가셔도 좋습니다 👍
✔ 학습 완료

이런 러닝패스는 어때요?

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

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

리액트로 이미지 미리보기 구현(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초 만에 가입하기