Elrendezés CSS Flexbox használatával. Elrendezés CSS Flexbox használatával A szakaszelrendezés töredéke űrlappal

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 segítségével a legtöbbet elegánsan irányíthatja különböző paraméterek elemek a tartályon belül: irány, sorrend, szélesség, magasság, hosszirányú és keresztirányú elrendezés, 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, amelyek befolyásolhatják az elrendezési modellt: float, világos, 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

Flexbox tartalmaz különböző css szabályokat a teljes hajlékony 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é ()

flex-wrap:

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

flex-flow: iránytekerés

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

tartalom igazítása:

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.

elemek igazítása:

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 elemnek sem szabad növekednie és megtelnie szabad hely konténerben.

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

rendelés:

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

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

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 a css könnyebb olvasásához tettem. 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 legelejéről egyszerű példa- függőleges és vízszintes beállítás egyidejűleg és bármilyen blokk magassá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 belső blokk egyben hajlékony szerkezet is, 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 (tweener)	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ő.

A FlexBoxról szeretnék beszélni. Flexbox-elrendezés modul (flexible box - „flexible block”, be Ebben a pillanatban A W3C kandidátusi ajánlás célja, hogy többet kínáljon hatékony módszer a tároló elemei közötti szabad tér elrendezése, igazítása és elosztása, még akkor is, ha méretük ismeretlen és/vagy dinamikus (innen ered a "rugalmas" szó).

A flexibilis elrendezés fő ötlete, hogy a konténer lehetőséget adjon elemei szélességének/magasságának (és sorrendjének) megváltoztatására, hogy jobban kitöltse a helyet (a legtöbb esetben minden típusú kijelző és képernyőméret támogatása érdekében).A hajlékony tartály megfeszíti az elemeket, hogy kitöltse a helyet, vagy összenyomja őket, hogy megakadályozza a túlcsordulást.

A legfontosabb, hogy a flexbox elrendezése nem függ az iránytól, ellentétben a hagyományos elrendezésekkel (a függőlegesen elhelyezett blokkok és vízszintesen elhelyezett inline elemek).Noha a normál elrendezés nagyszerű a weboldalakhoz, hiányzik belőle a rugalmasság a nagy vagy összetett alkalmazások támogatásához (különösen, ha a képernyő tájolásának megváltoztatásáról, átméretezéséről, nyújtásáról, zsugorításáról stb.).

Mert A flexbox egy egész modul, nem csak egyetlen tulajdonság, hanem sok tulajdonságot egyesít.Ezek egy részét a tárolóra (a szülőelemre, az úgynevezett flex konténerre) kell alkalmazni, míg más tulajdonságokat a gyermekelemekre vagy flex elemekre kell alkalmazni.

Míg a normál elrendezés a blokk és a soros elemek áramlási irányain alapul, a rugalmas elrendezés a „flexiós áramlási irányokon” alapul.

Flexbox

Alapvetően az elemek vagy a főtengely mentén (a kezdőponttól a fővégig), vagy a keresztirányú tengely mentén (a keresztkezdettől a keresztvégig) lesznek elosztva.

főtengely - az a főtengely, amely mentén a hajlékony elemek találhatók.Kérjük, vegye figyelembe, hogy vízszintesnek kell lennie, minden az indokolás tartalom minőségétől függ.
főindítás | main-end - flex elemeket helyeznek el a tartályban a fő kiindulási helyzettől a fő végállásig.
fő méret — a flex elem szélessége vagy magassága a kiválasztott fő mérettől függően.Az alapmennyiség lehet az elem szélessége vagy magassága.
kereszttengely - a főre merőleges keresztirányú tengely.Iránya a főtengely irányától függ.
keresztkezdés | keresztvég - flex vonalak elemekkel vannak feltöltve, és keresztkezdő pozícióból és keresztvéghelyzetből a tartályba kerülnek.
keresztméret — a flex elem szélessége vagy magassága a kiválasztott mérettől függően egyenlő ezzel az értékkel.Ez a tulajdonság megegyezik a szélesség ill elem magassága a kiválasztott mérettől függően.

Tulajdonságok
kijelző: flex | inline-flex;

Meghatároz egy flexiós tárolót (a kiválasztott értéktől függően soron belül vagy blokk), és egy rugalmas kontextust köt össze az összes közvetlen leszármazottjával.

kijelző: egyéb értékek| flex | inline-flex;

Tartsd észben:

A CSS-oszlopok nem működnek rugalmas tárolóvala lebegés, a tiszta és a függőleges igazítás nem működik flex elemek esetén

flex-irány

A flex tároló szülőeleme előtt érvényes.

Beállítja a főtengelyt, és ezáltal meghatározza a tárolóba helyezett rugalmas elemek irányát.

flex-irány: sor | sor-fordított | oszlop | oszlop-fordítás

sor (alapértelmezett): balról jobbra az ltr, jobbról balra az rtl esetén;
sor-fordítás: jobbról balra ltr, balról jobbra rtl;
oszlop: hasonló a sorhoz, fentről lefelé;
oszlop-fordítás: hasonló a sor-fordításhoz, alulról felfelé.

flex-wrap

A flex tároló szülőeleme előtt érvényes.

Meghatározza, hogy a tároló egysoros vagy többsoros, valamint a kereszttengely iránya, meghatározza az új vonalak elhelyezkedésének irányát.

flex-wrap: nowrap | pakolás | wrap-reverse

nowrap (alapértelmezett): egysoros / balról jobbra ltr, jobbról balra rtl;
tördelése: többsoros / balról jobbra az ltr, jobbról balra az rtl;
wrap-reverse: többsoros / jobbról balra ltr, balról jobbra rtl.

flex-flow

A flex tároló szülőeleme előtt érvényes.

Ez a flex-direction és flex-wrap tulajdonságok rövidítése, amelyek együttesen határozzák meg a fő- és kereszttengelyeket.Az alapértelmezett érték a sor nowrap.

flex-flow< ‘flex-direction’> || < ‘Flex-wrap’>

indokolja-tartalom

A flex tároló szülőeleme előtt érvényes.

Meghatározza az igazítást a főtengelyhez képest.Segíti a szabad hely elosztását abban az esetben, ha a vonalelemek nem „nyúlnak”, vagy nyúlnak, de már elérték a maximális méretüket.Ezenkívül lehetővé teszi az elemek igazításának ellenőrzését, amikor azok túllépnek a vonalon.

indokolja-tartalom: flex-start | flex-end | központ | térköz | tér-körül

flex-start (alapértelmezett): az elemek a sor elejére kerülnek;
flex-end: az elemek a sor végére kerülnek;
középen: az elemek a vonal közepéhez igazodnak;
térköz: az elemek egyenletesen oszlanak el (az első elem a sor elején, az utolsó a végén)
tér körül: az elemek egyenletesen, egyenlő távolságra vannak elosztva egymás között és a vonalon kívül.

indokolja-tartalom
align-ites

A flex tároló szülőeleme előtt érvényes.

Meghatározza az alapértelmezett viselkedést arra vonatkozóan, hogy a rugalmas elemek hogyan helyezkedjenek el az aktuális sorban lévő kereszttengelyhez képest.Tekintsd úgy, mint a kereszttengely (a főtengelyre merőleges) igazoló tartalom változatát.

align-ites: flex-start | flex-end | központ | alapvonal | nyújtózkodni

flex-start: kereszt-kezdőszegély a kereszt-kezdő pozícióban lévő elemekhez;
flex-end: keresztvégi szegély a keresztvéghelyzetben elhelyezkedő elemekhez;
középpont: az elemek a kereszttengely közepéhez igazodnak;
alapvonal: az elemek az alapvonalukhoz igazodnak;
nyújtás (alapértelmezett): az elemeket a rendszer megnyújtja, hogy megtöltse a tartályt (figyelembe véve a min-szélességet / max-szélességet).

align-ites
align-content

A flex tároló szülőeleme előtt érvényes. Egy hajlékony tároló sorait igazítja, ha van szabad hely a kereszttengelyen, hasonlóan ahhoz, ahogy az igazítási tartalom a fő tengelyen. Megjegyzés: Ez a tulajdonság nem működik egysoros flexboxokkal.

align-content: flex-start | flex-end | központ | térköz | tér-körül | nyújtózkodni

flex-start: a vonalak a tároló kezdetéhez képest igazodnak;
flex-end: a vonalak a tartály végéhez képest igazodnak;
középen: a vonalak a tartály közepéhez igazodnak;
szóköz: a sorok egyenletesen oszlanak el (az első sor a sor elején, az utolsó a végén)
tér-körül: a vonalak egyenletesen, egyenlő távolsággal oszlanak el;
stretch (alapértelmezett): A vonalak ki vannak feszítve, hogy kitöltsék a rendelkezésre álló helyet.

align-content
rendelés

Alapértelmezés szerint a rugalmas elemek az eredeti sorrendben vannak elrendezve.A rendelés tulajdonság azonban szabályozhatja, hogy milyen sorrendben jelenjenek meg a tárolóban.

rendelés 1

flex-grow

A gyermek elemre/flex elemre vonatkozik. Meghatározza a rugalmas elem azon képességét, hogy szükség esetén „növekedjen”.Dimenzió nélküli értéket vesz fel, és arányként szolgál.Meghatározza, hogy egy elem mennyi szabad helyet foglalhat el egy tárolóban. Ha az összes elem flex-grow tulajdonsága 1, akkor minden gyermek azonos méretet kap a tárolóban.Ha az egyik gyereket 2-re állítja, kétszer annyi helyet foglal el, mint a többi.

flex-grow (alapértelmezett 0)

rugalmas-zsugorodás

A gyermek elemre/flex elemre vonatkozik.

Meghatározza azt a képességét, hogy egy rugalmas elem szükség esetén zsugorodik.

rugalmas-zsugorodás (alapértelmezett 1)

Negatív számokat nem fogadunk el.
rugalmas alapú

A gyermek elemre/flex elemre vonatkozik. Meghatározza az elem alapértelmezett méretét, mielőtt helyet foglalna a tárolóban.

rugalmas alapú | auto (alapértelmezett automatikus)

Flex

A gyermek elemre/flex elemre vonatkozik. Ez a flex-grow, flex-shrink és flex-alap rövidítése.A második és harmadik paraméter (flex-zsugorodás, flex-bázis) nem kötelező.Az alapértelmezett érték 0 1 auto.

flex: nincs | [< ‘Flex-grow «> <» flex-shrink’>? || < ‘Flex-basis’>]

igazod-ön

A gyermek elemre/flex elemre vonatkozik. Lehetővé teszi az egyes rugalmas elemek alapértelmezett vagy igazításának felülbírálását. Az elérhető értékek jobb megértéséhez tekintse meg az align-items tulajdonság leírását.

align-self: auto | flex-start | flex-end | központ | alapvonal | nyújtózkodni

Példák
Kezdjük egy nagyon-nagyon egyszerű példával, ami szinte minden nap előfordul: pontosan a középre igazítással.Mi sem lehet könnyebb, ha flexboxot használ.

Szülő (kijelző: flex; magasság: 300 képpont; ) .gyermek (szélesség: 100 képpont; / * Bármi * / magasság: 100 képpont; / * Bármi * / margó: automatikus; / * Varázslat! * / )

Ez a példa arra támaszkodik, hogy a flex konténer alatti margó, auto értékre állítva, extra helyet foglal el, így az ilyen módon történő behúzás az elemet pontosan mindkét tengely közepére igazítja.Képzeljen el egy 6 fix méretű elemből álló készletet (a szépség kedvéért), de a tartály átméretezhetőségével.Egyenletesen, vízszintesen szeretnénk elosztani őket, hogy a böngészőablak átméretezésekor minden jól nézzen ki (nincs @media lekérdezés!).

Flex-tartály (
/ * Először is hozzunk létre egy rugalmas kontextust * /
kijelző: flex;

/* Most határozzuk meg az áramlás irányát és azt, hogy akarjuk-e az elemeket
szállítva új sor
*Ne feledje, hogy ez ugyanaz, mint:
* Flex-irány: sor;
* Flex-wrap: pakolás;
* /
flex-flow: sortekercselés;

/ * Most határozzuk meg, hogyan oszlik el a hely * /
}

Kész. Minden más regisztráció kérdése. Próbáljunk meg valami mást.Képzelje el, hogy jobbra igazított navigációt szeretnénk a webhelyünk legtetején, de azt szeretnénk, hogy közepes méretű képernyőkön középre igazodva, a kis képernyőkön pedig egyetlen oszlop legyen.Minden nagyon egyszerű.

/*Nagy képernyők*/
.navigáció(
kijelző: flex;
flex-flow: sortekercselés;
/* Eltolja az elemeket a főtengely mentén a sor végére * /
justify-content: flex-end;
}

média minden és (max. szélesség: 800 képpont) (
.navigáció(
/* Közepes képernyők esetén középre helyezzük a navigációt,
egyenletesen elosztja a szabad helyet az elemek között * /
indokolja-tartalom: tér-körül;
}
}

/*Kis képernyők*/
média minden és (max. szélesség: 500 képpont) (
.navigáció(
/ * Kis képernyőkön sor helyett oszlopba rendezzük az elemeket * /
hajlítási irány: oszlop;
}
}

Játsszunk a flex tárgyak rugalmasságával!Mit szólna egy mobilbarát háromoszlopos elrendezéshez teljes szélességű fejléccel és lábléccel?És más sorrendben.

Csomagoló (
kijelző: flex;
flex-flow: sortekercselés;
}

/ * Állítsa be az összes elemet 100%-os szélességre * /
.header, .main, .nav, .aside, .footer (
flex 1100%;
}

/* Ebben az esetben az eredeti sorrendre hagyatkozunk, hogy irányítson bennünket
* Mobil eszközök:
* 1 fejléc
* 2 nav
* 3 fő
* 4 félre
* 5 lábléc
* /

/*Közepes képernyők*/
média minden és (min-szélesség: 600 képpont) (
/ * Mindkét oldalsáv ugyanazon a vonalon található * /
.félre (flex: 1 auto; )
}

/*Nagy képernyők*/

Egy valós formának példájával tesztfeladat, megmutatom, hogyan kell szedni BEM segítségével flexbox. Megkérdezheti: „Miért szükséges a szerint szedni BEM + Flexbox?" Ez a követelmény a munkáltatótól származik. Idézet a munkanyilatkozatból: "Próbálj meg keretek nélkül szedni (lehetőleg a flexbox), egyszerű és világos: kerülje a nehézkes szerkezeteket és a felesleges kódokat, használja a módszertant BEM."

Részlet elrendezés töredéke űrlappal

Az én elrendezési szabályaim

1. Ossza fel az elrendezést logikai szakaszokra
2. Kezdje az egyes szakaszokat egy címkével szakasz
3. Külön szakaszok és CSS egymástól uralkodtak, üres sor
4. Minden címkéhez rendeljen egy osztályt
5. Az osztály neve egy blokkhoz vagy elemhez, válaszol a kérdésre - Mi ez?
6. 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 neveit. 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 stresszt okoznak a kezdő elrendezéstervezőknek. Miért? Nagyon rosszul viselkednek - megpróbálják elfoglalni a teljes elérhető szélességet, és nem teszik lehetővé a teljes blokk háttérszínének és méreteinek beállítását.

Személyes adat

Mit tesz ebben az esetben egy rossz tervező? 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. Megéri felhajtást csinálni az extra kóddal? Mit tenne egy hozzáértő tervező? Újradefiniálja a beépített elemet blokkolásra vagy inline-blockra CSS szabályokat

Kijelző: blokk; // 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. Egy szakasz három gyermekelemből áll:

Ikon // osztálynév info__icon
cím // info__title
form // info__form

A lényeg az osztályok nevében van BEM, egy gyermek elem szülőhöz való tartozásából áll. Az elem nem nevezhető el ikon. Ez nem akármilyen ikon, hanem egy ikon a szakaszból info.

Lánya és szülője eggyé vált

Blokk info__űrlap, 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 rendelkező blokk tisztán wrapper funkcióval rendelkezik a bemenetekhez, így könnyen beállíthatja a külső margókat. Végül is a kisbetűs beírások úgy viselkednek, mint a gyerekek (ami ők azok), 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__bemenet. A szokásos bemenetekhez adjon hozzá egy módosítót info__input_long, és a rövid bemenet egy módosítót kap info__input_short. Hadd emlékeztesselek arra, hogy a módosító BEM, válaszolnia 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 nyúlunk hozzá kinézet, de koncentráljunk az elemek elhelyezésére. Szekciónkban két flex konténer található. Meg kell mondani, hogy a flexek használata, amikor minden elem egyenként helyezkedik el egy vonalon, nagyon kétséges. Az egyetlen kapott haszon az ingatlan indokolja-tartalom, középre igazított, flex elemek. Védelemként elmondhatom, hogy a flexek gondolata csak ebben a részben értelmetlen. Az elrendezés valódi elrendezése általában változatosabb.

Info (
kijelző: flex;
indokol-tartalom: center;
align-ites: center;
hajlítási irány: oszlop;
margó felső: 77 képpont;
magasság: 100%;
}

Info__űrlap (
kijelző: flex;
indokol-tartalom: center;
hajlítási irány: oszlop;
magasság: 100%;
margó felső: 50 képpont;

Az align-content tulajdonság megadja a vonalak igazításának típusát egy 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 A vonalak a keresztirányú tengely elején helyezkednek el. Minden következő sor egy síkban van az előzővel. flex-end A sorok a kereszttengely végétől kezdődően kerülnek elhelyezésre. Minden előző sor egy síkban van a következővel. center A vonalak a tartály közepén helyezkednek el. space-beween A vonalak egyenletesen oszlanak el a tartályban, és a távolságuk is azonos. térköz A vonalak egyenletesen vannak elosztva, 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 üres tér egyenlő a két szomszédos sor közötti térköz felével. space-evenly 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. nyújtás A vonalak egyenletesen meg vannak feszítve, hogy kitöltsék a rendelkezésre álló 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 rugalmas 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é helyezkednek el. 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.

Ebben a cikkben bemutatjuk a CSS Flexbox technológiát, amelyet rugalmas weboldal-elrendezések létrehozására terveztek.

A CSS Flexbox célja

A CSS Flexbox erre való rugalmas elrendezések létrehozása. Ezzel a technológiával nagyon egyszerűen és rugalmasan elrendezheti az elemeket egy konténerben, eloszthatja közöttük a rendelkezésre álló teret, és így vagy úgy igazíthatja őket, még akkor is, ha nem rendelkeznek meghatározott méretekkel.

A CSS Flexbox lehetővé teszi a létrehozást adaptív kialakítás sokkal egyszerűbb, mint a Float és a pozicionálás használata.

A Flexbox egy teljes oldal és egyes blokkjainak CSS-jelölésére is használható.

Böngésző támogatása a CSS Flexboxhoz

A CSS Flexboxot minden jelenleg használt támogatja modern böngészők(előtagok használatával: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

A CSS Flexbox alapjai

A CSS-jelölés Flexbox használatával történő létrehozása a szükséges HTML-elem CSS-megjelenítési tulajdonságának flex vagy flex-inline beállításával kezdődik.

Azt követően ezt az elemet rugalmas konténerré válik, és minden közvetlen gyermek elemek– flex elemek. Sőt, amikor flexboxról beszélünk, akkor csak egy display:flex vagy display:flex-inline elemet értünk alatta és az összes elemet közvetlenül található benne. Így a CSS Flexboxban csak kétféle elem létezik: egy flex konténer és egy flex elem.

Az előtag és a max-width tulajdonságok hozzáadásra kerültek a CSS-hez, hogy támogassák az elrendezést a legtöbb böngészőben.

Egy blokk rugalmas tárolóvá alakításához használja a sorosztályt. A flex tárolóban lévő .col__article és .col__aside flex elemek szélességének beállítása a flex CSS tulajdonság segítségével történik.

Példaként jelöljünk meg egy másik láblécet a flexbox segítségével, és hozzunk létre egy három elemből álló blokkot a .col__article elemben (egy elem minimális szélessége 300 képpont). A láblécben négy blokkot helyezünk el (egy blokk minimális szélessége 200 képpont).