Flexboxi täielik juhend - CSS-trikid

Taust

Flexbox Layout(Paindlik Box) mooduli (W3C Võimalik soovitus seisuga oktoober 2017) eesmärk on tagada tõhusam viis panema, align ja levitada ruumi seas objektide konteiner, isegi kui nende suurus ei ole teada ja / või dünaamiline (seega sõna „paindlik“).

Paindliku paigutuse peamine mõte on anda konteinerile võimalus muuta oma esemete laiust / kõrgust (ja järjekorda), et saadaolev ruum kõige paremini täita (enamasti igasuguste kuvaseadmete ja ekraanisuuruste jaoks). Paindlik konteiner laiendab üksusi vaba ruumi täitmiseks või vähendab neid ülevoolu vältimiseks.

Kõige tähtsam on see, et flexboxi paigutus on suunda-agnostiline erinevalt tavalistest paigutustest (plokk, mis on vertikaalselt ja inline, mis on horisontaalselt põhinev). Kuigi need sobivad lehtede jaoks hästi, pole neil paindlikkust (pole mõeldud sõnamängu), et toetada suuri või keerukaid rakendusi (eriti kui tegemist on orientatsiooni muutmise, suuruse muutmise, venitamise, kahandamisega jne).

Märkus. Flexboxi paigutus sobib kõige paremini rakenduse komponentidele ja väikesemahulistele paigutustele, samas kui võrgu paigutus on mõeldud suuremahuliste paigutuste jaoks.

Põhitõed ja terminoloogia

Kuna flexbox on terve moodul ja mitte üks omadus, hõlmab see paljusid asju, sealhulgas kogu selle omaduste komplekti. Mõned neist on mõeldud mahutile (vanemelement, mida nimetatakse „paindlikuks konteineriks”), teised aga lastele (nt „painduvad esemed”).

Kui „tavaline“ paigutus põhineb nii ploki kui ka sisemise voolu suunal, siis paindlik paigutus põhineb „paindliku voolu suundadel“. Vaadake seda joonist spetsifikatsioonist, selgitades paindliku paigutuse peamist ideed.

Elemendid paigutatakse kas main axis(alates main-startkuni main-end) või risttelje (alates cross-startkuni cross-end) järgi.

peatelg - paindmahuti põhitelg on peamine telg, mida mööda painduvad elemendid asetatakse. Ettevaatust, see pole tingimata horisontaalne; see sõltub flex-directionvarandusest (vt allpool).
peastart | main-end - painduvad elemendid paigutatakse konteinerisse, alustades peamisest algusest kuni põhiotsa.
põhisuurus - painduva elemendi laius või kõrgus, olenevalt sellest, kumb on põhidimensioonis, on üksuse peamine suurus. Painduva elemendi peamine suuruse omadus on kas „laius” või „kõrgus”, olenevalt sellest, kumb on põhidimensioonis.
risttelg - peateljega risti olevat telge nimetatakse ristteljeks. Selle suund sõltub peatelje suunast.
riststart | ristlõik - painduvad jooned täidetakse esemetega ja pannakse anumasse, alustades paindmahuti riststardipoolsest küljest ja suundudes ristpidi poole.
ristisuurus - painduva elemendi laius või kõrgus, olenevalt sellest, kumb on ristmõõt, on üksuse ristisuurus. Risti suuruse omadus on see, kumb rist laiuses või kõrguses on ristmõõt.

Hankige plakat!

Kas viidata sellele juhendile palju? Kinnitage koopia kontoriseinale.

Osta plakatit

Lapsevanema omadused
(paindlik konteiner)

kuva

See määratleb painduva konteineri; sisestatud või blokeeritud sõltuvalt antud väärtusest. See võimaldab paindlikku konteksti kõigile oma otsestele lastele.

.container ( display: flex; /* or inline-flex */ )

Pange tähele, et CSS-i veerud ei mõjuta paindlikku konteinerit.

painde-suund

See loob peatelje, määratledes nii paindeseadmete suuna paindekonteinerisse. Flexbox on (lisaks valikulisele pakkimisele) ühesuunaline paigutuse kontseptsioon. Mõelge paindlikele esemetele kui horisontaalsetele ridadele või vertikaalsetele veergudele.

.container ( flex-direction: row | row-reverse | column | column-reverse; )

row(vaikimisi): vasakult paremale ltr; paremalt vasakule sissertl
row-reverse: paremalt vasakule ltr; vasakult paremale sissertl
column: sama mis rowülalt alla
column-reverse: sama mis row-reversealt üles

painduv mähis

Vaikimisi üritavad paindlikud elemendid kõik ühele reale mahtuda. Saate seda muuta ja lubada üksustel selle atribuudiga vastavalt vajadusele mähkida.

