css - 사용법 - flexbox란




플렉스베이스와 너비의 차이점은 무엇입니까? (2)

이것에 관한 질문과 기사가 있었지만 내가 말할 수있는 한 결정적인 것은 없습니다. 내가 찾을 수있는 가장 좋은 요약은

flex-basis를 사용하면 다른 항목을 계산하기 전에 요소의 초기 / 시작 크기를 지정할 수 있습니다. 백분율 또는 절대 값일 수 있습니다.

... 자체적으로 플렉스 기준이 설정된 요소의 동작에 대해서는별로 언급하지 않습니다. flexbox에 대한 현재의 지식으로 너비 를 설명 할 수없는 이유를 알 수 없습니다.

실제로 플렉스 기준 이 실제로 너비 와 어떻게 다른지 알고 싶습니다.

  • 너비 를 플렉스 기반으로 바꾸거나 그 반대의 경우 시각적으로 무엇이 바뀌나요?
  • 둘 다 다른 값으로 설정하면 어떻게됩니까? 동일한 값을 가지면 어떻게됩니까?
  • 너비 또는 플렉스 기준 을 사용하는 것이 다른 것을 사용하는 것과 크게 다른 특별한 경우가 있습니까?
  • flex-wrap , flex-grow 및 flex-shrink 와 같은 다른 flexbox 스타일과 함께 사용하면 너비 와 플렉스 기준 이 어떻게 다릅니 까?
  • 다른 중요한 차이점이 있습니까?

편집 / 설명 :이 질문은 정확히 flex-basis 속성 세트의 형식이 다릅니다 . 그러나 flex-basis 와 width (or height )의 차이점에 대한 직접적인 비교 또는 요약이 좋을 것이라고 느꼈습니다.

flex-direction 고려

질문을 읽을 때 가장 먼저 떠오르는 것은 flex-basis 가 항상 width 적용되는 것은 아닙니다.

flex-direction 이 row 경우 flex-basis 는 너비를 제어합니다.

그러나 flex-direction 이 column 경우 flex-basis 는 높이를 제어합니다.

주요 차이점

flex-basis 와 width / height 중요한 차이점은 다음과 같습니다.

  • flex-basis 은 플렉스 아이템에만 적용됩니다. 플렉스 컨테이너 (Flex 항목이 아닌)는 flex-basis 을 무시하지만 width 및 height 사용할 수 있습니다.

  • flex-basis 는 주축에서만 작동합니다. 예를 들어 flex-direction: column 인 경우 flex 항목의 가로 크기를 조정하려면 width 속성이 필요합니다.

  • flex-basis 는 절대 위치 플렉스 아이템에는 영향을 미치지 않습니다. width 및 height 속성이 필요합니다. 절대적으로 배치 된 플렉스 항목은 플렉스 레이아웃에 참여하지 않습니다 .

  • flex 속성을 사용하면 flex flex-grow , flex-shrink 및 flex-basis 세 가지 속성을 하나의 선언으로 깔끔하게 결합 할 수 있습니다. width 사용하면 동일한 규칙에 여러 줄의 코드가 필요합니다.

브라우저 동작

그것들이 어떻게 렌더링되는지에 관해서는 flex-basis 가 auto 또는 content 가 아닌 한 flex-basis 와 width 사이에 차이 가 없어야합니다.

사양에서 :

7.2.3. flex-basis 속성

auto 및 content 이외의 모든 값에 대해 가로 쓰기 모드의 width 와 동일한 방식으로 flex-basis 가 해결됩니다.

그러나 auto 또는 content 의 영향은 최소한이거나 전혀 없을 수 있습니다. 사양에서 더 많은 것 :

auto

flex 항목에 지정된 경우 auto 키워드는 기본 크기 특성의 값을 사용 된 flex-basis . 해당 값이 auto 인 경우 사용 된 값은 content 입니다.

auto

플렉스 항목의 내용을 기반으로 자동 크기 조정을 나타냅니다.

참고 :이 값은 Flexible Box Layout의 초기 릴리스에는 없었으므로 일부 이전 구현에서는이를 지원하지 않습니다. auto 기본 크기 ( width 또는 height )와 함께 사용하면 동등한 효과를 얻을 수 있습니다.

따라서 사양에 따라 flex-basis 가 auto 또는 content 가 아닌 한 flex-basis 와 width 동일하게 해석 content . 그러한 경우에, flex-basis 는 content width (아마도 width 속성도 사용합니다)를 사용할 수 있습니다.

flex-shrink 계수

