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
사이에
차이
가 없어야합니다.
사양에서 :
auto
및content
이외의 모든 값에 대해 가로 쓰기 모드의width
와 동일한 방식으로flex-basis
가 해결됩니다.
그러나
auto
또는
content
의 영향은 최소한이거나 전혀 없을 수 있습니다.
사양에서 더 많은 것 :
flex 항목에 지정된 경우
auto
키워드는 기본 크기 특성의 값을 사용 된flex-basis
. 해당 값이auto
인 경우 사용 된 값은content
입니다.플렉스 항목의 내용을 기반으로 자동 크기 조정을 나타냅니다.
참고 :이 값은 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 */
속기 는 일반적인 용도 를 수용하기 위해 지정되지 않은 구성 요소를 올바르게 재설정하므로, 속기 속성 대신 직접
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
사용한 플렉스 아이템
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)가 상위 컨테이너의 전체 너비를 확장
예:
- https://jsfiddle.net/p18h0jxt/1/ (위의 첫 번째 게시물에서)
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
)를 실험하면 몇 가지 흥미로운 결과가 발생할 수 있습니다.