갈푸라떼
갈푸라떼는 개발중
갈푸라떼
전체 방문자
오늘
어제
  • 분류 전체보기 (232)
    • CS (0)
      • CSinfo (0)
    • Frontend (15)
      • HTML,CSS (1)
      • Javascript (2)
      • React (0)
      • React Hook (12)
    • Backend (0)
      • Python (0)
      • Node.js (0)
      • php (0)
    • DB (2)
      • MySQL (2)
      • BigQuery (0)
      • Mongodb (0)
    • Study (186)
      • JavaScript (72)
      • JavaScript(Clean code) (50)
      • Node.js (11)
      • HTML,CSS (13)
      • React (30)
      • TypeScript (10)
      • React-Native (0)
    • Error (2)
      • error (2)
    • Git (22)
      • Git (22)
    • Help Coding (4)
      • Useful websites (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록
  • Github

공지사항

인기 글

태그

  • 자바스크립트엔진
  • 원시타입
  • 싱글스레드
  • 상속
  • symbol
  • Babel
  • 심볼
  • 렉시컬 환경
  • 정적 레벨
  • ECMAScript
  • prototype
  • class
  • this
  • 스코프 체인
  • 실행 컨텍스트
  • PM2
  • Arrow
  • nodemon
  • 호이스팅
  • 함수
  • SPREAD
  • 컴파일러
  • 인터프리터
  • 객체타입
  • 이터러블
  • function
  • 프로토타입
  • 네이밍
  • 오버라이딩
  • structure

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
갈푸라떼

갈푸라떼는 개발중

[CSS_study] flex-grow, flex-shrink
Study/HTML,CSS

[CSS_study] flex-grow, flex-shrink

2022. 5. 13. 02:06

* flex-grow, flex-shrink는 child(자식)에게 줄 수 있는 property이다.

 

* flex-shrink

  • flexbox가 쥐어짤 때, element의 행동을 정의함
  • element 중 특정 element만 덜 줄어들거나, 더 줄어들게 할 수 있음 
    • ex) flex-wrap: nowrap일때, 화면이 작아지면 width가 설정되어있어도 줄어든다.
  • flex-shrink: 1; (기본값이 1이다.)
  • flex-shrink: n(정수); --> 여러 개

* flex-grow

  • shrink와 반대, 화면이 늘어남에 따라 box 크기가 얼마나 늘어날까?
  • 남아있는 공간을 가져옴 (space를 없애고)
    • 즉, 남아있는 공간, 여백이 있을 때만 grow 가능
  • 화면이 커질 때, element도 함께 커지길 원할 때 사용할 수 있음
  • flex-grow property가 0인 상태거나, 따로 정의되지 않았다면, 화면이 커져도 각 element 크기가 커지지 않음
    (여백만 늘어나게 됨)


* flexbox의 flex-wrap이 default 값(no-wrap)인 상태일 때는 일정한 비율로 children 요소들이 너비가 줄어들지만 flex-shrink는 말 그대로 shrink이며 원래 크기의 n배만큼 줄어든다.

 

flexbox 안의 children 요소들의 flex-shrink 값은 1이 default이며 flex-shrink 값을 매긴다면 각 요소는 축소 시


  > (원래 요소의 너비) * (해당 요소의 flex-shrink 값 / 전체 요소들의 flex-shrink 값의 총합) 정도 축소가 되겠다.


* flex-shrink 예시코드

<div class="father">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
</div>
.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: nowrap
}

.child:nth-child(2) {
  background: #000;
  flex-shrink: 2;
}

 



* flex-grow는 flexbox의 children 요소들이 원래 너비 상태를 기준으로 너비를 키우게 되면 남는 여백들을 가지고 flex-grow 값을 가진 요소들에게 너비를 추가시킨다.

 

모든 요소들의 flex-grow 값은 0이 default이며 flex-grow 값을 매긴다면
  > (원래 너비) + (남는 공백 * (해당 요소의 flex-grow 값 / 전체 요소의 flex-grow 값의 총합)) 정도 너비를 얻게 될 것이다.


* flex-grow 예시 코드

.father {
  display: flex;
  justify-content: space-around;
  height: 100vh;
}

.child {
  width: 200px;
  height: 200px;
  background: peru;
  color: white;
  flex-wrap: nowrap
}

.child:nth-child(2) {
  background: #000;
  flex-grow: 1;
}

 

* flex-grow와 flex-shrink는 반응형 디자인(responsive design)을 할 때 유용하다.

'Study > HTML,CSS' 카테고리의 다른 글

[CSS_study] display : grid  (0) 2022.05.13
[CSS_study] flex-basis (flex-shrink 와 flex-grow 를 위한 기본 세팅)  (0) 2022.05.13
[CSS_study] flex-wrap, align-content, flex-flow  (0) 2022.05.13
[CSS_study] display : flex 그리고align-self와 order  (0) 2022.05.12
[CSS_study] display : block, inline, inline-block  (0) 2022.05.12
    'Study/HTML,CSS' 카테고리의 다른 글
    • [CSS_study] display : grid
    • [CSS_study] flex-basis (flex-shrink 와 flex-grow 를 위한 기본 세팅)
    • [CSS_study] flex-wrap, align-content, flex-flow
    • [CSS_study] display : flex 그리고align-self와 order
    갈푸라떼
    갈푸라떼

    티스토리툴바