.container ( flex-wrap: nowrap | wrap | wrap-reverse; )

nowrap (vaikimisi): kõik paindlikud elemendid asuvad ühel real
wrap: painduvad esemed pakitakse mitmele reale ülevalt alla.
wrap-reverse: painduvad esemed pakitakse mitmele reale alt üles.

Siin on mõned visuaalsed demod flex-wrap.

painduv vool

See on lühikirjeldus omaduste flex-directionja flex-wrapomaduste jaoks, mis koos määratlevad paindmahuti põhi- ja ristteljed. Vaikeväärtus on row nowrap.

.container ( flex-flow: column wrap; )

õigusta-sisu

See määratleb joondamise piki põhitelge. See aitab jaotada täiendavat vaba ruumi ülejääki, kui kõik joone elastsed elemendid on paindumatud või paindlikud, kuid on saavutanud maksimaalse suuruse. Samuti avaldab see mõningast kontrolli üksuste joondamise üle, kui need joone üle ajavad.

.container ( justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right… + safe | unsafe; )

flex-start (vaikimisi): elemendid pakitakse painde suuna alguses.
flex-end: esemed pakitakse painde suuna lõpupoole.
start: esemed pakitakse suuna alguse poole writing-mode.
end: esemed pakitakse suuna lõpupoole writing-mode.
left: esemed pakitakse konteineri vasaku serva poole, välja arvatud juhul, kui sellel pole mõtet flex-direction, siis käitub see nagu start.
right: esemed pakitakse konteineri parempoolse serva poole, välja arvatud juhul, kui sellel pole mõtet flex-direction, siis käitub see nagu end.
center: üksused on joone keskel
space-between: üksused jaotuvad real ühtlaselt; esimene kirje asub stardireal, viimane rida lõpureal
space-around: üksused jaotuvad reas ühtlaselt ja nende ümber on võrdne ruum. Pange tähele, et visuaalselt pole tühikud võrdsed, kuna kõigil üksustel on mõlemal küljel võrdne ruum. Esimesel üksusel on konteineri serva vastas üks ruumühik, kuid järgmise üksuse vahel on kaks ruumiühikut, kuna järgmisel üksusel on oma tühik, mis kehtib.
space-evenly: üksused jaotatakse nii, et kahe üksuse (ja ruumi servadeni) vahe oleks võrdne.

Pange tähele, et brauseri tugi neile väärtustele on nüansirikas. Näiteks space-betweenei saanud kunagi Edge mõnest versioonist tuge ja algus / lõpp / vasak / parem pole veel Chrome'is. MDN-il on üksikasjalikud graafikud. Kindlaim väärtused flex-start, flex-endja center.

Nende väärtustega saate siduda ka kaks täiendavat märksõna: safeja unsafe. Kasutamine safetagab, et hoolimata sellest, et teete seda tüüpi positsioneerimist, ei saa te sellist elementi suruda, et see muutuks ekraaniväliseks (nt ülaosast välja) selliselt, et ka sisu ei saaks kerida (nn andmete kaotamine) .

joondage üksused

See määratleb vaikekäitumise selle kohta, kuidas painduvad üksused paiknevad piki risttelge praegusel real. Mõelge sellele kui risttelje justify-contentversioonile (risti peateljega).

.container ( align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end +… safe | unsafe; )

stretch (vaikimisi): venitage konteineri täitmiseks (järgige siiski min-width / max-width)
flex-start/ start/ self-start: elemendid asetatakse risttelje algusesse. Erinevus nende vahel on peen ja seisneb flex-directionreeglite või writing-modereeglite austamises .
flex-end/ end/ self-end: elemendid asetatakse risttelje lõppu. Jällegi on vahe peen ja see seisneb flex-directionreeglite ja writing-modereeglite austamises .
center: üksused on risttelje keskel
baseline: üksused on joondatud, näiteks nende joone joondamine

safeJa unsafeteisendaja märksõnade saab kasutada koos kõigi ülejäänud need märksõnad (kuigi teadmiseks brauseri tugi) ja tegeleda aitab teil vältida viies elemente nii, et sisu muutub ligipääsmatuks.

joondage sisu

See joondab paindliku konteineri read, kui ristteljel on lisaruumi, sarnaselt põhitelje justify-contentüksikute üksuste joondamisele.

Märkus. See omadus rakendub ainult mitmerealistele paindlikele konteineritele, mille väärtuseks flex-flowon valitud üks wrapvõi wrap-reverse). Üherealine paindlik konteiner (st kus flex-flowon seatud vaikeväärtus no-wrap) ei kajastu align-content.

.container ( align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline +… safe | unsafe; )

