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

치다 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속성으로 컨테이너는 자녀의 크기를 존중하고 그에 따라 확장됩니다.

참고 문헌 :

• Chrome은 어린이의 콘텐츠에 따라 플렉스 부모를 확장하지 않습니다
• 플렉스 기반을 사용할 때 플렉스 아이템 오버 플로우
• 폭과 플렉스 기준의 차이점
• 중첩 된 플렉스 컨테이너의 크기를 조정할 때는 플렉스 기반이 무시됩니다.
• flex-basis : 100px는 width : 100px + flex-basis : auto와 다른 것을 수행합니다.

예 :

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

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

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

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

참고 문헌 :

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

예:

• https://jsfiddle.net/p18h0jxt/1/ (위의 첫 번째 게시물에서)

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

참고 문헌 :

• 플렉스 박스가 왜 div와 작동하지만 테이블은 작동하지 않습니까?
• Flex-Grows가 아닌 이유 : Safari에서 테이블 1 개가 작동합니까? (그리고 가장자리)

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

• Flexbox 컨텐츠에 맞게 너비가 확장되지 않는 절대 위치의 컨테이너

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

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

• flex단위가없는 flex-basis값을 가진 속기 선언 은 무시됩니다.
• flex-basis 설명하지 않습니다 box-sizing: border-box
• flex-basis 지원하지 않습니다 calc()
• 속기 를 flex-basis사용할 때는 중요성이 무시됩니다flex

답변

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

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