Fleks-rasti - CSS-trikovi

Anonim

flex-growNekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.

Definira sposobnost da flex element raste ako je potrebno. Prihvaća jedinstvenu vrijednost koja služi kao omjer. Diktira količinu dostupnog prostora unutar fleks spremnika koji bi trebao zauzeti predmet.

Na primjer, ako su svi predmeti flex-growpostavljeni na 1, svako će dijete postaviti jednaku veličinu unutar spremnika. Ako biste nekome od djece dali vrijednost 2, to bi dijete zauzelo dvostruko više prostora od ostalih.

Sintaksa

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

Demo

Sljedeća demonstracija pokazuje kako se izračunava preostali prostor prema različitim vrijednostima flex-grow(za bolje razumijevanje pogledajte CodePen).

Pogledajte ovu olovku!

Sve stavke imaju flex-growvrijednost 1, osim treće koja ima flex-growvrijednost 2. To znači da će, kada se raspoloživi prostor rasporedi, treća flex-stavka imati dvostruko više prostora od ostalih.

Podrška preglednika

  • (moderno) znači nedavnu sintaksu iz specifikacije (npr. display: flex;)
  • (hibrid) znači neobičnu neslužbenu sintaksu iz 2011. (npr. display: flexbox;)
  • (stara) znači stara sintaksa iz 2009. (npr. display: box;)
Krom Safari Firefox Opera IE Android iOS
21+ (moderno)
20- (staro)
3,1+ (staro) 2-21 (stari)
22+ (novi)
12,1+ (moderno) 10+ (hibridno) 2,1+ (staro) 3,2+ (staro)

Preglednik Blackberry 10+ podržava novu sintaksu.

Za više informacija o tome kako miješati sintakse kako biste dobili najbolju podršku za preglednik, pogledajte ovaj članak (CSS-trikovi) ili ovaj članak (DevOpera).