normal (vaikimisi): üksused pakitakse vaikepositsioonile, nagu poleks väärtust määratud.
flex-start/ start: konteineri alguseni pakitud esemed. (Rohkem toetatud) flex-startaustab flex-directionsamal ajal startau writing-modesuuna.
flex-end/ end: konteineri otsa pakitud esemed. (Rohkem toetust) flex-endaustab flex-directionsamal ajal kui au writing-modesuunas.
center: mahuti keskel olevad esemed
space-between: ühtlaselt jaotatud esemed; esimene rida on konteineri alguses, viimane aga lõpus
space-around: üksused jaotuvad ühtlaselt ja võrdse ruumiga ümber rea
space-evenly: esemed jaotuvad ühtlaselt ja nende ümber on võrdne ruum
stretch: jooned venivad ülejäänud ruumi hõivamiseks

Laste omadused
(painduvad esemed)

tellimus

Vaikimisi on paindlikud üksused paigutatud lähteteksti. Kuid ordervara kontrollib järjekorras ilmuvad flex konteiner.

.item ( order: 5; /* default is 0 */ )

painduma-kasvama

See määratleb paindliku elemendi võime vajadusel kasvada. See aktsepteerib ühikuta väärtust, mida kasutatakse proportsioonina. See dikteerib, kui suure hulga paindmahuti sees olevast ruumist peaks ese võtma.

Kui kõigi üksuste väärtuseks on flex-growseatud 1, jaotatakse konteineris järelejäänud ruum kõigile lastele võrdselt. Kui ühe lapse väärtus on 2, võtaks ülejäänud ruum kaks korda rohkem ruumi kui teised (või vähemalt proovib).

.item ( flex-grow: 4; /* default 0 */ )

Negatiivsed numbrid on valed.

painduma-kahanema

See määratleb painduva elemendi võime vajadusel kahaneda.

.item ( flex-shrink: 3; /* default 1 */ )

Negatiivsed numbrid on valed.

paindlik

See määratleb elemendi vaikesuuruse enne ülejäänud ruumi jaotamist. See võib olla pikkus (nt 20%, 5rem jne) või märksõna. autoMärksõna abil "pilk minu laius või kõrgus vara" (mis oli ajutiselt poolt tehtud main-sizemärksõna kuni taunitud). contentMärksõna abil "suurus see põhineb elemendi sisu" - see märksõna ei hästi toetatud veel, nii et see on raske test ja raskem teada, mida tema vennad max-content, min-contentja fit-contentteha.

.item ( flex-basis: | auto; /* default auto */ )

Kui see on seatud väärtusele 0, ei arvestata sisu ümber olevat lisaruumi. Kui see on määratud auto, jaotatakse lisaruum selle flex-growväärtuse põhjal. Vaadake seda graafikat.

painduma

See on lühend flex-grow, flex-shrinkja flex-basiskombineeritud. Teine ja kolmas parameeter ( flex-shrinkja flex-basis) on valikulised. Vaikimisi on 0 1 auto, kuid kui määrate selle ühe numbri väärtusega, on see nagu 1 0.

.item ( flex: none | ( ? || ) )

Üksikute omaduste määramise asemel on soovitatav kasutada seda lühikese omaduse omadust. Kiirlaad määrab muud väärtused arukalt.

joonduma-mina

See võimaldab align-itemsüksikute paindlike üksuste puhul vaikimisi joondamise (või selle poolt määratud ) alistada.

align-itemsSaadaolevate väärtuste mõistmiseks vaadake selgitust.

.item ( align-self: auto | flex-start | flex-end | center | baseline | stretch; )

Pange tähele, et float, clearja vertical-alignmingit mõju flex toode.

Näited

Alustame väga väga lihtsast näiteks peaaegu igapäevase probleemi lahendamisest: täiuslik tsentreerimine. Lihtsam ei saa olla, kui kasutate flexboxi.

.parent ( display: flex; height: 300px; /* Or whatever */ ) .child ( width: 100px; /* Or whatever */ height: 100px; /* Or whatever */ margin: auto; /* Magic! */ )

See tugineb asjaolule, et paindmahutisse seatud varu autoneelab lisaruumi. Nii et vertikaalse marginaali määramine automuudab elemendi mõlema telje täiuslikult keskele.

Nüüd kasutame veel mõnda omadust. Mõelge 6 üksuse loendile, millel kõigil on fikseeritud mõõtmed, kuid need võivad olla automaatselt suurusega. Soovime, et need jaotuksid horisontaalteljele ühtlaselt, nii et brauseri suuruse muutmisel oleks kõik kenasti skaalal ja ilma meediumipäringuteta.

.flex-container ( /* We first create a flex layout context */ display: flex; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: * flex-direction: row; * flex-wrap: wrap; */ flex-flow: row wrap; /* Then we define how is distributed the remaining space */ justify-content: space-around; )

