Painduma - CSS-trikid

Anonim

flexVara on sub-vara Paindlik Box paigutus moodul.

See on tingliku flex-grow, flex-shrinkja flex-basis. Teine ja kolmas parameeter ( flex-shrinkja flex-basis) on valikulised.

Süntaks

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

Siin on kühvel selle kohta, millega väärtused kaardistuvad, sõltuvalt sellest, mitu väärtust te sellele annate:

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

Ühised väärtused väärtusele flex

paind: 0 automaatne;

See on sama, flex: initial;ja tingliku vaikimisi väärtus: flex: 0 1 auto. See suurendab üksust selle width/ heightomaduste (või sisu järgi, kui see pole määratud).

See muudab painduva elemendi paindumatuks, kui vaba ruumi on alles, kuid võimaldab sellel minimaalseks kahaneda, kui ruumi pole piisavalt. Joondamisvõimeid või autoveeriseid saab kasutada painduvate elementide joondamiseks piki põhitelge.

paind: auto;

See on samaväärne flex: 1 1 auto. Ettevaatust, see pole vaikeväärtus. See suurendab üksust selle width/ heightomaduste järgi, kuid muudab selle täiesti paindlikuks, nii et need neelaksid piki telge pikema ruumi.

Kui kõik üksused on kas flex: auto, flex: initialvõi flex: none, jaotatakse pärast üksuste suuruse järelejäänud ruumi ühtlane jaotis üksustega flex: auto.

painduma: puudub;

See on samaväärne flex: 0 0 auto. See suurendab eset vastavalt selle width/ heightomadustele, kuid muudab selle täiesti paindumatuks.

See sarnaneb sellega flex: initial, et isegi ülevooluolukorras ei tohi see kahaneda.

painduma:

Samaväärne flex: 1 0px. See muudab paindliku elemendi paindlikuks ja määrab paindlikkuse aluse nulli, mille tulemuseks on üksus, mis saab ülejäänud ruumi määratud osa.

Kui kõik paindmahuti elemendid kasutavad seda mustrit, on nende suurused proportsionaalsed määratud paindeteguriga.

Demo

Järgmine demo näitab tänu flexvarale Flexboxi väga lihtsat paigutust :

Siin on mõnus koodibitt:

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

Esiteks oleme lubanud paindlikke üksusi kuvada mitmes reas flex-flow: row wrap.

Siis käskime nii päisel kui ka jalusel võtta 100% praegusest vaateava laiusest, ükskõik mis.

Ja põhisisu ja mõlemad külgribad jagavad sama rida, jagades ülejäänud ruumi järgmiselt: 66% (2 / (1 + 2)) põhisisu jaoks, 33% (1 / (1 + 2)) külgriba jaoks .

Brauseri tugi

  • (kaasaegne) tähendab spetsifikatsiooni hiljutist süntaksit (nt display: flex;)
  • (hübriid) - paaritu mitteametlik süntaks aastast 2011 (nt display: flexbox;)
  • (vana) tähendab vana süntaksit aastast 2009 (nt display: box;)
Chrome Safari Firefox Ooper IE Android iOS
21+ (kaasaegne)
20 - (vana)		 3.1+ (vana) 2–21 (vana)
22+ (uus)		 12,1+ (kaasaegne) 10+ (hübriid) 2.1+ (vana) 3,2+ (vana)

Blackberry brauser 10+ toetab uut süntaksit.

Lisateavet süntaksi segamise kohta, et saada parimat brauserituge, leiate sellest artiklist (CSS-trikid) või sellest artiklist (DevOpera).