flex-item

flex-item에 사용하는 속성들이 헷갈려서 정리 좀 해두려고 한다.

 

flex-basis

flex 아이템의 기본 크기를 설정한다. flex-direction에 따라 width(row)와 height(column)를 설정한다.

다만 단순히 width, height가 아닌 min-width, min-height 처럼 동작한다.

 

.item {
	flex-basis: 100px;
}

 

만약 이렇게 설정했다면 원래 100px가 안되던 아이템은 100px로 늘어나고 100px 넘는 아이템은 컨텐츠의 길이만큼 설정된다.

 

.item {
	flex-basis: 100px;
	word-break: break-word;
}

 

100px 넘어가던 item이 100px이 넘어가지 않게 하고 싶으면 word-break를 통해 컨텐츠를 줄바꿈 하여 할 수 있다.

 

flex-grow

flex-grow는 flex 아이템의 길이가 basis보다 늘어나게 할 수 있는 속성이다. 이때 flex-box의 사이즈에 맞게 늘어나게 된다. 기본값은 0이다.

 

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

 

이런 마크업이 있다.

 

.container {
  width: 1200px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid red;
  padding: 20px;
}

.item {
  flex-basis: 100px;
  height: 100px;
  overflow-y: hidden;
  border: 1px solid black;
  word-break: break-word;
  /* flex-grow: 1; */
}

 

css는 이러하다. 그럼 이런 화면을 볼 수 있다.

 

 

이제 여기서 flex-grow의 주석을 풀면?

 

 

이렇게 늘어난다! 이때 두번째 아이템에만 flex-grow값에 2를 적용하면

 

 

이렇게 된다. 값에 따라 늘어나는 비율을 정할 수 있는 것이다.

 

flex-shrink

flex-shrink는 flex-grow와 반대이다. flex-basis 보다 작아질 수 있게 된다. 기본값이 1이여서 flex-box의 크기가 줄어들면 같이 줄어든다. 0으로 설정하게 되면 크기가 변하지 않는 고정의 길이를 갖는 아이템이 된다.

 

위의 코드와 같은 상황에서 container의 width를 200px로 줄이고 flex-shrink의 값을 0을 주면 다음과 같이 된다.

 

 

flex-box의 크기와 관계없이 100px을 유지하는 것을 확인할 수 있다.

 

flex

flex는 grow, shrink, basis 순으로 한번에 적용할 수 있다.

 

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

 

이렇게 작성하면 basis는 0이지만 grow가 1이상이기 때문에 길이가 늘어나는데 1:2:1 비율로 늘어나게 된다.

 

 

glow와 shrink의 포인트는 flex-container의 크기에 따라 늘어날 수 있는지 줄어들 수 있는지다. 헷갈리지 말자.