[CSS_study] flex-basis (flex-shrink 와 flex-grow 를 위한 기본 세팅)

* flex-basis

• flexbox의 child 요소에 적용되는 property이며
• flex-basis는 flex-shrink 와 flex-grow 를 위한 기본 세팅이다.
• flex-basis는 main axis(주축) 쪽 크기를 정해준다.
• 즉, flex-direction이 row(default)일 때는 width와 같이 작용, column일 때는 height와 같이 작용한다.
• application에서 element의 flex item의 기본 크기를 정할 때 좋은 방법이다.
  • but 자주 사용 X basis 정의 안할시 width와 같은 값이니까.

 

* flex-basis 사용 예시 코드

<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 {
  flex-basis: 30%;
  background: peru;
  color: white;
  flex-wrap: nowrap
}