Összetett elrendezések flex css példákkal. Mi az a Flexbox? Az összes css tulajdonság leírása, alapelvek, előnyök és hátrányok
A Flexbox ideális az általánosan használt weboldal-elrendezések készítéséhez, mint például a három oszlopos, úgynevezett "Szent Grál" elrendezés, ahol minden oszlopnak teljes magasságot kell felvennie, függetlenül a tartalomtól. Ugyanakkor be forráskód a fő tartalom a navigáció elé kerül, magán az oldalon pedig a fő tartalom a navigáció után.
Mint ez.
A flexbox megjelenése előtt ezt a fajta elrendezést meglehetősen nehéz volt elérni valamilyen hack használata nélkül. A fejlesztőknek gyakran kellett olyan dolgokat tenniük, mint például extra jelölések hozzáadása, negatív margók alkalmazása és egyéb trükkök, hogy minden a tartalom mennyiségétől vagy a képernyő méretétől függetlenül megfelelő legyen. De ahogy a fenti példa is mutatja, a flexboxon minden sokkal egyszerűbb.
Itt található a kód összefoglalása. Ebben a példában a #main elemet rugalmas tárolóvá tesszük, miközben a fejlécet és a láblécet blokkszintű elemként hagyjuk meg. Más szóval, csak a középső rész válik flexboxgá. Itt van egy részlet, amely rugalmas tárolóvá teszi.
#main (kijelző: flex; min-magasság: calc(100vh - 40vh); )
Csak a display: flexet használjuk egy flex tároló készítéséhez. Figyeljük meg, hogy a calc() függvénnyel a min-height értéket is beállítjuk, és a #main értéket a nézetablak magasságának 100%-ára állítjuk. mínusz a sapka és a pince magassága (mindegyik 20 Vh). Ez biztosítja, hogy az elrendezés a képernyő teljes magasságát elfoglalja, még akkor is, ha kevés a tartalom. Ennek eredményeként a lábléc soha nem emelkedik fel és hagy üres helyet alatta, ha a tartalom kevesebbet foglal el, mint a képernyő magassága.
A min-magasság kiszámítása elég egyszerű volt, tekintve, hogy minden elemre box-méretezést alkalmaztunk: border-box. Ha nem, akkor hozzá kell adnunk a kitöltési értéket a kivont összeghez.
A flex konténer beszerelése után flex cikkekkel van dolgunk.
#main > cikk ( flex: 1; ) #main > nav, #main > aside ( flex: 0 0 20vw; background: beige; ) #main > nav ( sorrend: -1; )
A flex tulajdonság a flex-grow, flex-shrink és flex-basis tulajdonságok rövidítése. Az első esetben csak egy értéket írtunk, így a flex beállítja a flex-grow tulajdonságot. A második esetben mindhárom értéket ehhez írtuk
Az align-content tulajdonság beállítja a vonalak igazítását a hajlékony tárolóban a keresztirányú tengely mentén, ha van szabad hely.
Arra vonatkozik: flex konténer.
Alapértelmezett érték: nyúlik.
Flex-start vonalak a kereszttengely elején találhatók. Minden következő sor egy szintbe kerül az előzővel. flex-end A vonalak a kereszttengely végétől kezdve kerülnek elhelyezésre. Minden előző sor egybeesik a következővel. központ A vonalak a tartály közepén helyezkednek el. térköz A vonalak egyenletesen oszlanak el a tárolóban, és a köztük lévő távolság azonos. tér körül A vonalak egyenletesen vannak elosztva úgy, hogy a két szomszédos vonal közötti távolság azonos legyen. Az első sor előtti és az utolsó sor utáni szóköz a két szomszédos sor közötti térköz fele. téregyenletes A sorok egyenletesen vannak elosztva. Az első sor előtti és az utolsó sor utáni szóköz ugyanolyan széles, mint a többi sor. stretch A vonalak egyenletesen meg vannak feszítve, hogy kitöltsék a szabad helyet.
Az align-content tulajdonság a hajlékony tároló vonalait igazítja a flexi tárolón belül, ha a kereszttengelyen van több hely, hasonlóan ahhoz, ahogy a justify-content az egyes elemeket igazítja a főtengelyen belül. Megjegyzés: ez a tulajdonság nincs hatással az egysoros flex tárolókra. Az értékek a következő jelentéssel bírnak:
Megjegyzés: Csak a többsoros flexibilis tárolóknál van szabad hely a kereszttengelyen a vonalak igazítására, mivel az egysoros flexibilis tárolókban az egyetlen vonal automatikusan megnyúlik, hogy kitöltse a teret.
Vonatkozik: flex konténerek.
A kezdeti: nyúlik.
Flex-start A vonalak a rugalmas tartály kezdete felé vannak csomagolva. A flexibilis tartályban az első vonal keresztező élét egy szintben kell elhelyezni a flexibilis tartály keresztkezdő élével, és minden további sor egy síkban van az előző vonallal. flex-end A vonalak a flexibilis tartály vége felé vannak csomagolva. Az utolsó sor keresztirányú élét egy szintben kell elhelyezni a flexibilis tartály keresztirányú szélével, és minden megelőző vonalat egy szintben kell elhelyezni a következő vonallal. center A vonalak a flexibilis tartály közepe felé vannak tömörítve. A hajlékony tartályban lévő vonalak egymással egy síkban helyezkednek el, és a rugalmas tartály közepén helyezkednek el úgy, hogy a flexi tartály keresztirányú tartaloméle és a flexibilis tartály első sora között egyenlő mennyiségű hely legyen, valamint a flex tartály keresztvégi tartaloméle és a flex tartály utolsó sora. (Ha a maradék szabad tér negatív, a vonalak mindkét irányban egyformán túlcsordulnak.) space-beveen A vonalak egyenletesen oszlanak el a flexi tárolóban. Ha a maradék szabad hely negatív, ez az érték megegyezik a flex-start értékkel. Ellenkező esetben a hajlékony tartályban az első sor kezdőéle egy síkban van a flexi tartály keresztkezdő tartalomélével, a flex tartályban az utolsó sor keresztező éle pedig egy szintben van a keresztezővel. A flexibilis tartály végső tartaloméle, és a hajlékony tartályban lévő többi vonal úgy van elosztva, hogy a két szomszédos vonal közötti távolság azonos legyen. térköz A vonalak egyenletesen oszlanak el a flexibilis tárolóban, mindkét végén feleakkora terekkel. Ha a maradék szabad hely negatív, ez az érték megegyezik a középponttal. Ellenkező esetben a hajlékony tartályban lévő vonalak úgy vannak elosztva, hogy a két szomszédos vonal közötti távolság azonos, és az első/utolsó sorok és a hajlékony tartály szélei közötti távolság fele akkora, mint a hajlékony vonalak közötti távolság. téregyenletes A vonalak egyenletesen vannak elosztva a flex tartályban. Ha a maradék szabad hely negatív, ez az érték megegyezik a középponttal. Ellenkező esetben a vonalak a hajlékony tartályban úgy vannak elosztva, hogy a távolság minden hajlékony vonal között azonos legyen. nyújtás A vonalak megnyúlnak, hogy elfoglalják a maradék helyet. Ha a maradék szabad hely negatív, akkor ez az érték megegyezik a flex-start értékkel. Ellenkező esetben a szabad teret egyenlően osztják fel az összes vonal között, növelve a keresztméretüket.
Egy valós tesztfeladat űrlappéldájával megmutatom, hogyan kell a szerint szedni BEM segítségével flexbox. Azt kérdezed: "Miért kell a szerint szedni BEM + Flexbox?" Ez a követelmény a munkáltatótól származik. Idézet a TOR-ból: "Próbálj meg keretek nélkül szedni (lehetőleg flexbox), egyszerű és világos: kerülje a nehézkes konstrukciókat és az extra kódot, használja a módszertant BEM."
Metszet elrendezési töredék űrlappal
Az én elrendezési szabályaim
- Ossza fel az elrendezést logikai szakaszokra
- Kezdje az egyes szakaszokat egy címkével szakasz
- külön szakaszok és css külön uralkodott, üres húr
- Minden címkéhez rendeljen egy osztályt
- A blokk vagy elem osztályának neve válaszol a kérdésre - Mi ez?
- A módosító neve válaszol a kérdésre - Melyik?
HTML jelölés
Először elkészítem a jelölést, meghatározom a blokkok egymásba ágyazását, és kitalálom az osztályok nevét. Az alábbi kódban két soron belüli címkénk található - h2És bemenet. A beágyazott címkék fejfájást és stresszforrást jelentenek a kezdő elrendezéstervezőknek. Miért? Nagyon rosszul viselkednek - megpróbálják elfoglalni a teljes elérhető szélességet, nem teszik lehetővé a teljes blokk háttérszínének és méretének beállítását.
Személyes adat
Mit csinál ilyenkor egy rossz kódoló? A soron belüli elemeket blokkcímkékbe csomagolja divés beállítja az összes szükséges tulajdonságot a wrapper címkéhez. A soron belüli gyermekelemek öröklik ezeket a tulajdonságokat. Érdemes bekeríteni a kertet a felesleges kódból? Hogyan jár el egy hozzáértő tördelőtervező? Újradefiniál egy soron belüli elemet a blokkoláshoz vagy a soron belüli blokkhoz css szabályokat.
display:block; // a bemeneti címkéhez
kijelző: inline-block // a h2 címkéhez
Beágyazó logika és blokknevek
Látunk egy szekciót személyes adatokkal, ezért szekcióosztálynak nevezzük - info. A szakasz három gyermekelemből áll:
Ikon // osztálynév info__icon
cím // info__title
form // info_form
Az osztálynév lényege BEM, abból áll, hogy a gyermek elem a szülőhöz tartozik. Az elemet nem lehet elnevezni ikon. Ez nem csak egy ikon, hanem egy ikon a szakaszból info.
Lánya és szülő egy személyben
Blokk info_form, van egy speciális - ez van beágyazva a szakaszba info, de ugyanakkor űrlapmezőket is tartalmaz. Ennek a jelenségnek a neve többszintű beágyazás. Az űrlappal ellátott blokk tisztán wrapper funkciót hordoz a bemenetekhez, így könnyen beállíthatja a külső behúzásokat. Hiszen a kisbetűs bemenetek úgy viselkednek, mint a gyerekek (ami is ők), egyáltalán nem engedelmeskednek. Ráadásul a második bemenet rövidebb, mint az összes többi, és csak a szélességben különbözik.
Egy osztályt állítunk be minden azonos tulajdonságú bemenethez, kivéve a szélességet - info_input. Közönséges bemenetek, adjunk hozzá módosítót info_input_long, és rövid bemenet - módosító info_input_short. Hadd emlékeztesselek arra, hogy a módosító BEM válaszolni kell a kérdésre - Melyik?
CSS szabályok a módosítókhoz
.info__input_long(szélesség: 520 képpont
}
info__input_short(
szélesség: 320 képpont
}
CSS kód
BAN BEN HTML A jelölés a webhely durva szerkezetét hozza létre css, már az elrendezésnek megfelelően helyezzük el az elemeket. Ma nem a megjelenéssel foglalkozunk, hanem az elemek elhelyezésével foglalkozunk. Szekciónkban két flex konténer található. Azt kell mondanom, hogy a flexiók használata, soronként egy-egy elrendezéssel, nagyon kétséges. Az egyetlen előny, amit kap, az az ingatlan indokolja-tartalom, középre igazító, flex elemek. Védekezésemre elmondhatom, hogy a flexekkel való gondolat értelmetlen, csak ennek a résznek az összefüggésében. Az elrendezés valódi elrendezése általában változatosabb.
info(
display:flex;
indokol-tartalom: center;
align-ites: center;
hajlítási irány: oszlop;
margó felső: 77 képpont;
magasság: 100%;
}
info_form(
display:flex;
indokol-tartalom: center;
hajlítási irány: oszlop;
magasság: 100%;
margó felső: 50 képpont;
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. De mielőtt a leírására rátérnénk, nézzük meg, mi a baj a most használt elrendezési módszerekkel?
Bármely írógép többféleképpen tud valamit függőlegesen igazítani, vagy 3 oszlopos elrendezést készíteni gumi középső oszloppal. De valljuk be, mindezek a módszerek meglehetősen furcsaak, 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. A weblapok eleinte egyszálú szöveges dokumentumoknak tűntek, kicsit később táblázatokkal blokkokra osztották az oldalt, majd divat lett a floatokkal szedni, majd az ie6 hivatalos halála után bekerültek az inline-block trükkök is. Ennek eredményeként az összes létező weboldal 99,9%-ának elrendezéséhez használt technikák robbanásszerű keverékét örököltük.
Blokkok többsoros rendszerezése egy rugalmas konténerben.
flex pakolás
Az összes fent említett példa a blokkok egysoros (egyoszlopos) elrendezésének figyelembevételével készült. Azt kell mondanom, hogy alapértelmezés szerint a flex konténer mindig egy sorban helyezi el a benne lévő blokkokat. A specifikáció azonban támogatja a többsoros módot is. A flex-wrap CSS-tulajdonság felelős a többsoros flex-tárolóban.
Elérhető értékek flex pakolás:
- 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.
A flex-flow egy praktikus rövidítés a flex-direction + flex-wrap kifejezésekre
Valójában a flex-flow lehetőséget ad arra, hogy egy tulajdonságban leírja a keresztirányú tengely fő- és többvonalának irányát. Alapértelmezés szerint flex-flow: sor nowrap .
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 ;)igazítsa a tartalmat
Létezik az align-content tulajdonság is, amely meghatározza, hogy az eredményül kapott blokksorok hogyan legyenek függőlegesen igazítva, és hogyan osztoznak a flexi tároló teljes területén.
Fontos: Az align-content csak többsoros módban működik (vagyis flex-wrap:wrap; vagy flex-wrap:wrap-reverse esetén;)
Elérhető értékek igazítsa a tartalmat:
- flex-start: blokksorokat tolunk a flex tároló elejére.
- flex-end: a tömbsorokat a flexi tartály végére tolják
- 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ó blokksor a végén lévő blokk, az összes többi sor egyenletesen oszlik el a fennmaradó térben.
- space-around: A blokkok sorai egyenletesen helyezkednek el a rugalmas tároló elejétől a végéig, egyenlően osztva el az összes szabad helyet.
- nyújtózkodni (alapértelmezett érték): A blokksorok ki vannak feszítve, hogy elfoglalják az összes rendelkezésre álló helyet.
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 flexibilis doboz kezdeti főtengelyének méretét, mielőtt más flexibilis tényezőkön alapuló átalakításokat alkalmaznának rá. Beállítható bármilyen hosszmértékben (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 a tartalom méretétől függhet, ha nincs kifejezetten megadva.
flex-grow - egyetlen flex blokk "kapzsisága".
Meghatározza, hogy egy egyedi hajlékony doboz mennyivel lehet nagyobb, mint a szomszédos elemek, ha szükséges. a flex-grow dimenzió nélküli értéket vesz fel (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 egyikben van flex-grow:2, akkor 2x nagyobb lesz, mint az összes többi
2. példa:
- Ha egy flex tárolóban lévő összes flex dobozban van flex-grow:3 , akkor azonos méretűek lesznek
- Ha az egyiknek flex-grow:12 van, akkor 4-szer 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ű flexblokkhoz képest.
flex-shrink - egyetlen flex blokk "összenyomhatósági" tényezője
Meghatározza, hogy mennyit zsugorodik a hajlékony doboz a szomszédos elemekhez képest a rugalmas tárolóban, ha nincs elég szabad hely. Az alapértelmezett az 1.
flex - rövidítés a flex-növekedés, flex-zsugorodás és flex-alap tulajdonságokhoz
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 egy rugalmas tároló align-items tulajdonságának felülbírálását egy egyedi hajlékony dobozhoz.
Rendelkezésre álló igazítási értékek (ugyanaz 5 lehetőség, mint az igazítási elemeknél)
- flex-start: a flexdobozt a kereszttengely elejére toljuk
- flex-end: a flex dobozt a kereszttengely végére toljuk
- középen: a flex box a kereszttengely közepére kerül
- alapvonal: flex box az alapvonalhoz igazítva
- nyújtózkodni (alapértelmezett érték): A flexibilis doboz úgy van megfeszítve, hogy a kereszttengelyen az összes rendelkezésre álló helyet elfoglalja, figyelembe véve a min-/max-szélességet, ha van ilyen.
rendelés - egyetlen flex blokk sorrendje a flex 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 az alapértelmezett értéke 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 a következő sorrendben követik egymást a főtengely mentén: 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 Flexbox legalább azért szerethető, mert a margón keresztül mindenki számára ismerős vízszintes beállítás: az auto itt a függőlegesnél is működik!
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 doboz függőlegesen és vízszintesen középre van állítva! */ )
Dolgok, amikre emlékezni kell
- A flexboxot nem szabad ott használni, ahol nincs rá szükség.
- Továbbra is hasznos a régiók meghatározását és a tartalom átrendezését sok esetben az oldal szerkezetétől függővé tenni. 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ók nem „összecsukódnak”, mint a normál áramlásban.
- A flex blokkok lebegőértékét nem veszik figyelembe, és ez nem számít. Ez valószínűleg valahogyan felhasználható a kecses degradációra, amikor flexboxra váltunk.
- A flexbox kiválóan alkalmas webkomponensek és weboldalak egyes részeinek elrendezésére, de nem teljesített jól az alapvető elrendezések (cikk helyzete, fejléc, lábléc, navigációs sáv stb.) elrendezésében. Ez még vitatható, de ez a cikk meglehetősen 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 hatalmas számú feladat megoldása során. És az biztos, hogy most meg kell próbálnod dolgozni vele. A következő cikkek egyikének lesz szentelve konkrét példák flex elrendezéssel dolgozni. Feliratkozás a hírekre ;)
Semmi sem áll meg, a technológiák és szabványok fejlődnek, új technikák és helyszínelrendezési módszerek jelennek meg, például a táblázatos elemeket tartalmazó elrendezés, amelyet nem vettünk figyelembe objektív okok elrendezésű lebegő elemek váltották fel.
Sok kódszerkesztőben van egy praktikus Emmet jelölőbővítmény, amely alapértelmezés szerint be van építve vagy letölthető, amely lehetővé teszi a példa alapvető jelölését a következők szerint: szakasz>div*3>lorem+ Tab (érték lorem az alábbi képen látható szöveget generálja).
Vegye figyelembe, hogy kis erőfeszítéssel elértük, hogy az elrendezési oszlopaink egyforma magasságúak legyenek, függetlenül attól, hogy tartalommal voltak feltöltve, ami nagyszerű. Elemek
alapértelmezés szerint nem rugalmas elemek, és a folyamatban találhatók harmadik elem
Példánk eredménye:
Beépített rugalmas tároló
A blokkelemekkel analóg módon a flexibilis konténerek beépíthetők. Nézzük meg a különbséget az inline flex tárolók és a blokk rugalmas tárolók között. Az előző példában a blokkkonténer használatát vizsgáltuk, csakúgy, mint egy normál blokkelem, a képernyő teljes szélességét elfoglalja, és úgy viselkedik, mint egy normál blokk szintű elem. Ami az inline flex tárolókat illeti, normál beépített elemekké válnak, miközben megőrzik az elemek rugalmasságát.
A következő példában ezt a különbséget fogjuk megvizsgálni, mivel az előző példa nem lenne reprezentatív, mivel a gyermek flex elemek nem voltak kifejezetten méretezve, és ennek eredményeként a konténerünk, legyen az inline vagy blokk, ugyanúgy viselkednek, és a képernyő teljes szélességében elfoglalják.
Ebben a példában elhelyeztük kettő kisbetűs és kettő blokk flex konténereket, ezekbe helyeztük el öt elemeket
Hasonló elrendezés gyors létrehozásához a Hangyaírja be a következőt a szerkesztőbe: div.inline-flex*2>div*5 + Tab , és tegye ugyanezt egy másik osztállyal div.flex*2>div*5 + Tab .
Vessen egy pillantást a példánk kimenetére, a beépített és a blokk rugalmas konténerek közötti különbség most már nyilvánvaló az Ön számára. A beágyazott konténer úgy viselkedik, mint egy beépített elem, és csak a flex gyermekei által igényelt szélességet veszi fel, míg a blokk flex konténer, függetlenül a flex gyermekei méretétől, a képernyő teljes szélességét.
Példánk eredménye:
Rizs. 205 Példa az inline-flex tárolók és a flex tárolók közötti különbségre.
Irány? Melyik irányba?
A flex elemek iránya két tengely helyzete alapján alakul ki: főtengely konténer flex és annak keresztirányú tengely, amely mindig található a főre merőlegesen. Főtengely ltr irányban (globális HTML attribútum dir , vagy az irány CSS tulajdonság ltr értékkel) balról jobbra, a keresztirányú pedig felülről lefelé (ez az alapértelmezett érték), az rtl értéknél ez tükröződik, ill.