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

Program / 글쓴이

우리 모두가 아시다시피, 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입니까? 그게 무슨 뜻인지 이해할 수없고 Google을 검색해도 아무것도 얻지 못합니다.

답변

설명은 다음과 같습니다.

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 업데이트

최신 버전의 Chrome이 마침내이 문제를 해결 한 것 같지만 다른 브라우저는 여전히 해결하지 못했습니다.

Chrome Ver 74에서 테스트 및 작동했습니다.

답변