flex : 1은 무엇을 의미합니까?

flex : 1은 무엇을 의미합니까?

---

우리 모두는 플렉스 속성은위한 속기, 알고 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입니까? 무슨 뜻인지 이해할 수 없나요? 인터넷 검색에서 아무것도 검색하지 않습니다.

---

다음은 설명입니다.

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

flex : <positive-number>
flex : <positive-number> 1 0과 동일합니다. 플렉스 항목을 유연하게 만들고 플렉스 기준을 0으로 설정하여 항목이 플렉스 컨테이너에있는 여유 공간의 지정된 비율을받습니다. 플렉스 컨테이너의 모든 항목이이 패턴을 사용하는 경우 해당 크기는 지정된 플렉스 팩터에 비례합니다.

따라서 flex:1다음과 같습니다.flex: 1 1 0

---

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

---

조심해

일부 브라우저 :

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에 길이 단위 가 필요하다는 것 입니다.

예를 들어 크롬 flex:1과 flex:1 1 0다른 결과를 생성합니다. 대부분의 경우 flex:1 1 0;작동하는 것처럼 보일 수 있지만 실제로 어떤 일이 발생하는지 살펴 보겠습니다.

예

Flex 기준은 무시되고 flex-grow 및 flex-shrink 만 적용됩니다.

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

언뜻보기에는 괜찮아 보일 수 있지만 컨테이너의 적용된 단위가 중첩 된 경우; 예상치 못한 기대!

CHROME에서이 예를 시도해보세요.

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

적합성

일부 브라우저가 사양 을 준수하지 않았기 때문에 이것이 실패한다는 점에 유의해야합니다 .

전체 플렉스 사양을 사용하는 브라우저 :

• Firefox-✓
• Edge-✓ (나도 충격을 받았습니다.)
• 크롬-x
• 용감한-x
• 오페라-x
• IE- (웃음, 길이 단위 없이는 작동하지만 하나로는 작동하지 않습니다.)

---

2019 업데이트

Latest versions of Chrome seem to have finally rectified this issue but other browsers still have not.

Tested and working in Chrome Ver 74.

참고URL : https://stackoverflow.com/questions/37386244/what-does-flex-1-mean