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

224

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

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

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

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

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

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

css  flexbox  width 
— pel 토니 에미
소스
플렉스 기반, 플렉스 확장 및 축소를 설명하는 최상의 기사
— ZenVentzi

답변:

339

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

브라우저 버그

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

flex-basis중첩 된 플렉스 컨테이너에서 무시됩니다. width공장.

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

참고 문헌 :

예 :

컨테이너를 사용 flex-basis하고 white-space: nowrap오버플로하는 항목을 유연하게 inline-flex만듭니다. width공장.

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

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

참고 문헌 :

예:

flex-basis(및 flex-grow) 테이블 요소에서 작동하지 않습니다

참고 문헌 :

flex-basis조부모 컨테이너가 열 박음 요소 인 경우 Chrome 및 Firefox에서 오류가 발생합니다. Edge에서 설정이 제대로 작동합니다.

포함, 위의 링크에서 제시 한 예에서와 같이 position: absolute, 사용 float하고 inline-block, 같은 결함 출력 (렌더링 jsfiddle 데모 ).

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

— 마이클 벤자민
소스
2
어때요 min-width:100px;? 축소를 비활성화하는 옵션이 될 수 있습니까?
— Mori
1
@Mori는 flex-shrink멈 춥니 다 min-width. 동등한 플렉스 규칙은입니다 flex: 1 0 100px.
— Michael Benjamin
flex: 1 0 100px같은 결과로 이어지지 만 "동등한"의 의미를 잘 모르겠습니다.
— Mori
flex: 0 0 100px예를 들어 왜 우리가 그것을 같은 것으로 간주해서는 안 됩니까?
— Mori
2
@Mori, 왜냐하면 그것은 width와 같습니다 . flex-basis에 의해 설정된 최소 너비에서 요소가 커지 려면 flex-grow : 1 구성 요소가 필요합니다 .
— Michael Benjamin
33

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

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

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

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

그래서. 와 아이

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

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

빠른 데모 :

코드 스 니펫 표시

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

— Paulie_D
소스
내가 플렉스 맥락에서 일반적으로 그 발견 둘 flex-basis과 width / height요소의 초기 시작 / 크기를 설정합니다. 예를 들어 flex-basis: 200px기본적으로와 동일하게 작동합니다 flex-basis: auto; width: 200px;. 로 flex-basis설정되어 있지 않으면 auto다음 width / height값 보다 우선 합니다. 내가 보는 유일한 차이점은 콘텐츠 오버플로가 처리되는 방식입니다.
— Karolis 2019
5

추가해야 할 가장 중요한 점은 다음과 같습니다.

브라우저가 지원하지 않으면 flex어떻게됩니까? 이 경우, width/height인수하고 해당 값이 적용됩니다.

에 width/height대한 값이 완전히 다른 경우에도 요소 를 정의 하는 것이 좋습니다 flex-basis. display:flex당신이 얻는 것을 비활성화 하고보고 테스트해야합니다 .

— 어둠의 절대자 니엣
소스
2
주요 브라우저 중 flex 속성을 지원하지 않는 브라우저는 IE <10입니다. caniuse.com/#search=flex
— Michael Benjamin
1
@Michael_B 물론, 어쩌면 나일지도 모르지만 Nintendo 3DS 브라우저를 포함하여 모바일 브라우저도 지원해야 flex합니다.
— 어둠의 절대자 니트
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.