플렉스 1의 의미는 무엇입니까?

플렉스 1의 의미는 무엇입니까?

가 알다시피, 모알피다시두가리우,피▁as시,flex재산은 그것의 약어입니다.flex-grow,flex-shrink 리고그고.flex-basis특성.기본값은 다음과 같습니다.0 1 auto즉, , 즉을 합니다.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

는 많은 했습니다.flex: 1사용됩니다.의 줄임말입니까?1 1 auto또는1 0 auto나는 그것이 무엇을 의미하는지 이해할 수 없고 구글을 검색해도 아무것도 얻지 못합니다.

flex: 1을 의미합니다.

flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

다음은 설명입니다.

https://www.w3.org/TR/css-flexbox-1/ #flex-common

< 파일: <positive number>
flex와 동등함: <positive-number> 10. flex 항목을 유연하게 만들고 flex 기준을 0으로 설정하여 flex 컨테이너에서 지정된 비율의 여유 공간을 받는 항목을 생성합니다.플렉스 용기의 모든 항목이 이 패턴을 사용하는 경우 해당 크기는 지정된 플렉스 계수에 비례합니다.

그므로러.flex:1는 와동합다니등다에 합니다.flex: 1 1 0

조심하세요.

일부 브라우저의 경우:

flex:1; 같지 않음flex:1 1 0;

flex:1;=flex:1 1 0n;(여기서 n은 길이 단위).

• flex-grow: 항목이 나머지 유연한 항목과 비교하여 얼마나 증가할지를 지정하는 숫자입니다.
• flex-shrink 항목이 나머지 유연한 항목과 비교하여 얼마나 줄어들 것인지를 지정하는 숫자
• flex-basis 항목의 길이입니다.올바른 값: "auto", "inherit" 또는 "%", "px", "em" 또는 기타 길이 단위 뒤에 오는 숫자입니다.

여기서 핵심은 Flex-Basis에는 길이 단위가 필요하다는 것입니다.

를 들어 에서 를들 의어 Chrome 우경flex:1그리고.flex:1 1 0다른 결과를 낳습니다.대부분의 상황에서 다음과 같이 보일 수 있습니다.flex:1 1 0;작동하고 있지만 실제로 어떤 일이 일어나는지 살펴보도록 하겠습니다.

예

Flex basis는 무시되고 Flex-grow 및 flex-shrink만 적용됩니다.

flex:1 1 0;=flex:1 1;=flex:1;

그러나 컨테이너의 적용 단위가 중첩된 경우에는 언뜻 보기에 정상으로 보일 수 있습니다. 예상치 못한 결과를 예상하십시오!

크롬에서 이 예를 사용해 보십시오.

.Wrap{
  padding:10px;
  background: #333;
}
.Flex110x, .Flex1, .Flex110, .Wrap {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.Flex110 {
  -webkit-flex: 1 1 0;
  flex: 1 1 0;
}
.Flex1 {
  -webkit-flex: 1;
  flex: 1;
}
.Flex110x{
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}

FLEX 1 1 0
<div class="Wrap">
  <div class="Flex110">
    <input type="submit" name="test1" value="TEST 1">
  </div>
</div>

FLEX 1
<div class="Wrap">
  <div class="Flex1">
    <input type="submit" name="test2" value="TEST 2">
  </div>
</div>

FLEX 1 1 0%
<div class="Wrap">
  <div class="Flex110x">
    <input type="submit" name="test3" value="TEST 3">
  </div>
</div>

---

2021년 업데이트

은 모든주브의최저신버구보다것입니으로현된전이요라우▁to▁the다▁implement를 구현하는 것으로 보입니다.flex: 1W3C 표준을 준수합니다.크롬, 오페라, 엣지, 파이어폭스, 사파리, 크롬 및 맥OS, 윈도, 리눅스, iOS 및 안드로이드 와 브레이브 같 크롬 형었에습되니인다확서변은부일이의는다니▁chrome습었되▁brave인확와형변서이.Internet Explorer에서 테스트를 시도할 때 Windows 10에서 Edge 브라우저가 강제로 로드되었습니다.

사용자가 여전히 이전 버전의 브라우저를 구현할 것으로 예상되는 경우 장치를 추가하는 것이 더 안전합니다.

저는 또한 혼란스러웠습니다.flex: 1는 이할 것입니다 :) ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅠ

▁of의 개념을 .flex: 1 있는지 를 들어, 먼상 위 요 소 레 디 있 속 확 합 야 니 다 해 인 지 는 이 성 저 이 플 스 된 설 정 유 에연 하display: flex이제 상위 요소 내에 중첩된 유연 요소는 유연성 1을 사용할 수 있습니다.

, 이제 영향을 요?라는 입니다.요소에 다음이 있는 경우flex: 1은 모든 , 이은모다요크의그내기들가같용은의요만들은, 가 있는 요소를 의미합니다.flex: 1남은 전체 공간이 제공됩니다.아래 그림을 참조하십시오.

Ver 에서 Chrome Ver 84는flex: 1는 와동합다니등다에 합니다.flex: 1 1 0%다음은 스크린샷 모음입니다.

은 기값은다같설니됩다정이과음으로 .1 1 0%((으)의 flex-grow flex-shrink flex-basis각각), 아마도 이것들이 "유연한" 항목에 가장 적합한 값이기 때문일 것입니다.하는 것은 과 같습니다.

