Flexbox (Flexible Box Layout Module) specifikációja az elemek vízszintes vagy függőleges irányú elhelyezésének módszere.
A Flexbox egy tulajdonságkészletet egyesít a szülő flexiós tárolóhoz és a gyermek rugalmas elemekhez.
Ahhoz, hogy egy elem rugalmas tárolóvá váljon, hozzá kell rendelni kijelző: flex; vagy kijelző: inline-flex;(blokk vagy sor).
A hajlékony tartály belsejében két tengely jön létre: a fő és a rá merőleges keresztirányú tengelyek. Először a hajlékony elemeket a fő tengely mentén, majd a keresztirányú tengely mentén igazítják.
Flex tartály tulajdonságai |
|
| flex-irány | Meghatározza a főtengely irányát. Lehetséges értékek:
|
| flex-wrap | Meghatározza, hogy a tároló többsoros-e. Lehetséges értékek:
|
| flex-flow | Két paramétert határoz meg egyszerre: flex-direction és flex-wrap. Például: flex-flow: oszloptekercselés; |
| indokolja-tartalom | Meghatározza az elemek igazítását a főtengely mentén. Lehetséges értékek:
|
| align-ites | Meghatározza az elemek elrendezését a keresztirányú tengely mentén. Lehetséges értékek:
|
| align-content | Meghatározza a hajlékony elemek teljes sorainak kereszttengely-igazítását. Lehetséges értékek:
Ez a tulajdonság nem működik egysoros rugalmas tároló esetén. |
Flex elem tulajdonságai |
|
| rendelés | Meghatározza azt a sorrendet, amelyben egyetlen hajlékony elem megjelenik egy rugalmas tárolón belül. Egész számként van megadva. Az alapértelmezett 0, ekkor az elemek természetes áramlási sorrendben követik egymást. Jelentése rendelés az elem sorozatban elfoglalt pozíciójának súlyát adja meg, nem pedig abszolút pozícióját. |
| rugalmas alapú | Meghatározza egy rugalmas elem alapméretét, mielőtt helyet foglalna a tárolón belül. Megadható px, %, em és egyéb mértékegységekben. Lényegében ez egyfajta kiindulási pont, amelyhez képest az elemet megnyújtják vagy összenyomják. Alapértelmezett érték - auto, a belső tartalom méretétől függő elem méretével. |
| flex-grow | Meghatározza, hogy a flexibilis elem mennyi szabad helyet ad a tárolóban az alapmérethez. Egy arányként szolgáló egész szám határozza meg. Az alapértelmezett 0. Ha minden elem rugalmas növekedés: 1, akkor mindegyik egyforma méretű lesz. Ha az egyik rugalmas elemet 2-re állítja, kétszer annyit fog hozzáadni az alapmérethez, mint a többi. |
| rugalmas-zsugorodás | Meghatározza, hogy ha nincs elég hely, mennyivel zsugorodik a flex elem a szomszédos elemek csökkenéséhez képest a flexi tartályon belül. Egy arányként szolgáló egész szám határozza meg. Az alapértelmezett érték 1. Ha egy flex elem be van állítva hajlékony zsugor: 2, akkor az alapméretéből kétszer annyit vonunk le, mint a többiből, ha a tároló kisebb, mint a benne lévő elemek alapméreteinek összege. |
| Flex | Három paramétert határoz meg egyszerre: flex-grow, flex-shrink, flex-basis. Például flex: 1 1 200px; |
| igazod-ön | Felülbírálja az alapértelmezett igazítást ill align-ites, egy adott flex elemhez. Lehetséges értékek:
|
A Flexbox használatának jellemzői a gyakorlatban
1. Jobbra igazítás
A CSS Flexbox teljes útmutatója. Ez a teljes útmutató mindent elmagyaráz a flexboxról, a szülőelem (flex konténer) és a gyermekelemek (flex elemek) összes lehetséges tulajdonságára összpontosítva. Tartalmaz továbbá előzményeket, bemutatókat, sablonokat és egy böngészőtámogató táblázatot.
Háttér
flex-flow (A flex-tároló szülőelemére vonatkozik)
Ez a rövidítése flex-irányÉs flex-wrap tulajdonságok, amelyek együttesen határozzák meg a hajlékony tartály fő és keresztirányú tengelyét. Az alapértelmezett érték a sor nowrap.Flex flow:<‘flex-direction’> || <‘flex-wrap’>
indokolja-tartalom
Ez a tulajdonság határozza meg a főtengely mentén történő igazítást. Segít elosztani a felesleges szabad helyet, amikor az összes flexibilis elem egy sorban rugalmatlan, vagy rugalmas, de elérte a maximális méretét. Ez némileg szabályozza az elemek igazítását is, amikor túlcsordulnak a vonalon.
Konténer ( tartalom indokolása: flex-start | flex-end | center | space-benne | space-round | space-epenly | eleje | vége | balra | jobbra ... + biztonságos | nem biztonságos; )
- flex-start(alapértelmezett): az elemek a hajlítási irány elejére tolódnak el.
- hajlékony végű: Az elemeket a hajlítási irány vége felé mozgatjuk.
- Rajt: az elemek az elejére kerülnek írásmód irányokat.
- vége: az elemek a végén eltolódnak írásmód irányokat.
- bal: az elemek a tároló bal széle felé tolódnak el, ha ennek nincs értelme flex-irány, akkor úgy viselkedik Rajt.
- jobb: az elemek a tároló jobb széle felé tolódnak el, ha ennek nincs értelme flex-irány, akkor úgy viselkedik Rajt.
- központ: az elemek a vonal mentén középre kerülnek
- tér-között: az elemek egyenletesen oszlanak el a vonal mentén; az első elem a sor elején, az utolsó elem a sor végén található
- tér-körül: Az elemek egyenletesen helyezkednek el egy vonal mentén, körülöttük egyenlő távolsággal. Ne feledje, hogy vizuálisan a terek nem egyenlőek, mivel minden elemnek mindkét oldalán azonos hely van. Az első elemnek egy egységnyi hely lesz a tároló széléhez képest, de két egységnyi térköz van a következő elem között, mivel a következő elemnek saját térköze van, amelyet alkalmaznak.
- térben egyenletesen: Az elemek úgy vannak elosztva, hogy bármely két elem távolsága (és az élek távolsága) azonos legyen.
Két további kulcsszót is társíthat ezekhez az értékekhez: biztonságosÉs nem biztonságos. Használat biztonságos biztosítja, hogy bármennyit is végez ilyen pozicionálást, nem tudja az elemet úgy elhelyezni, hogy a képernyőn kívül (mint a tetején) jelenjen meg, így a tartalom sem görgethető (ez az úgynevezett " adatvesztés").
align-ites
Ez a tulajdonság határozza meg az alapértelmezett viselkedést arra vonatkozóan, hogy a rugalmas elemek hogyan legyenek elhelyezve a kereszttengely mentén az aktuális vonalon. Tekintsd úgy, mint a kereszttengely (a főtengelyre merőleges) igazoló tartalom változatát.
Tároló ( igazítási tételek: nyújtás | flex-start | flex-end | center | alapvonal | első alapvonal | utolsó alapvonal | eleje | vége | önálló indítás | önbefejezés + ... biztonságos | nem biztonságos; )
- nyújtózkodni(alapértelmezett): nyújtás a tartály feltöltéséhez (min-szélesség/max-szélesség továbbra is tiszteletben tartva)
- flex-start / Rajt / önindítás: az elemek a keresztirányú tengely elejére kerülnek. A különbség köztük kicsi, és a megfelelésben rejlik flex-irány szabályok ill írásmód szabályokat
- hajlékony végű / vége / önvég: Az elemek a keresztirányú tengely végén helyezkednek el. A különbség ismét finom, és a megfelelésben rejlik flex-irány vagy írásmód szabályokat
- központ: az elemek a keresztirányú tengelyen vannak középre állítva
- alapvonal: az elemek az alapvonalukhoz igazodnak
align-content
Ez a tulajdonság egy hajlékony tárolón belüli vonalakat igazítja, ha van extra hely a keresztirányú tengelyen, hasonló indokolja-tartalom Az egyes elemeket egy nagy tengelyen belül igazítja.
jegyzet: Ennek a tulajdonságnak nincs hatása, ha csak egy sor van rugalmas elemekből.
Tároló ( tartalom igazítása: flex-start | flex-end | center | space-benne | space-round | térben egyenletesen | stretch | eleje | vége | alapvonal | első alapvonal | utolsó alapvonal + ... biztonságos | nem biztonságos; )
- flex-start / Rajt: elemek áthelyezve a tároló elejére. Több támogatott flex-start használ, flex-irány míg Rajt használ írásmód irány.
- hajlékony végű / vége: elemek a tároló végére kerültek. Több támogatott hajlékony végű használ flex-irány míg vége használ írásmód irány.
- központ: Az elemek középen vannak a tárolóban
- tér-között: az elemek egyenletesen oszlanak el; az első sor a tároló elején, az utolsó sor pedig a végén található
- tér-körül: Az elemek egyenletesen helyezkednek el, egyenlő távolsággal minden sor körül
- térben egyenletesen: az elemek egyenletesen vannak elosztva, egyenlő térrel körülöttük
- nyújtózkodni(alapértelmezett): a vonalak megnyúlnak, hogy kitöltsék a maradék helyet
Az első gyermek elemek tulajdonságai (flex elemek)
rendelés
Alapértelmezés szerint a rugalmas elemek az eredeti sorrendben vannak elrendezve. Azonban az ingatlan rendelés szabályozza, hogy milyen sorrendben jelenjenek meg a rugalmas tárolóban.
Tétel (rendelés:
flex-grow
Ez a tulajdonság határozza meg a hajlító elem azon képességét, hogy szükség esetén nyúljon. Nullától vesz egy értéket, ami arányként szolgál. Ez annak a tulajdonsága, hogy egy elemnek mennyi szabad helyet kell elfoglalnia egy rugalmas tárolón belül.
Ha minden elemre flex-grow 1-re állítva a tárolóban fennmaradó terület egyenletesen lesz elosztva az összes alárendelt elem között. Ha az egyik gyermekelem értéke 2, akkor az az elem kétszer annyi helyet foglal el, mint a többi (vagy legalább próbálja meg).
Item(flex-grow:
rugalmas-zsugorodás
Ez a tulajdonság határozza meg a rugalmas elem összenyomhatóságát, ha szükséges.Tétel ( flex-zsugor:
A negatív számok nem támogatottak.
rugalmas alapú
Ez a tulajdonság egy elem alapértelmezett méretét adja meg a fennmaradó terület lefoglalása előtt. Ez lehet egy hossz (pl. 20%, 5rem stb.) ill kulcsszó. Kulcsszó auto azt jelenti, hogy "nézd meg a szélesség vagy magasság tulajdonságomat". Kulcsszó tartalom azt jelenti, hogy "méret az elemtartalom alapján" - ez a kulcsszó még mindig nem túl jól támogatott, így nehéz ellenőrizni, hogy mit használnak rá max-tartalom, min-tartalom vagy fit-tartalom.Tétel ( rugalmas alapon:
Ha be van állítva 0
, a tartalom körüli extra helyet nem veszik figyelembe. Ha be van állítva auto, a további hely attól függően oszlik el flex-grow jelentések.
Lásd ezt a rajzot.
Flex
Ez a használat rövidítése flex-grow, rugalmas-zsugorodásÉs rugalmas alapú együtt. Második és harmadik paraméter ( rugalmas-zsugorodásÉs rugalmas alapú) nem kötelezőek. Az alapértelmezett 0 1 auto.Tétel ( flex: nincs | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}
Javasoljuk ennek a gyorsírási tulajdonságnak a használata az egyes tulajdonságok beállítása helyett. Ez a csökkentés intelligensen más értékeket állít be.
igazod-ön
Ez a tulajdonság lehetővé teszi az alapértelmezett (vagy a következővel megadott) igazítás felülbírálását align-ites) az egyes flex elemekhez.
Kérlek figyelj align-ites tulajdonság, hogy megértsük az elérhető értékeket.
Elem ( igazítás: automatikus | flex-start | flex-end | center | alapvonal | nyújtás; )
Felhívjuk figyelmét, hogy az ingatlanok úszó, egyértelműÉs függőleges igazítás ne érintse a flex elemeket.
Példák
Kezdjük nagyon egyszerű példa szinte napi probléma megoldása: tökéletes igazítás. A legegyszerűbb megoldás erre a feladatra a flexbox használata.Parent ( kijelző: flex; magasság: 300 képpont; /* Vagy bármi */ ) .child ( szélesség: 100 képpont; /* Vagy bármi */ magasság: 100 képpont; /* Vagy bármi */ margó: auto; /* Magic ! */ )
Ez annak a ténynek köszönhető, hogy a függőleges igazítás tulajdonságmargója a következőre van állítva auto rugalmas tartályban, további helyet foglal el. Tehát a margó beállítása auto az objektumot mindkét tengelyen tökéletesen középre állítja.
Most használjunk még néhány tulajdonságot. Vegyünk egy 6 elemből álló listát, amelyek mindegyike fix méretű, de lehetnek automatikus méretek is. Azt akarjuk, hogy a vízszintes tengely mentén egyenletesen oszlanak el, így a böngésző méretének változása esetén minden jól és médialekérdezések nélkül skálázódik.
Flex-container ( /* Először hozunk létre egy flex kontextust */ display: flex; /* Ezután definiálunk egy flex-irányt, és engedélyezzük az elemek új sorokba tördelését * Ne feledje, hogy ez ugyanaz, mint: * flex-direction: sor ; * flex-wrap: wrap; */ flex-flow: sor tördelése; /* Ezután meghatározzuk a fennmaradó hely kiosztásának módját */ justify-content: space-around; )
Kész. Minden más csak stílus.
Ha módosítja a képernyő felbontását vagy léptékét, az így fog kinézni:
Próbáljunk meg valami mást. Képzeld el, hogy weboldalunk tetején jobbra igazított navigációs elemek vannak, de azt szeretnénk, hogy ezek a közepes méretű képernyőkön és egyetlen oszlopban legyenek kis eszközök. Egészen egyszerű.
/* Nagy képernyők */ .navigation ( display: flex; flex-flow: sortördelés; /* Ez az elemeket a főtengely sor végéhez igazítja */ justify-content: flex-end; ) /* Közepes képernyők */ @ media all and (max. szélesség: 800px) ( .navigation ( /* Közepes méretű képernyőkön az elemeket úgy helyezzük középre, hogy az elemek körül egyenletesen elosztjuk a fehér területet */ justify-content: space-round; ) ) /* Kis képernyők */ @media all and (max-width: 500px) ( .navigation ( /* Kis képernyőkön már nem sorirányt használunk, hanem oszlopot */ flex-direction: oszlop; ) )
Nagy képernyők
Közepes képernyők
Kis képernyők
Próbáljunk ki valami még jobbat a flex elemek rugalmasságával játszva! Mit szólnál egy 3 oszlopos, teljes oldalas elrendezéshez fejléccel és lábléccel. És nem függ az elemek kezdeti sorrendjétől.
Wrapper ( display: flex; flex-flow: row wrap; ) /* Azt mondjuk, hogy minden elem szélessége 100%, via flex-base */ .wrapper > * ( flex: 1 100%; ) /* Használjuk az első mobil opció eredeti rendelése * 1. fejléc * 2. cikk * 3. félre 1 * 4. félre 2 * 5. lábléc */ /* Középső képernyők */ @média minden és (min-szélesség: 600 képpont) ( /* Azt mondjuk mindkét oldalsávnak, hogy ugyanabban a sorban legyen */ .aside ( flex: 1 auto; ) ) /* Nagy képernyők */ @media all and (min-width: 800px) ( /* Megfordítjuk a sorrendet első oldalsáv és a fő, és mondjuk a fő elemre úgy, hogy az a másik két oldalsáv szélességének kétszeresét vegye fel */ .main ( flex: 2 0px; ) .aside-1 ( sorrend: 1; ) .main ( sorrend : 2; ) .aside-2 ( sorrend : 3; ) .footer ( sorrend: 4; ) )
@mixin flexbox() ( display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; ) @mixin flex($values) ( -webkit- box-flex: $értékek; -moz-box-flex: $értékek; -webkit-flex: $értékek; -ms-flex: $értékek; flex: $értékek; ) @mixin order($val) ( -webkit- box-ordinal-group: $val; -moz-box-ordinal-group: $val; -ms-flex-order: $val; -webkit-order: $val; sorrend: $val; .wrapper ( @include flexbox (); ) .item ( @include flex(1 200px); @include order(2); )
Hibák
A Flexbox természetesen nem mentes a hibáktól. Ezek közül a legjobb gyűjtemény, amit láttam, a Flexbugs, Philip Walton és Greg Whitworth. Ez egy nyitott adattár forráskód hogy mindegyiket nyomon kövesd, ezért szerintem a legjobb, ha csak linkeled.
Böngésző támogatás
Flexbox „verzió” szerint lebontva:- (új) a specifikációból a legutóbbi szintaxist jelenti (például kijelző: flex;)
- A (tweener) furcsa, nem hivatalos szintaxist jelent 2011 óta (pl kijelző: flexbox;)
- (régi) jelentése régi szintaxis 2009 óta (pl kijelző: doboz;)
A Blackberry Browser 10+ támogatja az új szintaxist.
Megszerzéséért további információ A szintaxisok keveréséről a jobb böngészőtámogatás érdekében olvassa el a következőt:
A Flexbox joggal nevezhető sikeres kísérletnek számos probléma megoldására a CSS-ben történő elrendezések felépítése során. Mielőtt azonban rátérnénk a leírására, nézzük meg, mi a baj a most használt elrendezési módszerekkel?
Bármely elrendezéstervező többféleképpen tud valamit függőlegesen igazítani, vagy 3 oszlopos elrendezést készíteni gumiszerű középső oszloppal. De valljuk be, mindezek a módszerek elég furcsák, hacknek tűnnek, nem minden esetben alkalmasak, nehezen érthetők és nem működnek, ha bizonyos, történelmileg kialakult mágikus feltételek nem teljesülnek.
Ez azért történt, mert a html és a css evolúciósan fejlődött. Kezdetben a weboldalak egyszálúak voltak szöveges dokumentumok, kicsit később az oldal blokkokra osztása táblázatokkal történt, majd divat lett a floatokkal szedni, és az ie6 hivatalos halála után bekerültek az inline-blockos technikák is. Ennek eredményeként ezeknek a technikáknak a robbanásszerű keverékét örököltük, amelyeket az összes létező weboldal 99,9%-ának elrendezéséhez használnak.
Blokkok többsoros rendszerezése egy rugalmas konténerben.
flex-wrap
Az összes fent említett példa a blokkok egysoros (egyoszlopos) elrendezésének figyelembevételével készült. Azt kell mondani, hogy alapértelmezés szerint egy flex konténer mindig egy sorba rendezi a blokkokat magában. A specifikáció azonban támogatja a többsoros módot is. A flex-wrap CSS tulajdonság felelős a többsoros tartalomért egy flex tárolóban.
Elérhető értékek flex-wrap:
- nowrap (alapértelmezett érték): a blokkok egy sorban vannak elrendezve balról jobbra (rtl-ben jobbról balra)
- wrap: a blokkok több vízszintes sorban vannak elrendezve (ha nem férnek el egy sorba). Balról jobbra követik egymást (rtl-ben jobbról balra)
- wrap-reverse: ugyanaz, mint betakar, de a blokkok fordított sorrendben vannak elrendezve.
A flex-flow a flex-direction + flex-wrap kényelmes rövidítése
Lényegében a flex-flow lehetővé teszi a fő- és többvonalas keresztirányú tengely irányának egy tulajdonságban történő leírását. Alapértelmezett flex-flow: sor nincs tördelve.
flex-flow:<‘flex-direction’> || <‘flex-wrap’>
CSS
/* azaz ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* ez ugyanaz, mint... */ .my-flex-block( flex-flow: oszlop tördelése ;)align-content
Létezik egy align-content tulajdonság is, amely meghatározza, hogy a kapott blokksorok hogyan legyenek függőlegesen igazítva, és hogyan osztják fel a flexi tároló teljes terét.
Fontos: Az align-content csak többsoros módban működik (azaz flex-wrap:wrap; vagy flex-wrap:wrap-reverse esetén;)
Elérhető értékek align-content:
- flex-start: a tömbsorokat a flex tartály elejére nyomjuk.
- flex-end: a tömbsorokat a flex tartály végére nyomjuk
- középen: a tömbsorok a rugalmas tartály közepén vannak
- space-beween: az első tömbsor a hajlékony konténer elején, az utolsó tömbsor a végén található, az összes többi sor egyenletesen oszlik el a fennmaradó térben.
- tér körül: a blokkok sorai egyenletesen vannak elosztva a rugalmas tartály elejétől a végéig, egyenlően osztva el az összes rendelkezésre álló helyet.
- nyújtózkodni (alapértelmezett érték): A blokkok sorai ki vannak nyújtva, hogy az összes rendelkezésre álló helyet elfoglalják.
A flex-wrap és align-content CSS-tulajdonságokat közvetlenül a flex-tárolóra kell alkalmazni, nem pedig a gyermekeire.
Többsoros tulajdonságok bemutatója flexben
CSS-szabályok egy rugalmas tároló gyermek elemeire (flex blokkok)
flex-basis – egyetlen flex blokk alapmérete
Beállítja a kezdeti nagytengely méretét egy rugalmas blokkhoz, mielőtt más flexibilis tényezőkön alapuló transzformációkat alkalmaznának rá. Megadható bármilyen hosszegységben (px, em, %, ...) vagy auto (alapértelmezett). Ha automatikusra van állítva, akkor a blokk méreteit (szélesség, magasság) veszik alapul, ami viszont függhet a tartalom méretétől, ha nincs kifejezetten megadva.
flex-grow – egyetlen flexblokk „kapzsisága”.
Meghatározza, hogy mennyivel lehet nagyobb egy egyedi hajlékony blokk, mint a szomszédos elemek, ha szükséges. A flex-grow dimenzió nélküli értéket fogad el (alapértelmezett 0)
1. példa:
- Ha egy flex tárolóban lévő összes flex dobozban van flex-grow:1, akkor azonos méretűek lesznek
- Ha az egyiknél flex-grow:2 van, akkor kétszer akkora lesz, mint az összes többi
2. példa:
- Ha egy flex tartályban lévő összes flex dobozban van flex-grow:3, akkor azonos méretűek lesznek
- Ha az egyiknek flex-grow:12 van, akkor négyszer nagyobb lesz, mint az összes többi
Vagyis a flex-grow abszolút értéke nem határozza meg a pontos szélességet. Meghatározza a „mohóság” fokát más, azonos szintű flexiókkal szemben.
flex-shrink – egyetlen flex blokk „összenyomhatósági” tényezője
Meghatározza, hogy a flexibilis blokk mennyit zsugorodik a flexi tárolón belüli szomszédos elemekhez képest, ha nincs elég szabad hely. Alapértelmezés szerint 1.
flex – a flex-növekedés, flex-zsugorodás és a flex-alap tulajdonságok rövidítése
flex: nincs | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
CSS
/* azaz ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basic: 30em; ) /* ez ugyanaz, mint... */ .my-flex-block( flex : 12 3 30 em;)Demó a rugalmas növekedéshez, flexibilis zsugorodáshoz és flex-alaphoz
align-self – egyetlen flex blokk igazítása a keresztirányú tengely mentén.
Lehetővé teszi a flex tároló align-items tulajdonságának felülbírálását egy egyedi rugalmas blokk esetében.
Rendelkezésre álló igazítási értékek (ugyanaz 5 lehetőség, mint az igazítási elemeknél)
- flex-start: a flexblokkot a keresztirányú tengely elejére nyomjuk
- flex-end: a flexblokkot a kereszttengely végéhez nyomják
- központ: flex blokk a kereszttengely közepén található
- alapvonal: a rugalmas blokk az alapvonalhoz igazodik
- nyújtózkodni (alapértelmezett érték): A flexibilis blokk meg van feszítve, hogy a kereszttengely mentén az összes rendelkezésre álló helyet elfoglalja, figyelembe véve a min-szélességet / max-szélességet, ha be van állítva.
sorrend – egyetlen flex blokk sorrendje egy flexi tartályban.
Alapértelmezés szerint az összes blokk a html-ben megadott sorrendben követi egymást. Ez a sorrend azonban módosítható a rendelés tulajdonság használatával. Egész számként van megadva, és alapértelmezés szerint 0.
A sorrend értéke nem határozza meg az elem abszolút pozícióját a sorozatban. Meghatározza az elem helyzetének súlyát.
HTML
Ebben az esetben a blokkok egymás után következnek a főtengely mentén a következő sorrendben: item5, item1, item3, item4, item2
Demo az igazodáshoz és a rendeléshez
margó: auto függőlegesen. Az álmok valóra válnak!
A Flexboxot legalább azért szeretheti, mert az ismerős vízszintes igazítás a margin:auto segítségével itt is működik a függőlegeseknél!
My-flex-container ( kijelző: flex; magasság: 300 képpont; /* Vagy bármi */ ) .my-flex-block ( szélesség: 100 képpont; /* Vagy bármi */ magasság: 100 képpont; /* Vagy bármi * / margó: auto; /* Varázslat! A blokk függőlegesen és vízszintesen középre van állítva! */ )
Dolgok, amikre emlékezni kell
- Ne használjon flexboxot ott, ahol nem szükséges.
- A régiók meghatározása és a tartalom sorrendjének megváltoztatása sok esetben továbbra is hasznos az oldal szerkezetétől való függővé tételhez. Gondold végig.
- Ismerje meg a flexboxot és ismerje az alapokat. Így sokkal könnyebben érhető el a várt eredmény.
- Ne feledkezzünk meg a margóról. Ezeket figyelembe veszik a tengelybeállítás beállításakor. Azt is fontos megjegyezni, hogy a flexbox margói nem „zuhannak össze”, mint normál áramlás esetén.
- A flex blokkok lebegő értékét nem veszik figyelembe, és nincs jelentése. Ez valószínűleg valahogyan kecses degradációra használható, amikor flexboxra váltunk.
- A Flexbox kiválóan alkalmas webes komponensek és weboldalak egyes részeinek elrendezésére, de az alapvető elrendezések (cikk helyzete, fejléc, lábléc, navigációs sáv stb.) elrendezésénél nem a legjobb oldalát mutatta. Ez még mindig vitatott kérdés, de ez a cikk elég meggyőzően mutatja be a hiányosságokat xanthir.com/blog/b4580
Végül
Úgy gondolom, hogy a flexbox természetesen nem fogja kiszorítani az összes többi elrendezési módszert, de természetesen a közeljövőben méltó rést fog elfoglalni számos probléma megoldásában. És persze most meg kell próbálnod dolgozni vele. A következő cikkek egyike a rugalmas elrendezéssel végzett munka konkrét példáival foglalkozik. Feliratkozás a hírekre ;)
Röviden, az elrendezés a Flexbox-szal ad nekünk egyszerű megoldások egykor nehéz feladatok. Például, ha egy elemet függőlegesen kell igazítania, vagy le kell nyomnia a láblécet a képernyő aljára, vagy egyszerűen több blokkot kell beilleszteni egy sorba, hogy azok elfoglalják az összes szabad helyet. Hasonló problémák flex nélkül is megoldhatók. De általában ezek a megoldások inkább „mankók” - olyan technikák, amelyek a CSS-t a rendeltetésüktől eltérő célokra használják. Míg a flexbox esetében az ilyen feladatokat pontosan úgy oldják meg, ahogy a flex modellt tervezték.
A CSS Flexible Box Layout Module (CSS modul rugalmas blokkokkal rendelkező elrendezésekhez), röviden flexbox, azért jött létre, hogy kiküszöbölje a hiányosságokat a legkülönfélébb HTML-tervek készítésekor, beleértve a különböző szélességekhez és magasságokhoz igazítottakat is, és logikussá és egyszerűvé tegye az elrendezést. . És a logikus megközelítés általában olyan váratlan helyeken működik, ahol az eredményt nem ellenőrizték - a logika minden!
A Flexbox lehetővé teszi az elemek különféle paramétereinek elegáns vezérlését egy tartályon belül: irány, sorrend, szélesség, magasság, hosszirányban és keresztben elrendezés, a szabad tér elosztása, az elemek nyújtása és tömörítése.
Alap tudás
A FlexBox egy konténerből és annak elemeiből (rugalmas elemek) áll.
A flexbox engedélyezéséhez bárki HTML elem csak rendelje hozzá a CSS tulajdonságot display:flex; vagy display:inline-flex; .
A flex tulajdonság engedélyezése után a konténeren belül két tengely jön létre: fő és keresztirányú (merőleges (⊥), kereszttengely). Minden beágyazott elem (az első szint) a főtengely mentén sorakozik. Alapértelmezés szerint a főtengely vízszintes és balról jobbra irányul (→), a kereszttengely pedig ennek megfelelően függőleges és felülről lefelé (↓).
A fő- és kereszttengely felcserélhető, ekkor az elemek fentről lefelé helyezkednek el (↓) és amikor már nem férnek el a magasságban, balról jobbra mozognak (→) - vagyis a tengelyek egyszerűen helyet cseréltek . Ebben az esetben az elemek elrendezésének eleje és vége nem változik - csak az irányok (tengelyek) változnak! Ezért kell elképzelni a tengelyeket a tartály belsejében. Nem szabad azonban azt gondolni, hogy vannak „fizikai” tengelyek és ezek befolyásolnak valamit. A tengely itt csak a tartályon belüli elemek mozgási iránya. Például, ha megadtuk az elemek igazítását a főtengely középpontjához, majd megváltoztattuk ennek a főtengelynek az irányát, akkor az igazítás megváltozik: az elemek vízszintesen középen voltak, de függőlegesen középen lettek... Lásd a példát.
A Flexbox másik fontos jellemzője a keresztirányú sorok jelenléte. Ahhoz, hogy megértsük, miről beszélünk, képzeljük el, hogy van egy fő vízszintes tengely, sok elem van, és nem „férnek be” a konténerbe, így átkerülnek egy másik sorba. Azok. egy konténer így néz ki: egy tároló, benne két sorral, amelyek mindegyike több elemet tartalmaz. Bemutatott? Most ne feledje, hogy nemcsak az elemeket, hanem a sorokat is függőlegesen igazíthatjuk! Hogy ez hogyan működik, az jól látható az ingatlanra vonatkozó példában. És így néz ki sematikusan:
CSS tulajdonságok, ami befolyásolhatja az elrendezési modellt: lebegés, átlátszó, függőleges igazítás, az oszlopok nem működnek rugalmas kialakításban. Itt egy másik modellt használnak az elrendezés felépítéséhez, és ezeket a CSS-tulajdonságokat egyszerűen figyelmen kívül hagyják.
Flexbox CSS tulajdonságai
A Flexbox különböző CSS-szabályokat tartalmaz a teljes rugalmas kialakítás vezérléséhez. Néhányat a fő tárolóra, másokat pedig ennek a tárolónak az elemeire kell alkalmazni.
Konténerhez
kijelző:Engedélyezi az elem flex tulajdonságát. Ez a tulajdonság magára az elemre és annak beágyazott elemeire vonatkozik: csak az első szintű leszármazottak érintettek – ezek a flexi tároló elemei lesznek.
- Flex- az elem teljes szélességében megnyúlik, és a környező blokkok között van a teljes hely. A sortörés a blokk elején és végén történik.
- inline-flex- egy elemet más elemek köré tekert. Ebben az esetben a belső része blokk elemként, maga az elem pedig inline-ként van formázva.
A flex és az inline-flex abban különbözik, hogy másképpen lépnek kapcsolatba a környező elemekkel, hasonlóan a display:block és a display:inline-block .
rugalmas irány:Módosítja a tároló főtengelyének irányát. A keresztirányú tengely ennek megfelelően változik.
- sor (alapértelmezett)- az elemek iránya balról jobbra (→)
- oszlop- az elemek iránya felülről lefelé (↓)
- sor-fordított- az elemek iránya jobbról balra (←)
- oszlop-fordítás- az elemek iránya alulról felfelé ()
Szabályozza a tartályba nem férő elemek átvitelét.
- nowrap (alapértelmezett)- a beágyazott elemek egy sorban (irány=sorral) vagy egy oszlopban (irány=oszloppal) kerülnek elhelyezésre, függetlenül attól, hogy beleférnek-e a tárolóba vagy sem.
- betakar- tartalmazza a következő sorba mozgó elemeket, ha nem férnek el a tartályba. Ez lehetővé teszi az elemek mozgását a keresztirányú tengely mentén.
- wrap-reverse- ugyanaz, mint a wrap, csak az átvitel nem lefelé lesz, hanem felfelé (ellentétes irányba).
Egyesíti a hajlító irány és a flex-wrap tulajdonságokat. Gyakran együtt használják őket, így a flex-flow tulajdonságot azért hozták létre, hogy segítsen kevesebb kódot írni.
A flex-flow elfogadja ennek a két tulajdonságnak az értékeit, szóközzel elválasztva. Vagy megadhat egyetlen értéket bármely tulajdonsághoz.
/* csak flex-direction */ flex-flow: sor; flex-flow: row-reverse; flex-flow: oszlop; flex-flow: oszlop-fordított; /* csak flex-wrap */ flex-flow: nowrap; flex-flow: pakolás; flex-flow: wrap-reverse; /* mindkét érték egyszerre: flex-direction és flex-wrap */ flex-flow: sor nowrap; flex-flow: oszloptekercselés; flex-flow: oszlop-fordított körbe-vissza; indokoló tartalom:
Az elemeket a főtengely mentén igazítja: ha irány=sor, akkor vízszintesen, és ha irány=oszlop, akkor függőlegesen.
- flex-start (alapértelmezett)- az elemek az elejétől mennek (lehet, hogy a végén marad egy kis hely).
- hajlékony végű- az elemek a végére vannak igazítva (a szóköz az elején marad)
- központ- középen (hely marad a bal és a jobb oldalon)
- tér-között- a legkülső elemek a szélekhez nyomódnak (az elemek közötti tér egyenletesen oszlik el)
- tér-körül- a szabad tér egyenletesen oszlik el az elemek között (a legkülső elemek nincsenek a szélekhez nyomva). A tartály széle és a külső elemek közötti távolság feleannyi lesz, mint a sor közepén lévő elemek között.
- térben egyenletesen
Az elemeket tartalmazó sorokat a keresztirányú tengely mentén igazítja. Ugyanaz, mint az igazoló tartalom, csak az ellenkező tengelyre.
Megjegyzés: Akkor működik, ha legalább 2 sor van, pl. Ha csak 1 sor van, akkor nem történik semmi.
Azok. ha flex-direction: row , akkor ez a tulajdonság függőlegesen igazítja a láthatatlan sorokat. Itt fontos megjegyezni, hogy a blokk magasságát mereven kell beállítani, és nagyobbnak kell lennie, mint a sorok magassága, különben a sorok maguk feszítik meg a tárolót, és értelmetlenné válik az egymáshoz igazításuk, mert nincs szabad tér a sorok között. De ha flex-direction: oszlop , akkor a sorok vízszintesen mozognak → és a konténer szélessége szinte mindig nagyobb, mint a sorok szélessége és a sorok igazítása azonnal értelmes...
- nyújtás (alapértelmezett)- a sorok megnyúlnak, hogy teljesen kitöltsék a sort
- flex-start- a sorok a tároló tetején vannak csoportosítva (a végén maradhat egy kis hely).
- hajlékony végű- a sorok a tároló alján vannak csoportosítva (az elején hely marad)
- központ- a sorok a tartály közepén vannak csoportosítva (a széleken hely marad)
- tér-között- a külső sorokat a szélekhez nyomjuk (a sorok közötti tér egyenletesen oszlik el)
- tér-körül- a szabad hely egyenletesen oszlik el a sorok között (a legkülső elemek nincsenek a szélekhez nyomva). A tartály széle és a külső elemek közötti távolság feleannyi lesz, mint a sor közepén lévő elemek között.
- térben egyenletesen- ugyanaz, mint a space-round , csak a külső elemek és a tartály szélei közötti távolság egyezik meg az elemek közötti távolsággal.
Az elemeket a keresztirányú tengely mentén igazítja egy soron belül (láthatatlan sor). Azok. Maguk a sorok igazítása az align-content segítségével történik, és a sorokban (sorokban) lévő elemek igazítása igazítási elemekkel történik a keresztirányú tengely mentén. Nincs ilyen felosztás a főtengely mentén, nincs sorok fogalma, és az elemek igazítása a justify-content segítségével történik.
- nyújtás (alapértelmezett)- az elemek ki vannak feszítve, hogy teljesen kitöltsék a vonalat
- flex-start- az elemek a sor elejére vannak nyomva
- hajlékony végű- az elemek a sor végére vannak nyomva
- központ- az elemek a sor közepéhez igazodnak
- alapvonal- az elemek a szöveg alapvonalához igazodnak
Tartályelemekhez
flex-grow:Beállítja az elem nagyítási tényezőjét, ha van szabad hely a tárolóban. Alapértelmezett flex-grow: 0 azaz. egyik elem sem nőhet, és nem töltheti be a tartályban lévő szabad helyet.
Alapértelmezett rugalmas növekedés: 0
- Ha minden elemhez megadja a flex-grow:1 értéket, akkor mindegyik egyformán nyúlik, és kitölti a tárolóban lévő összes szabad helyet.
- Ha az egyik elemhez a flex-grow:1 értéket adjuk meg, akkor az kitölti a tárolóban lévő összes szabad helyet, és a justify-content-en keresztüli igazítások többé nem működnek: nincs szabad hely az igazításhoz...
- Rugalmas növekedéssel:1. Ha az egyiknél flex-grow:2 van, akkor kétszer akkora lesz, mint az összes többi
- Ha egy flex tartályban lévő összes flex dobozban van flex-grow:3, akkor azonos méretűek lesznek
- Rugalmas növekedéssel:3. Ha az egyiknek flex-grow:12 van, akkor négyszer nagyobb lesz, mint az összes többi
Hogyan működik? Tegyük fel, hogy egy tároló 500 képpont széles, és két elemet tartalmaz, mindegyik alapszélessége 100 képpont. Ez azt jelenti, hogy 300 szabad képpont maradt a tárolóban. Most, ha megadjuk a flex-grow:2; , és a második flex-grow: 1; , akkor a blokkok elfoglalják a tároló teljes elérhető szélességét, és az első blokk szélessége 300 képpont, a második pedig 200 képpont lesz. Ez azzal magyarázható, hogy a konténerben rendelkezésre álló 300px szabad területet 2:1 arányban osztották el az elemek között, az elsőnél +200px, a másodiknál +100px.
Megjegyzés: az értékben törtszámokat is megadhat, például: 0,5 - flex-grow:0,5
rugalmas zsugorodás:Beállítja az elem redukciós tényezőjét. A tulajdonság a flex-grow ellentéte, és meghatározza, hogy az elem hogyan zsugorodik, ha nem marad szabad hely a tárolóban. Azok. a tulajdonság akkor kezd el működni, ha az összes elem méretének összege nagyobb, mint a tároló mérete.
Alapértelmezett rugalmas zsugorodás: 1
Tegyük fel, hogy a tároló 600 képpont széles, és két elemet tartalmaz, mindegyik 300 képpont széles – rugalmas alapon: 300 képpont; . Azok. két elem teljesen kitölti a tartályt. Adja meg az első elemet flex-shrink: 2; , és a második hajlékony-zsugor: 1; . Most csökkentsük a tároló szélességét 300 képponttal, azaz. az elemeknek 300 képponttal kell zsugorodniuk, hogy elférjenek a tárolóban. 2:1 arányban zsugorodnak majd, azaz. az első blokk 200 képponttal, a második 100 képponttal csökken, és az új elemméretek 100 és 200 képpontok lesznek.
Megjegyzés: az értékben törtszámokat is megadhat, például: 0,5 - flex-shrink:0,5
rugalmas alapú:Beállítja az elem alapszélességét – az elem szélességét befolyásoló egyéb feltételek kiszámítása előtti szélességet. Az érték megadható px, em, rem, %, vw, vh stb. A végső szélesség az alapszélességtől és a flex-grow, flex-shrink értékektől és a blokk belsejében lévő tartalomtól függ. Az auto funkcióval az elem alapszélességet kap a benne lévő tartalomhoz képest.
Alapértelmezett: auto
Néha jobb, ha egy elem szélességét keményre állítja a szokásos szélesség tulajdonságon keresztül. Például szélesség: 50%; azt jelenti, hogy a tartály belsejében lévő elem pontosan 50%-os lesz, de a rugalmas növekedés és zsugorodás továbbra is működni fog. Erre akkor lehet szükség, ha az elemet a benne lévő tartalom megnyújtja, a flex-basis-ban meghatározottnál nagyobb mértékben. Példa.
a flex-basis „merev” lesz, ha a nyújtás és a zsugorodás nullára van állítva: flex-basis:200px; flex-grow:0; rugalmas-zsugorodás:0; . Mindez így írható fel: flex:0 0 200px; .
flex: (zsugorodási alap)A három tulajdonság rövid összefoglalása: flex-grow flex-shrink flex-basis .
Alapértelmezett: flex: 0 1 auto
Megadhat azonban egy vagy két értéket:
Flex: nincs; /* 0 0 auto */ /* szám */ flex: 2; /* flex-grow (flex-alap 0-ra megy) */ /* nem szám */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: tartalom; /* flex-basis: tartalom */ flex: 1 30px; /* flex-grow és flex-alap */ flex: 2 2; /* flex-grow és flex-shrink (flex-alap 0-ra megy) */ flex: 2 2 10%; /* flex-grow és flex-shrink and flex-basis */ align-self:
Lehetővé teszi az align-items tulajdonság módosítását, csak egyetlen elemnél.
Alapértelmezés: az align-items tárolóból
- nyújtózkodni- az elem meg van feszítve, hogy teljesen kitöltse a vonalat
- flex-start- az elemet a sor elejére nyomjuk
- hajlékony végű- az elem a sor végére van nyomva
- központ- az elem a vonal közepéhez igazodik
alapvonal- az elem a szöveg alapvonalához igazodik
Lehetővé teszi egy elem sorrendjének (pozíciójának, pozíciójának) megváltoztatását az általános sorban.
Alapértelmezett: sorrend: 0
Alapértelmezés szerint az elemek sorrendje: 0, és a HTML kódban való megjelenésük sorrendjében és a sor irányában helyezkednek el. De ha megváltoztatja az order tulajdonság értékét, akkor az elemek az értékek sorrendjében lesznek elrendezve: -1 0 1 2 3 ... . Például, ha az egyik elemhez a következő sorrendet adjuk meg: 1, akkor először minden nulla lesz, majd az 1-es elem.
Így például az első elemet a végére mozgathatja anélkül, hogy megváltoztatná a többi elem vagy a HTML kód mozgási irányát.
Megjegyzések
Mi a különbség a rugalmas alap és a szélesség között?
Az alábbiakban bemutatjuk a rugalmas alap és a szélesség/magasság közötti fontos különbségeket:
- A flex tulajdonság használatakor 3 érték (flex-grow/flex-shrink/flex-alap) kombinálható és röviden írható, de a szélességnöveléshez vagy zsugorodáshoz külön kell írni. Például: flex:0 0 50% == szélesség:50%; rugalmas-zsugorodás:0; . Néha egyszerűen kényelmetlen.
A flex-basis csak a főtengelyen működik. Ez azt jelenti, hogy a flex-direction:row esetén a flex-basis a szélességet, a flex-direction:column pedig a magasságot szabályozza. .
A flex-alap csak a flex elemekre vonatkozik. Ez azt jelenti, hogy ha letiltja a flexet egy tárolónál, ennek a tulajdonságnak nincs hatása.
Az abszolút konténerelemek nem vesznek részt a flexibilis konstrukcióban... Ez azt jelenti, hogy a flex-basis nem befolyásolja a konténer flex elemeit, ha azok abszolút pozíció:abszolút . Meg kell adniuk a szélességet/magasságot.
Ha lehetséges, továbbra is részesítse előnyben a flex-bázist. Csak akkor használja a szélességet, ha a rugalmas alap nem megfelelő.
Mi a különbség a rugalmas alap és a szélesség között – hiba vagy funkció?
A flex elemen belüli tartalom nyomja, és nem lépheti túl azt. Ha azonban a szélesség vagy a max-width használatával állítja be a szélességet a flex-basis helyett, akkor egy rugalmas tárolóban lévő elem túlléphet a tároló határain (néha pontosan ez a kívánt viselkedés). Példa:
Flex elrendezési példák
A példákban sehol nem használnak előtagokat a böngészők közötti kompatibilitás érdekében. Ezt azért csináltam könnyű olvasmány css. Ezért lásd a példákat a legújabb verziói Chrome vagy Firefox.
#1 Egyszerű példa függőleges és vízszintes igazításra
Kezdjük a legegyszerűbb példával - függőleges és vízszintes igazítás egyszerre és tetszőleges blokkmagasságban, akár gumi is.
Vagy így, blokk nélkül:
#1.2 Elválasztás (törés) a flex blokk elemek között
A tárolóelemek élek mentén történő elhelyezéséhez és egy olyan elem véletlenszerű kiválasztásához, amely után szünet lesz, a margin-left:auto vagy a margin-right:auto tulajdonságot kell használnia.
#2 Adaptív menü flexen
Hozzunk létre egy menüt az oldal legtetején. Széles képernyőn a jobb oldalon kell lennie. Átlagosan igazítsa középre. A kicsinél pedig minden elemnek új sorban kell lennie.
#3 Adaptív 3 oszlop
Ez a példa bemutatja, hogyan készíthet gyorsan és kényelmesen 3 oszlopot, amely szűkítéskor 2-re, majd 1-re változik.
Kérjük, vegye figyelembe, hogy ez médiaszabályok használata nélkül is megtehető, minden rugalmasan működik.
Nyissa meg a jsfiddle.net webhelyet, és módosítsa az „eredmény” szakasz szélességét
#4 Adaptív blokkok flexen
Tegyük fel, hogy 3 blokkot kell kiadnunk, egy nagyot és két kicsit. Ugyanakkor szükséges, hogy a blokkok alkalmazkodjanak a kis képernyőkhöz. Mi csináljuk:
Nyissa meg a jsfiddle.net webhelyet, és módosítsa az „eredmény” szakasz szélességét
#5 Galéria hajlítással és átmenettel
Ez a példa bemutatja, milyen gyorsan készíthet aranyos harmonikát képekkel a flex segítségével. Ügyeljen a flex átmeneti tulajdonságára.
#6 Flex to Flex (csak egy példa)
A feladat egy rugalmas blokk készítése. Úgy, hogy a szöveg eleje minden blokkban vízszintesen ugyanabban a sorban legyen. Azok. A szélesség szűkülésével a tömbök magassága nő. Szükséges, hogy a kép felül legyen, a gomb mindig alul, a középső szöveg pedig egy vízszintes vonal mentén kezdődjön...
A probléma megoldása érdekében magukat a blokkokat rugalmasan megfeszítik és a lehető legnagyobb szélességre állítják. Minden beltéri egység szintén egy flex konstrukció, elforgatott tengelyű flex-irány:oszlop; és a középső elem (ahol a szöveg van) feszített flex-grow:1; hogy kitöltse az összes szabad helyet, így érhető el az eredmény - a szöveg egy sorral kezdődött...
További példák
Böngésző támogatás - 98,3%
Természetesen nincs teljes támogatás, de minden modern böngésző támogatja a flexbox kialakítást. Néhányan még mindig előtagot igényelnek. A valódi képért nézzük meg a caniuse.com oldalt, és lássuk, hogy a ma használt böngészők 96,3%-a előtag nélkül működik, 98,3%-a pedig előtagot használ. Ez egy kiváló mutató a flexbox magabiztos használatához.
Annak érdekében, hogy megtudjuk, mely előtagok relevánsak ma (2019. június), adok egy példát az összes rugalmas szabályra a szükséges előtagokkal:
/* Container */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -ms-flex-direction:column; flex-direction:column; -ms-flex-wrap:wrap; flex-wrap:wrap; -ms -flex-flow:oszlop tördelése; flex-flow:oszlop tördelése; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-beween; -ms-flex-line-pack: terjesztés; align-content:space-around; ) /* Elemek */ .flex-item ( -webkit-box-flex:1; -ms-flex-positive:1; flex-grow:1; -ms-flex- negatív:2; flex-shrink:2; -ms-flex-preferred-size:100px; flex-basis:100px; -ms-flex:1 2 100px; flex:1 2 100px; -ms-flex-item-align :center; align-self:center; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; )
Jobb, ha az előtagokkal rendelkező tulajdonságok az eredeti tulajdonság elé kerülnek.
Ez a lista nem tartalmaz olyan előtagot, amely ma (a caniuse szerint) felesleges lenne, de általában több az előtag.
| Króm | Szafari | Firefox | Opera | AZAZ. | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (régi) | 3.1+ (régi) | 2-21 (régi) | 10 (csipesítő) | 2.1+ (régi) | 3,2+ (régi) | |
| 21+ (új) | 6.1+ (új) | 22+ (új) | 12.1+ (új) | 11+ (új) | 4.4+ (új) | 7.1+ (új) |
- (új) - új szintaxis: kijelző: flex; .
- (tweener) - régi, nem hivatalos szintaxis 2011-ből: kijelző: flexbox; .
- (régi) - régi szintaxis 2009-ből: kijelző: doboz;
Videó
Nos, ne feledkezzünk meg a videóról, néha az is érdekes és érthető. Íme néhány népszerű:
Hasznos linkek a Flex-en
flexboxfroggy.com - flexbox oktatási játék.
A Flexplorer egy vizuális rugalmas kódkészítő.
hajlítási irány: oszlop;
Látni fogja, hogy ez visszahelyezi az elemeket egy oszlopelrendezésbe, ugyanúgy, mint a CSS hozzáadása előtt. Mielőtt továbblépne, törölje ezt a deklarációt a példából.
jegyzet: A flex elemeket fordított irányban is elhelyezheti a sor-visszafordítás és az oszlop-visszafordítás értékek használatával. Kísérletezzen ezekkel az értékekkel!
Csomagolás
Az egyik probléma, amely akkor merül fel, ha az elrendezésben rögzített szélesség vagy magasság van, az az, hogy végül a flexbox gyermekei túlcsordulnak a konténerükön, ami megtöri az elrendezést. Tekintse meg a flexbox-wrap0.html példánkat, és próbálja meg élőben megtekinteni (ha követni szeretné ezt a példát, készítsen egy helyi másolatot a fájlról):
Itt látjuk, hogy a gyerekek valóban kitörnek a konténerükből. A probléma megoldásának egyik módja, ha hozzáadja a következő deklarációt az elemhez, amely egy önálló szakaszt jelöl – amelynek nincs konkrétabb szemantikai eleme a html-dokumentumban lévő megjelenítéséhez.>
Flex-wrap: pakolás; rugalmas: 200 képpont;
Próbálja ki most; látni fogja, hogy az elrendezés sokkal jobban néz ki, ha ezt tartalmazza:
Mostantól több sorunk van – minden sorba annyi flexbox gyermeket illesztünk, amennyi ésszerű, és minden túlcsordulás a következő sorba kerül. A cikkeken beállított flex: 200px deklaráció azt jelenti, hogy mindegyik legalább 200 képpont széles; ezt a tulajdonságot a későbbiekben részletesebben tárgyaljuk. Észreveheti azt is, hogy az utolsó sor utolsó néhány gyermeke szélesebb lesz, így az egész sor továbbra is ki van töltve.
De itt még többet tehetünk. Először is próbálja meg módosítani a flex-direction tulajdonság értékét sorfordításra – most látni fogja, hogy még mindig megvan a többsoros elrendezés, de az a böngésző ablakban, és fordítva működik.
flex-flow gyorsírás
Ezen a ponton érdemes megjegyezni, hogy létezik egy rövidítés a flex-direction és flex-wrap-flex-flow kifejezésekre. Így például cserélheti
Flex-irány: sor; flex-wrap: pakolás;
Flex-flow: sortekercselés;
Rugalmas darabok méretezése
Térjünk vissza az első példánkhoz, és nézzük meg, hogyan szabályozhatjuk, hogy a space flex elemek mekkora hányadát foglalják el. Indítsa el a flexbox0.html helyi példányát, vagy vegye ki a flexbox1.html másolatát új kiindulópontként (lásd élő).
Először adja hozzá a következő szabályt a CSS aljához:
cikk (rugalmas: 1; )
Ez egy mértékegység nélküli arányérték, amely megszabja, hogy a főtengely mentén az egyes rugalmas elemek mekkora területet foglalnak el. Ebben az esetben mindegyiket megadjuk element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}
Most adja hozzá a következő szabályt az előzőhöz:
Cikk:n-edik típus(3) (rugalmas: 2; )
Szakasz - cikk cikk cikk - div - gomb div gomb div gomb gomb
Nézzük meg az elrendezéshez használt kódot.
Összegzés
Ezzel véget is ért a flexbox alapjaival kapcsolatos körút. Reméljük, jól érezte magát, és jól fog játszani vele, miközben továbbhalad a tanulásban. Ezután a CSS-elrendezések másik fontos aspektusát tekintjük át – a CSS-rácsokat.
Rajt
