Flex-shrink - Trucchi CSS

Anonim

La flex-shrinkproprietà è una proprietà secondaria del modulo Layout riquadro flessibile.

Specifica il "fattore di flessione della flessione", che determina quanto l'elemento flessibile si restringerà rispetto al resto degli articoli flessibili nel contenitore flessibile quando non c'è abbastanza spazio sulla riga.

Quando viene omesso, viene impostato su 1e il fattore di flessione viene moltiplicato per la base flessibile quando si distribuisce lo spazio negativo.

Sintassi

flex-shrink: .flex-item ( flex-shrink: 2; )

Demo

Per vedere il pieno potenziale di questa demo, dovresti essere in grado di ridimensionarne la larghezza, quindi dai un'occhiata direttamente su CodePen.

Dai un'occhiata a questa penna!

In questa demo:

  • Il primo elemento ha flex: 1 1 20em(abbreviazione per flex-grow: 1, flex-shrink: 1, flex-basis: 20em)
  • Il secondo elemento ha flex: 2 2 20em(abbreviazione per flex-grow: 2, flex-shrink: 2, flex-basis: 20em)

Entrambi gli articoli flessibili vogliono essere larghi 20em. A causa del flex-grow (primo parametro), se il contenitore flessibile è più grande di 40em, il secondo figlio occuperà il doppio dello spazio rimanente del primo figlio. Ma se l'elemento genitore è largo meno di 40em, il secondo figlio ne verrà rasato il doppio rispetto al primo figlio, facendolo sembrare più piccolo (a causa del secondo parametro, flessione).

Supporto browser

  • (moderno) indica la sintassi recente dalla specifica (ad esempio display: flex;)
  • (ibrido) indica una strana sintassi non ufficiale del 2011 (es. display: flexbox;)
  • (vecchio) indica la vecchia sintassi del 2009 (ad esempio display: box;)
Cromo Safari Firefox musica lirica IE Android iOS
21+ (moderno)
20- (vecchio)		 3.1+ (vecchio) 2-21 (vecchio)
22+ (nuovo)		 12.1+ (moderno) 10+ (ibrido) 2.1+ (vecchio) 3.2+ (vecchio)

Il browser Blackberry 10+ supporta la nuova sintassi.

Per ulteriori informazioni su come mescolare le sintassi per ottenere il miglior supporto del browser, fare riferimento a questo articolo (CSS-Tricks) o questo articolo (DevOpera).