플렉스 베이스와 폭의 차이점은 무엇입니까?
이에 대한 질문과 기사가 있었지만, 제가 아는 한 결정적인 것은 없습니다.내가 찾을 수 있는 가장 좋은 요약은
flex-bulse를 사용하면 요소의 초기/시작 크기를 다른 값이 계산되기 전에 지정할 수 있습니다.백분율 또는 절대 값일 수 있습니다.
...플렉시블 세트를 가진 요소들의 동작에 대해서는 그 자체로 설명할 수 없습니다.Flexbox에 대한 현재 지식으로는 너비를 설명할 수 없는 이유를 알 수 없습니다.
플렉스 베이스가 실제로 폭과 정확히 어떻게 다른지 알고 싶습니다.
- 너비를 플렉스 베이스(또는 그 반대)로 바꾸면 시각적으로 변경되는 것은 무엇입니까?
- 둘 다 다른 값으로 설정하면 어떻게 됩니까?값이 같은 경우에는 어떻게 됩니까?
- 폭 또는 플렉스 베이스 중 하나를 사용하는 것이 다른 하나를 사용하는 것과 크게 다를 수 있는 특별한 경우가 있습니까?
- 플렉스 랩, 플렉스 성장 및 플렉스 수축과 같은 다른 플렉스 박스 스타일과 함께 사용할 때 폭과 플렉스 베이스는 어떻게 다릅니까?
- 다른 중요한 차이점이 있습니까?
편집/명확하게 하기:이 질문은 정확히 어떤 플렉스 베이스 속성 세트인가?라는 다른 형식으로 질문되었지만 플렉스 베이스와 폭(또는 높이)의 차이를 보다 직접적으로 비교하거나 요약하는 것이 좋을 것 같습니다.
고하다려를 생각해 .flex-direction
당신의 질문을 읽을 때 가장 먼저 떠오르는 것은flex-basis에 항상 적용되는 것은 아닙니다.width.
때flex-direction이라row,flex-basis너비를 제어합니다.
하지만 언제flex-direction이라column,flex-basis높이를 제어합니다.
주요 차이점
사이에 몇 가지 중요한 차이점이 있습니다.flex-basis그리고.width/height:
flex-basis유연한 항목에만 적용됩니다. 항목이Flex는 Flex를 합니다.flex-basis하지만 사용할 수 있습니다.width그리고.height.flex-basis주축에서만 작동합니다.를 들어,이 들예어당에 있으면, 만약신이를이.flex-direction: column,width플렉스 항목의 크기를 수평으로 조정하려면 속성이 필요합니다.flex-basis절대 위치 플렉스 항목에는 영향을 주지 않습니다.width그리고.height속성이 필요합니다.절대 위치 플렉스 항목은 플렉스 레이아웃에 참여하지 않습니다.를
flex세속성 – 속성, 세가속성지 –flex-grow,flex-shrink그리고.flex-basis하나의 선언으로 깔끔하게 결합할 수 있습니다.용사를 합니다.width동일한 규칙에는 여러 줄의 코드가 필요합니다.
브라우저 동작
그것들이 어떻게 렌더링되는지의 관점에서, 사이에 차이가 없어야 합니다.flex-basis그리고.width,~하지 않는 한flex-basis이라auto또는content.
사양에서:
다음 값 이외의 모든 값에 대해
auto그리고.content,flex-basis와 동일한 방법으로 해결됩니다.width가로쓰기 모드에서.
하만그의 은.auto또는content최소이거나 전혀 없을 수 있습니다.사양에 대한 추가 정보:
항목에 ,
auto한 키드는대로기본크기속성값으로 합니다.flex-basis만약 그 값이 그 자체라면auto된 값은 면사용된값은그러입니다.content.유연 항목의 내용을 기준으로 자동 크기 조정을 나타냅니다.
참고: 이 값은 Flexible Box Layout의 초기 릴리스에는 없었으므로 일부 이전 구현에서는 이 값을 지원하지 않습니다.다음을 사용하여 동등한 효과를 얻을 수 있습니다.
auto메인 사이즈와 함께 (width또는heightauto.
명세서에 , 그서따르, 에면양사래,▁so에따면.flex-basis그리고.width동일하게 해결합니다.flex-basis이라auto또는content 이런경우는에,는에,flex-basis콘텐츠 폭을 사용할 수 있습니다(아마도,width속성도 사용할 수 있습니다.
그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반드시 100ppm은 아닐 것입니다.
지정된 너비를 렌더링하고 고정 상태로 유지하려면 축소를 비활성화해야 합니다.
div {
width: 100px;
flex-shrink: 0;
}
OR
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 사용 시 Flex 항목이 오버플로됨
- 폭과 플렉스 기준의 차이
- 중첩된 유연 컨테이너의 크기를 조정할 때 유연 기준이 무시됩니다.
- flex-tunction:100punction은 너비와 다른 기능을 수행합니다.100punction+flex-tunction:auto
예:
- https://jsfiddle.net/t419zhra/ (출처: @Dremora)
- https://codepen.io/anon/pen/NVxaoy (출처 @Daniel)
- https://jsfiddle.net/voc9grx6/ (출처:크롬 버그)
- https://jsfiddle.net/qjpat9zk/ (출처:크롬 버그)
:사용flex-basis그리고.white-space: nowrapinline-flex컨테이너.width작동하다.
플렉스 컨테이너가 다음과 같이 설정된 것 같습니다.inline-flex 알아보다 ㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜflex-basis의 형제자매를 렌더링할 때 아이에게.white-space: nowrap너비가 정의되지 않은 항목일 수도 있습니다.컨테이너가 아이템을 수용하기 위해 확장되지 않습니다.
하지만 그 때.width이 속이대사다니용됩신 됩니다.flex-basis용기는 어린이의 크기를 존중하고 그에 따라 확장됩니다.IE11 및 Edge에서는 이 문제가 발생하지 않습니다.
참조:
예:
- https://jsfiddle.net/p18h0jxt/1/ (위 첫 게시물부터)
flex-basis)flex-grow) 테이블 요소에서 작업하지 않음
참조:
flex-basisChrome 및 Firefox에서 상위 컨테이너가 축소 적합 요소인 경우 오류가 발생합니다.Edge에서 설정이 잘 작동합니다.
, 의위링제예와같이시다, 포니합함을다음된크를 포함합니다.position: absolute의사의 float그리고.inline-block또한 동일한 결함이 있는 출력을 렌더링합니다(jfiddle 데모).
IE 10 및 11에 영향을 미치는 버그:
flex단위가 없는 속기 선언flex-basis됩니다.flex-basis을 설명하지box-sizing: border-boxflex-basis하지calc()- 중성이무에서 됩니다.
flex-basis를 할 때flex
Michael_B의 훌륭한 요약 외에도 다음과 같이 반복할 가치가 있습니다.
flex-bulse를 사용하면 요소의 초기/시작 크기를 다른 값이 계산되기 전에 지정할 수 있습니다.백분율 또는 절대 값일 수 있습니다.
여기서 중요한 부분은 이니셜입니다.
다른 플렉스 증가/수축 특성이 적용될 때까지 너비/높이로 결정됩니다.
그래서. 아이가.
.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-basis그리고.width(또는)height모드에 ) 조정 측면("flexible sizing을flex-grow: 0; flex-shrink: 0;).
Layout의 목 항 자 크 기 으 적 Flex 이 서 의 에 니 됩 비 롯 다 외 예 웃 아 레 같 은 과 다 음 로 본 의 가 기 동 소 최 ▁flex ▁it ▁to ▁size ▁defaults ▁themin-content에 0즉평기. 즉, 기본, 본은럼입니다.min-width: auto까지 계산min-content에 0.
는 그결는입니다.flex-basis(기본적으로) 아래에 다음과 같이 바인딩됩니다.min-content 작은 min-content를 들어, 예를 들어, 면들를예.flex-basis: 0은 할것니로 입니다.min-content이는 기본적으로 상자의 크기가 적어도 내용의 크기를 가지고 있기 때문에 상자의 내용이 오버플로되도록 할 수 없음을 의미합니다.
이는 에 대한 핵심적인 차이입니다.width로 작게 설정할 수 .min-width은 " " "입니다.0이 다음 같다 의 값이면,width 다작니보다 작습니다.min-content내용물이 상자를 넘치게 할 것입니다.
이 동작은 사양에 언급되어 있지만, 7.1.1.1의 끝에 있는 잘못된 위치에 있는 코멘트에만 암시적으로 언급되어 있습니다. 의 기본값.
기본적으로 유연한 항목은 최소 내용 크기(가장 긴 단어 또는 고정 크기 요소의 길이) 아래로 줄어들지 않습니다.이 값을 변경하려면 최소 너비 또는 최소 높이 속성을 설정합니다.(§ 4.5 플렉스 항목의 자동 최소 크기 참조).
하면 경계가 되어 댓에글언급것최낮으경아고계지, 0로면설로효비다니생어되됩성활화성으과적하정가면이 됩니다.flex-basis예상대로 행동하다
하지만 단점도 있습니다.첫째, 주축에 대한 최소 크기 속성이 없습니다. 올른방을사합니다야해용법을 .min-width/min-height또는min-block-size/min-inline-size 재의재산에 입니다.flex-direction를 flex-direction올바른 최소 크기 속성을 다시 찾아야 합니다.
번째로 두번로째.flex-basis단순히 초기 크기에 추가하는 대신 더 이상 공간을 비례 크기의 상자로 분배하는 데 사용할 수 없습니다.자세한 내용은 사양의 그림 7을 참조하십시오.
여기 최소한의 예가 있습니다. 세트min-width: 0만들기 위해서flex-basis예상대로 행동하다
.container {
display: flex;
}
.container div {
background-color: lightgrey;
border: 1px solid black;
margin: 0 10px;
/* disable any flexible sizing */
flex-grow: 0;
flex-shrink: 0;
/* TOGGLE ME */
/* min-width: 0; */
}
.mincontent {
width: min-content;
}
.smallerflexbasis {
flex-basis: 3ex;
}
.smallerwidth {
width: 3ex;
}<div class="container">
<div class="mincontent">Lorem ipsum</div>
<div class="smallerflexbasis">Lorem ipsum</div>
<div class="smallerwidth">Lorem ipsum</div>
</div>추가해야 할 가장 중요한 사항은 다음과 같습니다.
가 지원하지에는 해야 ?flex 이런경우는에,는에,width/height인수하면 해당 값이 적용됩니다.
정하는것매은좋다생니입각은다니우입적필수거의의▁- -를 정의하는 은 - 인 - 좋은 width/height요소에서, 비록 당신이 완전히 다른 값을 가지고 있더라도.flex-basis사용하지 않도록 설정하여 테스트해야 합니다.display:flex그리고 당신이 얻는 것을 보는 것.
디브의 디브를 .min-width:600px창 크기가 600µs 미만이 되면 좋은 ux 디자인이 아닌 수평 스크롤 막대를 볼 수 있습니다.
로 하면,flex-basis:600px창 크기가 600m 미만이 되면 상자가 축소되고 수평 막대가 보이지 않습니다.
:flex-basisFlex 항목에만 적용됩니다.
포장을 하고 있으면 차이가 납니다.
를 들어,를 예를들어, 은당아이로 합니다.width:0마무리가 될 거라 기대하고 있습니다. 그런 일은 일어나지 않을 겁니다.하지만 함께flex-basis:0그것은 끝날 것 같아요.(오버플로가 숨겨져 있지 않으면)
언급URL : https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
'programing' 카테고리의 다른 글
| fragment를 제거하는 방법, 즉 finish()와 동등한 fragment를 제거하는 방법? (0) | 2023.08.01 |
|---|---|
| HTML 파일을 WebView로 로드 (0) | 2023.08.01 |
| MySQL max()가 있는 그룹 함수를 잘못 사용함 (0) | 2023.08.01 |
| java -jar를 실행하는 동안 Main-Class 매니페스트 특성을 로드하지 못했습니다. (0) | 2023.08.01 |
| Ruby on Rails 활성 레코드를 사용하여 여러 레코드를 삽입합니다. (0) | 2023.08.01 |