flex-shrink 를 이용한 마우스오버 효과

See the Pen flex-shrink by dain (@dadain) on CodePen.

 

flex-shrink는 자식 요소에 주는 속성이다.

플렉스 아이템의 축소여부를 결정한다.

기본값은 1이며, 1을 주면 축소된 상태가 되고,

0을 주면 축소가 해제되며 원래의 너비를 유지한다.

예시에 있는 박스의 부모 컨테이너는 자식 아이템 요소들의 너비를 합친것보다 작다.

그러므로 flex-shrink 에 의해 축소되어 있다.

아래 코드와 같이 마우스오버를 했을 때 0을 주면 축소가 해제되며 원래의 너비를 유지해서 옆의 요소보다 커지는 효과를 줄 수 있다.

.items:hover {
  flex-shrink: 0;
}