css 줄바꿈 어떤 상황에서 플렉스 요소에 적용된 플렉스 축소 및 어떻게 작동합니까?



justify-content (1)

이 멋진 CSS Flexbox 데모 페이지를 가지고 놀았지만 대부분의 개념을 이해하고 있지만 작업에서 flex-shrink 것을 볼 수 없었습니다. 어떤 설정을 적용하더라도 페이지에 아무런 차이가 없습니다.

spec :

< 'flex-grow'>

이 구성 요소는 '플렉스 성장'길이를 설정하고 플렉스 증가 요인을 지정합니다. 플렉스 증가 요인은 플랙스 항목이 양수 여유 공간이 배포 될 때 플렉스 컨테이너의 나머지 플렉스 항목을 기준으로 성장할 정도를 결정합니다. 생략되면 '1'로 설정됩니다.

< 'flex-shrink'>

이 구성 요소는 'flex-shrink'길이를 설정하고 음수 여유 공간이 배포 될 때 flex 컨테이너의 나머지 flex item에 비해 flex item이 축소되는 정도를 결정하는 flex shrink factor를 지정합니다. 생략되면 '1'로 설정됩니다. 음수 공간을 분배 할 때 플렉스 축소 계수에 플렉스 기준을 곱합니다.

어떤 상황에서 flex-shrink 가 적용될 것인가? flexbox 요소의 너비와 내부의 요소의 (최소) 너비를 설정하여 오버플로를 만드는 사용자 지정 페이지를 시도했지만 설명 된 경우가 아닌 것 같습니다.

그것은 이미 지원됩니까?

해결책으로, 링크 된 데모 또는 JSFiddle-like 라이브 데모에 대한 옵션 세트 중 하나가 매우 높이 평가됩니다.


flex-shrink 을 실제로보기 위해서는 컨테이너를 더 작게 만들 수 있어야합니다.

HTML :

<div class="container">
  <div class="child one">
    Child One
  </div>

  <div class="child two">
    Child Two
  </div>
</div>

CSS :

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.child.one {
  flex: 1 1 10em;
  color: green;
}

.child.two {
  flex: 2 2 10em;
  color: purple;
}

이 예제에서 두 자식 요소는 이상적으로는 10em 크기가되어야합니다. 상위 요소가 너비가 20em보다 큰 경우 두 번째 자식은 첫 번째 자식의 남은 공간의 두 배가 걸리게되어 더 크게 보입니다. 부모 요소가 너비가 20em 미만이면 두 번째 자식은 첫 번째 자식보다 두 배나 더 많은 면도를하여 모양이 더 작아집니다.

현재 flexbox 지원 : Opera (접두어가 붙지 않음), Chrome (접두사), IE10 (접두어가 붙지 만 약간 다른 속성 이름 / 값 사용) 파이어 폭스는 현재 2009 년 이전의 스펙 (접두사)을 사용하지만, 새로운 스펙은 현재 실험 빌드에서 사용 가능하다.





flexbox