• 플렉스 레코드:항목의 이상적인 크기를 지정합니다.이상적인 의미는 "추가 공간이 없거나 공간이 부족하지 않다고 가정"하는 것입니다.0%는 우리가 그들에게 이상적인 크기를 가지고 있지 않다는 것을 의미합니다. 우리는 그들이 진정으로 유연하게 크기를 맞추기를 원합니다.사용 가능한 공간을 기준으로 자동으로 크기가 조정되기를 원합니다(따라서 "유연한"이라는 단어).
• flex-grow: flex-basis를 고려한 후, 여분의 공간이 남아 있는 경우, "추가 공간"(전체 공간에 대해 이야기하는 것이 아님)을 항목 간에 나누는 방법을 지정합니다.유연성이 높은 제품은 여분의 공간을 더 많이 차지합니다.모든 항목이 추가 공간에서 동일한 공유를 갖도록 기본적으로 모든 항목에 동일한 유연한 증가율을 사용하는 것이 좋습니다.Flex-basis가 0%일 때 모든 항목에 대해 Flex-grow가 1이면 "컨테이너의 전체 공간"이 분할됩니다(Flex-basis는 공간을 사용하지 않으므로 추가 공간은 컨테이너의 전체 공간과 같습니다).
• flex-shrink: flex-basis를 고려한 후, 사용 가능한 공간이 충분하지 않으면 "공간 부족"(그리고 전체 공간이 아니라) 항목 간에 어떻게 분할(부과)해야 하는지 지정합니다.유연성이 더 높은 사람들은 그 부족함을 더 "참아야" 할 것입니다.

---

예:

• 플렉스 베이스 3개 항목에 400px의 플렉스 베이스는 우리가 각각 400px 폭의 3개 항목을 갖는 것을 의미합니다.이제 무슨 일이 일어날까요?
  1. 여유 공간이 있다면요?용기 너비가 1500픽셀이라고 가정합니다.3개 항목이 1200픽셀을 차지할 것인데, 추가 300픽셀은 어떻게 해야 합니까?
  2. 컨테이너에 공간이 부족하면요?예를 들어, 1500ppm 용기에 각각 400ppm씩 5개의 항목이 있는 경우(ppm = |ppm - 5 * 400ppm | = 500ppm).

• 위의 두 질문에 대한 답은 플렉스-성장(첫 번째 질문에 대한 답)과 플렉스-축소(두 번째 질문에 대한 답)입니다.

예를 들어, 세 가지 항목 중 하나의 유연한 성장이 5이고 다른 항목이 여전히 기본값(예: 1)으로 설정되어 있으면 어떻게 됩니까?그러면 5의 플렉스 성장을 가진 것은 (300px / (1+1+5) * 여분의 공간을 얻게 됩니다.

각 회전이에는 " " " " " " 를 할 수 .flex: 0 0 100%항목이 부모의 전체 너비를 차지하고 성장/성장을 해제하는 유연성을 갖도록 모든 자식에 적용됩니다.

flex: 1 다flex-grow1은 (으)로 표시됩니다.)0).

이 기능:

모든 항목의 유연한 성장이 1로 설정된 경우 용기의 나머지 공간은 모든 어린이에게 균등하게 분배됩니다.하위 항목 중 하나의 값이 2이면 나머지 공간이 다른 항목보다 두 배 더 많은 공간을 차지합니다.

(출처: CSS 트릭)

에 대한 ) 숫자의 구문의 .flex-basis 옵션 예를 들어,

됩니다.라고 해석됩니다.flex: <number> 1 0그자리의 flex-shrink는 은값다같과가이다니됩정음다▁be로 합니다.1 리고그고.flex-basis는 은값다같과가이다니됩정음다▁be로 합니다.0.

(출처: MDN)

Flex 부모 항목인 각 요소에 Flex : 1을 사용하면 모든 항목의 너비가 동일합니다.

그flex는 재은의줄다니입말임산다and▁shorth의 입니다.flex-grow,flex-shrink,그리고.flex-basis.

그러나 flex 속성의 값이 하나만 있으면 "flex-grow"만 설정하고 다른 속성은 생략되므로 기본값을 얻습니다.(초기값 아님)

---

위해서flex: 1;

flex-grow -> 사용자 정의 = 1(이상의 값)

flex-shrink -> 생략 시 기본값은 1입니다.(이니셜은 0)

flex-basis -> 생략 시 기본값은 0입니다.(초기값은 자동)

flex:1 inside flex 컨테이너를 사용하면 모든 flex 항목이 동일한 공간을 차지합니다.

특정 플렉스 항목 내부에 flex:1을 사용하면 해당 플렉스 항목이 남은 공간을 차지합니다.

Flex: 1는 와동합다니등다에 합니다.Flex: 1 0 0그리고.Flex: 1 1 0

다음을 위해 각각 출력을 보여주는 제가 찍은 이미지를 참조하십시오.Flex: 1그리고.Flex: 1 0 0그리고.Flex: 1 1 0 이하로

Flex: 1
Flex: 1 0 0 Flex: 1 1 0

언급URL : https://stackoverflow.com/questions/37386244/what-does-flex-1-mean