Flex - CSS-Tricks

flexNieruchomość jest sub-property modułu Flexible Box Layout.

To jest skrótem flex-grow, flex-shrinka flex-basis. Drugi i trzeci parametr ( flex-shrinki flex-basis) są opcjonalne.

Składnia

flex: none | ( ? || ) .flex-item ( /* this */ flex: 1 100px; /* is the same as */ flex-grow: 1; flex-basis: 100px; /* and it leaves the flex-shrink property alone, which would be */ flex-shrink: inherit; /* defaults to 1 */ )

Oto podsumowanie tego, na co mapują wartości w zależności od tego, ile wartości im podasz:

flex: none /* value 'none' case */ flex: /* One value syntax, variation 1 */ flex: /* One value syntax, variation 2 */ flex: /* Two values syntax, variation 1 */ flex: /* Two values syntax, variation 2 */ flex: /* Three values syntax */ flex: inherit

Wspólne wartości dla flex

flex: 0 auto;

To jest tak samo jak flex: initial;i skrót od wartości domyślnej: flex: 0 1 auto. Określa rozmiar elementu na podstawie jego width/ heightwłaściwości (lub jego zawartości, jeśli nie jest ustawiona).

Sprawia, że ​​element elastyczny jest nieelastyczny, gdy jest trochę wolnego miejsca, ale pozwala mu zmniejszyć się do minimum, gdy nie ma wystarczającej ilości miejsca. Możliwości wyrównania lub automarginesy można wykorzystać do wyrównania elementów elastycznych wzdłuż głównej osi.

flex: auto;

Jest to równoważne z flex: 1 1 auto. Uwaga, to nie jest wartość domyślna. Wymiaruje element w oparciu o jego width/ heightwłaściwości, ale czyni go w pełni elastycznym, dzięki czemu pochłania dodatkową przestrzeń wzdłuż głównej osi.

Jeśli wszystkie elementy są albo flex: auto, flex: initiallub flex: none, pozostała przestrzeń po przedmioty zostały których wielkość będzie równomiernie do pozycji z flex: auto.

flex: brak;

Jest to równoważne z flex: 0 0 auto. Wymiaruje element zgodnie z jego width/ heightwłaściwościami, ale czyni go w pełni nieelastycznym.

Jest to podobne do flex: initialtego, że nie może się kurczyć, nawet w sytuacji przepełnienia.

zgiąć:

Odpowiednik flex: 1 0px. Sprawia, że ​​element flex jest elastyczny i ustawia podstawę flex na zero, w wyniku czego element otrzymuje określoną część pozostałej przestrzeni.

Jeśli wszystkie elementy w kontenerze elastycznym używają tego wzoru, ich rozmiary będą proporcjonalne do określonego współczynnika elastyczności.

Próbny

Poniższe demo przedstawia bardzo prosty układ z Flexbox dzięki flexwłaściwości:

Oto rewelacyjny fragment kodu:

.header, .footer ( flex: 1 100%; ) .sidebar ( flex: 1; ) .main ( flex: 2; )

Po pierwsze, zezwoliliśmy na wyświetlanie elementów elastycznych w wielu wierszach z rozszerzeniem flex-flow: row wrap.

Następnie mówimy zarówno nagłówkowi, jak i stopce, aby zajęły 100% bieżącej szerokości widoku, bez względu na wszystko.

A główna zawartość i oba paski boczne będą dzielić ten sam wiersz, dzieląc pozostałą przestrzeń w następujący sposób: 66% (2 / (1 + 2)) dla głównej zawartości, 33% (1 / (1 + 2)) dla paska bocznego .

Wsparcie przeglądarki

• (nowoczesny) oznacza najnowszą składnię ze specyfikacji (np. display: flex;)
• (hybryda) oznacza dziwną nieoficjalną składnię z 2011 roku (np. display: flexbox;)
• (stara) oznacza starą składnię z 2009 roku (np. display: box;)

Chrom	Safari	Firefox	Opera	TO ZNACZY	Android	iOS
21+ (nowoczesny) 20- (stary)	3.1+ (stary)	2-21 (stare) 22+ (nowe)	12.1+ (nowoczesny)	10+ (hybryda)	2.1+ (stary)	3.2+ (stary)

Przeglądarka Blackberry 10+ obsługuje nową składnię.

Więcej informacji na temat łączenia składni w celu uzyskania najlepszej obsługi przeglądarki można znaleźć w tym artykule (Sztuczki CSS) lub w tym artykule (DevOpera).