조심해
일부 브라우저 :
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 업데이트
최신 버전의 Chrome이 마침내이 문제를 해결 한 것 같지만 다른 브라우저는 여전히 해결하지 못했습니다.
Chrome Ver 74에서 테스트 및 작동했습니다.