[CSS] flex-box 안 items 크기가 안 변할때

개요

---

flex container안의 item들의 크기가 넘치면 가로 스크롤을 주고 싶었다.

그런데 width를 5000px로 주어도 flex container안 items은 넘치지 않았다.

 

 

문제

---

flex-items가 스스로 container크기에 맞게 줄어들었다.

flex-shrink옵션 때문이다.

 

 

해결

---

flex-shrink 옵션과 flex-basis 옵션을 설정한다.

 

flex-shrink

flex item들이 컨테이너에 맞도록 줄어드는 비율을 설정한다. 기본값은 1이고, 양수로 설정할 수 있다.

0으로 설정하면 줄어들지 않고 원래의 너비를 유지한다.

 

flex-basis

flex item의 너비값을 px, %등의 단위로 지정한다. 기본값은 auto다.

 

 

결과

---

flex-container에 item들이 하나씩 꽉 차 보이게 설정했다.

스크롤바를 움직여 다른 아이템을 볼 수 있다.

.flex_container {
	display: flex;
	flex-flow: row nowrap;
	overflow: auto;
}

.flex_items {
	flex-basis: 100%;
	flex-shrink: 0;
}

 

 

참고

---

https://poiemaweb.com/css3-flexbox

CSS3 Flexbox Layout | PoiemaWeb