플렉스 컨테이너의 초기 설정을 기억하는 것이 중요합니다. 이러한 설정 중 일부는 다음과 같습니다.

  • flex-direction: row -플렉스 항목이 가로로 정렬됩니다
  • justify-content: flex-start start-플렉스 항목은 기본 축의 라인 시작 부분에 쌓입니다.
  • align-items: stretch -플렉스 항목이 컨테이너의 가로 크기를 덮도록 확장됩니다.
  • flex-wrap: nowrap 플렉스 아이템은 한 줄로 유지됩니다
  • flex-shrink: 1 플렉스 항목을 축소 할 수 있습니다

마지막 설정에 유의하십시오.

플렉스 아이템은 기본적으로 수축 될 수 있기 때문에 (컨테이너가 넘치지 않도록) 지정된 flex-basis / width / height 가 무시 될 수 있습니다.

예를 들어 flex-basis: 100px 또는 width: 100px 는 flex-shrink: 1 과 함께 width: 100px 일 필요는 없습니다.

지정된 너비를 렌더링하고 고정 된 상태로 유지 하려면 축소를 비활성화해야합니다. 

div {
   width: 100px;
   flex-shrink: 0;
}

또는 

div {
  flex-basis: 100px;
  flex-shrink: 0;
}

또는 사양에서 권장하는대로 : 

flex: 0 0 100px;    /* don't grow, don't shrink, stay fixed at 100px */

7.2. 유연성의 구성 요소

속기 는 일반적인 용도 를 수용하기 위해 지정되지 않은 구성 요소를 올바르게 재설정하므로, 속기 속성 대신 직접 flex 속기를 사용하여 유연성을 제어하는 ​​것이 좋습니다.

브라우저 버그

일부 브라우저는 중첩 된 플렉스 컨테이너에서 플렉스 항목의 크기를 조정하는 데 문제가 있습니다.

중첩 된 플렉스 컨테이너에서는 flex-basis 무시됩니다. width 작동합니다.

flex-basis 를 사용하면 컨테이너는 자식의 크기를 무시하고 자식은 컨테이너를 오버플로합니다. 그러나 width 속성을 사용하면 컨테이너는 자식의 크기를 존중하고 그에 따라 확장됩니다.

참고 문헌 :

예 :

플렉스 flex-basis 및 white-space: nowrap 사용한 플렉스 아이템 white-space: nowrap 오버플로 inline-flex 컨테이너를 white-space: nowrap 합니다. width 작동합니다.

inline-flex 플렉스로 설정된 플렉스 컨테이너는 white-space: nowrap 가진 형제를 렌더링 할 때 자식에서 flex-basis 을 인식하지 못하는 것 같습니다 white-space: nowrap (단지 너비가 정의되지 않은 항목 일 수도 있음). 컨테이너가 항목을 수용하도록 확장되지 않습니다.

그러나 flex-basis 대신 width 속성을 사용하면 컨테이너는 자식의 크기를 존중하고 그에 따라 확장됩니다. 이것은 IE11 및 Edge에서 문제가되지 않습니다.

참고 문헌 :

  • 인라인 플렉스 컨테이너 너비가 커지지 않음
  • 인라인 플렉스 컨테이너 (디스플레이 : inline-flex)가 상위 컨테이너의 전체 너비를 확장

예:

IE 10 및 11에 영향을 미치는 버그

Michael_B의 훌륭한 요약 외에도 이것을 반복 할 가치가 있습니다.

flex-basis를 사용하면 다른 항목을 계산하기 전에 요소의 초기 / 시작 크기를 지정할 수 있습니다. 백분율 또는 절대 값일 수 있습니다.

여기서 중요한 부분은 초기 입니다.

그 자체로, 이것은 다른 플렉스 성장 / 수축 특성이 작용할 때까지 너비 / 높이로 해석됩니다.

그래서. 와 아이 

.child {
 flex-basis:25%;
 flex-grow:1;
}

처음에는 너비가 25 %이지만 다른 요소가 고려 될 때까지 최대한 크게 확장합니다.없는 경우 너비가 100 %입니다.

빠른 데모 : 

.flex {
  width: 80%;
  margin: 1em auto;
  height: 25px;
  display: flex;
  background: rebeccapurple;
}
.child {
  flex-basis: auto;
  /* default */
  background: plum;
}
.value {
  flex-basis: 25%;
}
.grow {
  flex-grow: 1;
}
<div class="flex">
  <div class="child auto">Some Content</div>
</div>
<div class="flex">
  <div class="child value">Some Content</div>
</div>
<div class="flex">
  <div class="child grow">Some Content</div>
</div>

flex-grow , flex-shrink 및 flex-basis (또는 속기 flex :fg fs fb )를 실험하면 몇 가지 흥미로운 결과가 발생할 수 있습니다.






사용법   강좌   w3s   none   froggy   flexbox란   basis   css   css3   flexbox  


flexbox