Fleks - CSS-trikovi

Anonim

flexNekretnina je pod-vlasništvo Fleksibilna Box Izgled modula.

To je skraćenica za flex-grow, flex-shrinki flex-basis. Drugi i treći parametar ( flex-shrinki flex-basis) nisu obavezni.

Sintaksa

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 */ )

Evo mjera na što se vrijednosti preslikavaju, ovisno o tome koliko vrijednosti mu date:

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

Uobičajene vrijednosti za flex

fleks: 0 auto;

To je isto kao flex: initial;i stenogram za zadanu vrijednost: flex: 0 1 auto. Stavku određuje na temelju njezinih width/ heightsvojstava (ili sadržaja ako nije postavljen).

Čini fleksibilni predmet nefleksibilnim kad ostane malo slobodnog prostora, ali omogućuje mu da se smanji na minimum kad nema dovoljno prostora. Sposobnosti poravnanja ili automargine mogu se koristiti za poravnavanje fleksibilnih stavki duž glavne osi.

fleks: auto;

Ovo je ekvivalentno flex: 1 1 auto. Pazite, ovo nije zadana vrijednost. Predmet dimenzionira na temelju njegovih width/ heightsvojstava, ali ga čini potpuno fleksibilnim tako da apsorbira dodatni prostor duž glavne osi.

Ako su svi predmeti su ili flex: auto, flex: initialili flex: none, sav preostali prostor nakon stavke su veličinom će biti ravnomjerno raspoređena na stavke s flex: auto.

fleks: nijedan;

Ovo je ekvivalentno flex: 0 0 auto. Ona je veličine stavka u skladu s njegovim width/ heightsvojstva, ali čini potpuno nefleksibilan.

To je slično flex: initialosim što se ne smije skupljati, čak ni u situaciji prelijevanja.

savijati:

Ekvivalentno flex: 1 0px. To fleksibilnu stavku čini fleksibilnom i postavlja fleksibilnu osnovu na nulu, što rezultira stavkom koja prima navedeni udio preostalog prostora.

Ako se svi predmeti u fleks spremniku koriste ovim uzorkom, njihove će veličine biti proporcionalne navedenom faktoru savijanja.

Demo

Sljedeća demonstracija prikazuje vrlo jednostavan izgled s Flexboxom zahvaljujući flexsvojstvu:

Evo otkrivenog dijela koda:

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

Prvo, odobrili smo fleks stavke za prikaz u više redaka pomoću flex-flow: row wrap.

Tada kažemo i zaglavlju i podnožju da zauzmu 100% trenutne širine vidnog polja, bez obzira na sve.

Glavni sadržaj i obje bočne trake dijelit će isti redak, dijeleći preostali prostor kako slijedi: 66% (2 / (1 + 2)) za glavni sadržaj, 33% (1 / (1 + 2)) za bočnu traku .

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