Valmis. Kõik muu on vaid stiilimure. Allpool on seda näidet sisaldav pliiats. Minge kindlasti CodePeni ja proovige oma akende suurust muuta, et näha, mis juhtub.

Proovime midagi muud. Kujutage ette, et meie veebisaidi ülaosas on paremjoondatud navigeerimiselement, kuid me tahame, et see oleks keskmiselt keskmise suurusega ekraanidel ja ühes veerus väikestel seadmetel. Piisavalt lihtne.

/* Large */ .navigation ( display: flex; flex-flow: row wrap; /* This aligns items to the end line on main-axis */ justify-content: flex-end; ) /* Medium screens */ @media all and (max-width: 800px) ( .navigation ( /* When on medium sized screens, we center it by evenly distributing empty space around items */ justify-content: space-around; ) ) /* Small screens */ @media all and (max-width: 500px) ( .navigation ( /* On small screens, we are no longer using row direction but column */ flex-direction: column; ) )

Proovime midagi veelgi paremat, mängides paindlike esemete paindlikkust! Kuidas on mobiilseadmete esimese kolme veeruga paigutusega, millel on täislaiusega päis ja jalus. Ja allikakorrast sõltumatu.

.wrapper ( display: flex; flex-flow: row wrap; ) /* We tell all items to be 100% width, via flex-basis */ .wrapper> * ( flex: 1 100%; ) /* We rely on source order for mobile-first approach * in this case: * 1. header * 2. article * 3. aside 1 * 4. aside 2 * 5. footer */ /* Medium screens */ @media all and (min-width: 600px) ( /* We tell both sidebars to share a row */ .aside ( flex: 1 auto; ) ) /* Large screens */ @media all and (min-width: 800px) ( /* We invert order of first sidebar and main * And tell the main element to take twice as much width as the other two sidebars */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside-2 ( order: 3; ) .footer ( order: 4; ) )

Flexboxi eesliide

Flexbox nõuab võimalikult paljude brauserite toetamiseks mõnda müüja eesliidet. See ei hõlma ainult atribuutide ettevalmistamist müüja eesliitega, vaid tegelikult on omaduste ja väärtuste nimed täiesti erinevad. Selle põhjuseks on asjaolu, et Flexboxi spetsifikatsioon on aja jooksul muutunud, luues nii "vana", "tweener" ja "uue" versiooni.

Parim viis selle lahendamiseks on võib-olla kirjutamine uude (ja lõplikku) süntaksisse ja CSS-i käitamine Autoprefixeri kaudu, mis tegeleb varukoopiatega väga hästi.

Teise võimalusena on siin @mixineesliite abistamiseks Sass , mis annab teile ka aimu, milliseid asju tuleb teha:

@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit-box-flex: $values; -moz-box-flex: $values; -webkit-flex: $values; -ms-flex: $values; flex: $values; ) @mixin order($val) ( -webkit-box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; order: $val; ) .wrapper ( @include flexbox(); ) .item ( @include flex(1 200px); @include order(2); )

Seotud omadused

Võrgu täielik juhend
Almanahhi kirjed ruudustiku atribuutide kohta, näiteks ruudustiku rida / ruudustiku veerg

Muud ressursid

Flexbox CSS-i spetsifikatsioonides
Flexbox MDN-is
Flexbox Operas
Bocoupi sukeldumine Flexboxi
Süntaksite segamine CSS-trikkide parema brauserituge jaoks
Flexbox, autor Raphael Goetter (FR)
Flexplorer, autor Bennett Feely

Vead

Flexbox ei ole kindlasti vigadeta. Parim kollektsioon neist, mida ma olen näinud, on Philip Walton ja Greg Whitworthi Flexbugs. See on avatud lähtekoodiga koht nende kõigi jälgimiseks, nii et minu arvates on kõige parem sellega lihtsalt linkida.

Brauseri tugi

Purustatud flexboxi „versiooni” järgi:

(uus) - spetsifikatsiooni hiljutine süntaks (nt display: flex;)
(tweener) tähendab kummalist mitteametlikku süntaksit aastast 2011 (nt display: flexbox;)
(vana) tähendab vana süntaksit aastast 2009 (nt display: box;)

Chrome	Safari	Firefox	Ooper	IE	Edge	Android	iOS
20– (vana) 21+ (uus)	3.1+ (vana) 6.1+ (uus)	2–21 (vana) 22+ (uus)	12.1+ (uus)	10 (tweener) 11+ (uus)	17+ (uus)	2.1+ (vana) 4.4+ (uus)	3.2+ (vana) 7.1+ (uus)

Blackberry brauser 10+ toetab uut süntaksit.