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

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

---

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

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하지만 widthand 를 사용할 수 있습니다 height.

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

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

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

---

브라우저 동작

렌더링 방식 과 관련하여 is 또는을 제외 하고 and 사이에 차이 가 없어야합니다 .flex-basiswidthflex-basisautocontent

사양에서 :

7.2.3. flex-basis특성

이외의 모든 값의 경우 auto와 content, flex-basis와 같은 방법으로 해결 width가로 쓰기 모드에 있습니다.

그러나의 영향 auto또는 content모두에서 최소 또는 아무것도 할 수있다. 사양에서 더 많은 것 :

auto

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

content

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

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

따라서 사양에 따라 is 또는 인 경우를 제외 flex-basis하고 width동일하게 해결하십시오 . 이러한 경우 콘텐츠 너비 (아마도 속성도 사용)를 사용할 수 있습니다.flex-basisautocontentflex-basiswidth

---

flex-shrink요인

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

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

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

플렉스 항목은 기본적으로 축소 될 수 있으므로 ( 컨테이너가 넘치지 않도록) 지정된 flex-basis/ width/ height가 재정의 될 수 있습니다.

예를 들면 flex-basis: 100px또는 width: 100px과 함께, flex-shrink: 1반드시 100 픽셀되지 않습니다.

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

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속기 는 일반적인 용도 에 맞게 지정되지 않은 구성 요소를 올바르게 재설정하기 때문에, 속기 속성 대신 직접 속기를 사용하여 유연성을 제어하는 ​​것이 좋습니다 .

---

브라우저 버그

Some browsers have trouble sizing flex items in nested flex containers.

flex-basis ignored in a nested flex container. width works.

When using flex-basis, the container ignores the sizing of its children, and the children overflow the container. But with the width property, the container respects the sizing of its children and expands accordingly.

References:

• Chrome does not expand flex parent according to children's content
• Flex item overflowing when using flex-basis
• Difference between width and flex-basis
• Flex-basis is being ignored when sizing nested flex containers.
• flex-basis:100px does something different from width:100px+flex-basis:auto

Examples:

• https://jsfiddle.net/t419zhra/ (source: @Dremora)
• https://codepen.io/anon/pen/NVxaoy (source @Daniel)
• https://jsfiddle.net/voc9grx6/ (source: Chromium Bugs)
• https://jsfiddle.net/qjpat9zk/ (source: Chromium Bugs)

flex items using flex-basis and white-space: nowrap overflow inline-flex container. width works.

It seems that a flex container set to inline-flex doesn't recognize flex-basis on a child when rendering a sibling with white-space: nowrap (although it could just be an item with undefined width). The container doesn't expand to accommodate the items.

But when the width property is used instead of flex-basis, the container respects the sizing of its children and expands accordingly. This is not a problem in IE11 and Edge.

References:

• inline flex container width not growing
• Inline flex container (display: inline-flex) is expanding the full width of parent container

Example:

• https://jsfiddle.net/p18h0jxt/1/ (from first post above)

---

Bugs affecting IE 10 and 11:

• flex shorthand declarations with unitless flex-basis values are ignored
• flex-basis doesn't account for box-sizing: border-box
• flex-basis doesn't support calc()
• Importance is ignored on flex-basis when using flex shorthand

---

In addition to Michael_B's excellent summary it's worth repeating this:

flex-basis allows you to specify the initial/starting size of the element, before anything else is computed. It can either be a percentage or an absolute value.

The important part here is initial.

By itself, this does resolve to width/height until the other flex grow/shrink properties come into play.

So. a child with

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

will be 25% wide initially but then immediately expand as much as it can until the other elements are factored in. If there are none..it will be 100% wide/tall.

A quick demo:

.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>

Experimenting with the flex-grow, flex-shrink and flex-basis (or the shorthand flex :fg fs fb)...can lead to some interesting results.

---

Possibly the most important point to add:

What if the browser doesn't support flex? In such a case, width/height take over and their values apply.

It is a very good idea - almost essential - to define width/height on elements, even if you then have a completely different value for flex-basis. Remember to test by disabling display:flex and seeing what you get.

참고URL : https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width