Co oznacza flex: 1?

Jak wszyscy wiemy, flexnieruchomość jest skrótem dla flex-grow, flex-shrinkoraz flex-basiswłaściwości. Jego domyślną wartością jest 0 1 auto, co oznacza

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

ale zauważyłem, że w wielu miejscach flex: 1jest używany. Czy to skrót od 1 1 autoczy 1 0 auto? Nie rozumiem, co to znaczy i nic nie dostaję, gdy wyszukuję w Google.

Oto wyjaśnienie:

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

flex: <positive-number>
Equivalent to flex: <positive-number> 1 0. Uelastycznia element flex i ustawia podstawę flex na zero, w wyniku czego element otrzymuje określoną część wolnego miejsca w kontenerze flex. Jeśli wszystkie elementy w kontenerze elastycznym używają tego wzoru, ich rozmiary będą proporcjonalne do określonego współczynnika elastyczności.

Dlatego flex:1jest równoważneflex: 1 1 0

flex: 1 oznacza co następuje:

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

BĄDŹ OSTROŻNY

W niektórych przeglądarkach:

flex:1; nie równa sięflex:1 1 0;

flex:1;= flex:1 1 0n;(gdzie n jest jednostką długości).

• flex-grow: liczba określająca, jak bardzo pozycja wzrośnie w stosunku do pozostałych elastycznych elementów.
• flex-shrink Liczba określająca, jak bardzo element zmniejszy się w stosunku do pozostałych elementów elastycznych
• flex-base Długość elementu. Wartości prawne: „auto”, „inherit” lub liczba, po której następuje „%”, „px”, „em” lub inna jednostka długości.

Kluczową kwestią w tym przypadku jest to, że podstawa elastyczna wymaga jednostki długości .

Na przykład w Chrome flex:1i flex:1 1 0daje różne wyniki. W większości przypadków może się wydawać, że flex:1 1 0;działa, ale przyjrzyjmy się, co naprawdę się dzieje:

PRZYKŁAD

Podstawa Flex jest ignorowana i stosowane są tylko flex-grow i flex-shrink.

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

Na pierwszy rzut oka może się to wydawać poprawne, jednak jeśli zastosowana jednostka pojemnika jest zagnieżdżona; oczekuj nieoczekiwanego!

Wypróbuj ten przykład w 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>

ZGODNOŚĆ

Należy zauważyć, że to się nie udaje, ponieważ niektóre przeglądarki nie są zgodne ze specyfikacją .

Przeglądarki korzystające z pełnej specyfikacji Flex:

• Firefox - ✓
• Edge - ✓ (Wiem, ja też byłem w szoku.)
• Chrome - x
• Odważny - x
• Opera - x
• IE - (lol, działa bez jednostki długości, ale nie z jedną.)

UPDATE 2019

Wydaje się, że najnowsze wersje Chrome w końcu rozwiązały ten problem, ale inne przeglądarki nadal nie.

Przetestowane i działa w Chrome Ver 74.