css flexbox란 - 플렉스베이스와 너비의 차이점은 무엇입니까?




강좌 사용법 (4)

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

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

... 그 자체로 플렉스베이스 세트를 가진 엘레멘트들의 행동에 대해서는별로 말하지 않는다. flexbox에 대한 나의 현재의 지식으로 왜 너비 를 설명 할 수 없는지 나는 알지 못한다.

나는 플렉스베이스 가 실제 너비 와 얼마나 다른지 알고 싶습니다.

  • 너비 를 플렉스 단위로 바꾸면 (그 반대도 마찬가지입니다) 시각적으로 무엇이 바뀌나요?
  • 두 값을 다른 값으로 설정하면 어떻게됩니까? 그들이 같은 가치를 지닌다면 어떻게 될까?
  • 너비 또는 플렉스 기반 을 사용하는 것이 다른 하나를 사용하는 것과 큰 차이가있는 특별한 경우가 있습니까?
  • 플렉스 랩 (flex-wrap) , 플렉스 성장 (flex-grow) 및 플렉스 축소 (flex-shrink) 와 같은 다른 플렉스 박스 스타일과 함께 사용할 경우 폭 과 플렉스 기준 이 어떻게 다른 가요 ?
  • 다른 중요한 차이점은 무엇입니까?

편집 / 설명 :이 질문은 정확히 어떤 플렉스 기반 속성 세트 에서 다른 형식으로 묻습니다 . 그러나 나는 flex-basis 와 width (또는 height )의 차이에 대한보다 직접적인 비교 나 요약이 좋을 것이라고 느꼈다.

Answers

아마도 가장 중요한 요점을 추가 할 수 있습니다 :

브라우저가 flex 지원하지 않으면 어떻게 될까요? 이 경우 width/height 가 대신 적용되며 그 값이 적용됩니다.

flex-basis 값이 완전히 다른 경우에도 요소의 width/height 를 정의하는 것은 매우 중요 flex-basis . display:flex 를 사용 중지하고 테스트 결과를 확인하여 테스트해야합니다.

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 )을 실험하면 흥미로운 결과를 얻을 수 있습니다.

flex-direction 고려

당신의 질문을 읽을 때 가장 먼저 생각해내는 것은 flex-basis 이 항상 width 적용되는 것은 아니라는 것입니다.

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

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

주요 차이점

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

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

  • flex-basis 는 주축에서만 작동합니다. 예를 들어 flex-direction: column 인 경우 flex items의 크기를 수평으로 조정하려면 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 이외의 모든 값에 대해 flex-basis 은 가로 쓰기 모드의 width 와 동일한 방식으로 해결됩니다.

그러나 auto 또는 content 의 영향은 미미하거나 전혀 없을 수 있습니다. 사양에서 더 :

auto

flex 항목에 지정되면 auto 키워드는 기본 크기 속성 값을 사용 된 flex-basis 합니다. 이 값 자체가 auto 이면 사용 된 값은 content 입니다.

auto

flex 항목의 내용에 따라 자동 크기 조정을 나타냅니다.

주 :이 값은, Flexible Box Layout의 초기 릴리스에서는 존재하지 않기 때문에, 구형 구현에서는 지원하지 않습니다. 동일한 효과는 auto 의 기본 크기 ( width 또는 height )와 함께 auto 를 사용하여 얻을 수 있습니다.

따라서 flex-basis 이 auto 또는 content 가 아니라면 flex-basis flex-basis 및 width 동일하게 해결 content . 이 경우 flex-basis 은 내용 너비를 사용할 수 있습니다 (아마도 width 속성도 마찬가지로 사용합니다).

flex-shrink 팩터

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

  • flex-direction: row - 굴곡 항목이 가로로 정렬됩니다.
  • justify-content: flex-start - 플렉스 아이템이 주축에서 라인의 시작 부분에 쌓인다.
  • align-items: stretch - flex 아이템이 컨테이너의 가로 크기를 포함하도록 확장됩니다.
  • flex-wrap: nowrap - 플렉스 아이템이 한 줄에 머물러 있어야합니다.
  • flex-shrink: 1 - flex 항목을 축소 할 수 있습니다.

마지막 설정을 기록하십시오.

플렉스 항목은 기본적으로 축소되므로 (컨테이너 오버플로를 방지 함) 지정된 flex-basis / width / height 가 무시 될 수 있습니다.

예를 들어, flex-basis: 100px 또는 width: 100px , flex-shrink: 1 , 반드시 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 약식을 사용하여 유연성을 제어하는 ​​것이 좋습니다. 약식 은 일반적인 용도 를 수용 할 수 있도록 지정되지 않은 구성 요소를 올바르게 재설정하기 때문입니다.

브라우저 버그

IE 11 및 Edge를 제외한 모든 주요 브라우저에 영향을주는 버그 :

중첩 플렉스 컨테이너에서 flex-basis 무시되었습니다. width 작동합니다.

중첩 된 플렉스 컨테이너에서 플렉스 항목의 크기를 조정할 때 문제가 발견되었습니다.

flex-basis 사용할 때 컨테이너는 자식의 크기를 무시하고 자식이 컨테이너를 오버플로합니다. 그러나 width 속성을 사용하면 컨테이너가 자식의 크기를 조정하고 그에 따라 확장됩니다. 이것은 IE11 및 Edge에서는 문제가되지 않습니다.

참고 문헌 :

예 :

flex flex-basis 및 white-space: nowrap 사용하여 플렉스 아이템 white-space: nowrap overflow inline-flex 컨테이너. width 작동합니다.

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

그러나 flex-basis 대신 width 속성을 사용하면 컨테이너가 자식의 크기 조정을 고려하여 적절히 확장됩니다. 이것은 IE11 및 Edge에서는 문제가되지 않습니다.

참고 문헌 :

  • 인라인 플렉스 컨테이너 너비가 늘어나지 않음
  • 인라인 플렉스 컨테이너 (디스플레이 : 인라인 플렉스)가 상위 컨테이너의 전체 너비를 확장합니다.

예:

IE 10 및 11에 영향을주는 버그 :



Twitter   Facebook

css   css3   flexbox  

css css3 flexbox