Minden flexbox tulajdonság. Flexbox: Új CSS-elrendezési elv. Adaptív elrendezés készítése

Röviden, a Flexbox-szal történő elrendezés egyszerű megoldásokat kínál az egykor nehéz feladatokra. Például, ha egy elemet függőlegesen kell igazítania, vagy a láblécet a képernyő aljára kell tolni, vagy egyszerűen több blokkot kell beilleszteni egy sorba, hogy azok elfoglalják az összes szabad helyet. Hasonló feladatokat flex nélkül oldanak meg. De általában ezek a megoldások inkább "mankók" - trükkök a css más célokra történő használatához. Míg a flexbox esetében az ilyen feladatokat pontosan úgy oldják meg, ahogy a flex modell elképzeli.

A CSS Flexible Box Layout Module (CSS modul rugalmas blokkokkal rendelkező elrendezésekhez), röviden a flexbox, azért jött létre, hogy kiküszöbölje a HTML-szerkezetek széles skálájának, köztük a különböző szélességekhez és magasságokhoz igazított struktúrák létrehozásának hátrányait, é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 a mi mindenünk!

A Flexbox lehetővé teszi a tartályon belüli elemek legkülönfélébb paramétereinek elegáns vezérlését: irány, sorrend, szélesség, magasság, hosszirányú és keresztirányú igazítás, szabad hely elosztása, nyújtó és zsugorodó elemek.

Alap tudás

A FlexBox egy tárolóból és a hozzá tartozó gyermekelemekből (elemekből) (rugalmas elemek) áll.

A flexbox engedélyezéséhez bármely HTML-elemnek csak be kell állítania a css tulajdonságot a 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 van igazítva. Alapértelmezés szerint a főtengely vízszintes, és iránya balról jobbra halad (→), a kereszttengely pedig függőleges, és felülről lefelé irányul (↓).

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 egyszerűen felcserélték a tengelyeket. 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 gondolni a tengelyekre egy konténerben. Nem szabad azonban azt gondolni, hogy vannak ott néhány „fizikai” tengely, é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özepéhez, majd megváltoztattuk ennek a főtengelynek az irányát, akkor az igazítás is megváltozik: az elemek vízszintesen középen voltak, és 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. Hogy megértsük, miről beszélünk, képzeljük el, hogy van egy fő vízszintes tengely, sok az elem, és ezek nem "másznak be" a konténerbe, így átkerülnek egy másik sorba. Azok. a konténer így néz ki: konténer, benne két sor van, minden sor több elemből áll. Képviselt? És most ne feledje, hogy nemcsak az elemeket, hanem a sorokat is függőlegesen igazíthatjuk! Hogyan működik, jól látható a példában a . És így néz ki sematikusan:

Az elrendezési modellt befolyásoló CSS-tulajdonságok: float , clear , vertical-align , az oszlopok nem működnek a flex konstrukciókban. Itt egy másik elrendezési modellt használunk, és ezeket a css tulajdonságokat egyszerűen figyelmen kívül hagyjuk.

Flexbox CSS tulajdonságai

A Flexbox különböző css-szabályokat tartalmaz a teljes flex-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

Engedélyezi az elem flex tulajdonságát. Maga az elem és a benne beágyazott elemek tartoznak ebbe a tulajdonság alá: csak az első szint leszármazottai lesznek érintettek - ezek lesznek a flex konténer elemei.

• Flex- az elem teljes szélességében megnyúlik, és a környező blokkok között van a teljes hely. A blokk elején és végén sortörés van.
• inline-flex- az elemet más elemek veszik körül. Ugyanakkor a belső része blokk elemként, maga az elem pedig inline elemké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 .

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 hátoldala- az elemek iránya alulról felfelé ()

Szabályozza azon elemek burkolását, amelyek nem férnek el a tárolóban.

• nowrap (alapértelmezett)- a beágyazott elemek egy sorban (irány=sorral) vagy egy oszlopban (irány=oszloppal) vannak elrendezve, függetlenül attól, hogy konténerben vannak-e elhelyezve vagy sem.
• betakar- tartalmazza az elemek áthelyezését a következő sorba, ha nem férnek el a tárolóban. Ez lehetővé teszi az elemek mozgását a keresztirányú tengely mentén.
• wrap fordított- ugyanaz, mint a pakolás csak az átvitel nem lesz lefelé, 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ág kevesebb kód írására jött létre.

A flex-flow e két tulajdonság értékeit szóközzel választja el. 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.

• rugalmas indítás (alapértelmezett)- az elemek az elejétől mennek (lehet, hogy van szó a végén).
• hajlékony vég- az elemek a végén igazodnak (a hely az elején marad)
• központ- középen (a hely bal és jobb oldalon marad)
• közötti térköz- az extrém elemek a szélekhez vannak nyomva (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 (az extrém elemek nem nyomódnak a szélekhez). A tartály széle és a legkülső elemek közötti távolság fele lesz a sor közepén lévő elemek közötti térköznek.
• térben egyenletesen

Az elemeket tartalmazó sorokat a keresztirányú tengely mentén igazítja. Ugyanaz, mint az igazoló tartalom, de 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 a láthatatlan sorokat függőlegesen igazítja ¦ . 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 maguk a sorok megfeszítik a tárolót, és minden igazításuk értelmét veszti, mert nincs szabad hely közöttük... 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 értelmet nyer...

• nyújtás (alapértelmezett)- a sorokat úgy nyújtjuk, hogy teljesen kitöltsék a sort
• rugalmas indítás- a sorok a tartály tetején vannak csoportosítva (a végén lehet hely).
• hajlékony vég- a sorok a tartály alján vannak csoportosítva (a hely az elején marad)
• központ- a sorok a tartály közepén vannak csoportosítva (a hely a széleken marad)
• közötti térköz- a szé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 szélső elemek nincsenek a szélekhez nyomva). A tartály széle és a legkülső elemek közötti távolság fele lesz a sor közepén lévő elemek közötti térköznek.
• térben egyenletesen- ugyanaz, mint a space-around , csak a szélső elemek távolsága a tartály széleitől azonos 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 az align-contenten keresztül vannak igazítva, a sorokon (sorokon) belüli elemek pedig az igazítási elemeken keresztül, és mindez a keresztirányú tengely mentén. Nincs ilyen elválasztás a főtengely mentén, nincs sor fogalma, és az elemek igazítása a justify-content használatával történik.

• nyújtás (alapértelmezett)- az elemek ki vannak feszítve, hogy teljesen kitöltsék a vonalat
• rugalmas indítás- 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én vannak igazítva
• alapvonal- az elemek a szöveg alapvonalához igazodnak

Tartályelemekhez

Megadja az elem növelésének 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 flex-grow:1-et ad meg, akkor mindegyik ugyanúgy nyúlik, és kitölti a tárolóban lévő összes szabad helyet.
• Ha az egyik elemnél 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ás már nem működik: nincs szabad hely az igazításhoz...
• Rugalmas növekedéssel:1. Ha az egyikben van flex-grow:2, akkor 2x nagyobb lesz, mint az összes többi
• Ha egy flex tárolóban 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 4-szer nagyobb lesz, mint az összes többi

Hogyan működik? Tegyük fel, hogy a tároló 500 képpont széles, és két elemet tartalmaz, mindegyik alapszélessége 100 képpont. Így 300 szabad képpont maradt a tárolóban. Most, ha az első elemet flex-grow-ra állítjuk: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, +200px az elsőhöz és +100px a másodikhoz.

Megjegyzés: az értékben törtszámokat is megadhat, például: 0,5 - flex-grow:0,5

Megadja 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. Adjunk meg flex-shrink: 2-t az első elemhez; , é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 lesznek összenyomva, 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

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 segítségével 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 az ismerős szélesség tulajdonság segítségével kódoljuk. Például szélesség: 50%; azt jelenti, hogy a tartály belsejében lévő elem pontosan 50%, 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 "kemény" 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 felírható flex:0 0 200px; .

Három tulajdonság rövidítés: 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-basis */ 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: a tároló igazítási elemeiből

• nyújtózkodni- az elem meg van feszítve, hogy teljesen kitöltse a vonalat
• rugalmas indítás- 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 fognak felsorakozni: -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 dobhatja, miközben nem változtatja meg a többi elem vagy a HTML kód mozgási irányát.

Megjegyzések

Miben különbözik a rugalmas alap a szélességtől?

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 flex-basis a szélességet (szélességet), a flex-direction:column pedig a magasságot (magasságot) szabályozza. .

a flex-alap csak a rugalmas cikkekre vonatkozik. Ez azt jelenti, hogy ha letiltja a flexet a tárolón, ennek a tulajdonságnak nincs hatása.

Az abszolút konténerelemek nem vesznek részt a flex konstrukciókban... Ez azt jelenti, hogy a flex-basis nem befolyásolja a konténer flex elemeket, ha abszolút pozíció:abszolút . Meg kell adniuk a szélességet/magasságot.

• A flex 3 tulajdonság használatakor az értékek (flex-grow/flex-shrink/flex-basis) összevonhatók és rövidre írhatók, míg a szélességnél a növekedést vagy zsugorodást 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 rugalmas bázist. Csak akkor használja a szélességet, ha a rugalmas alap nem illeszkedik.

A rugalmas alap és a szélesség közötti különbség hiba vagy jellemző?

A flex elemen belüli tartalom kiterjeszti azt, és nem léphet túl rajta. Ha azonban a szélességet a szélesség vagy a max. Példa:

Flex elrendezési példák

A példákban a böngészők közötti kompatibilitás előtagjai sehol nem szerepelnek. Ezt azért tettem, hogy a css könnyebben olvasható legyen. Ezért példákért tekintse meg a Chrome vagy a Firefox legújabb verzióit.

#1 Egyszerű függőleges és vízszintes igazítási példa

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, a benne lévő blokk nélkül:

#1.2 Elválasztás (rés) a flex blokk elemek között

A tárolóelemek széleken történő elhelyezéséhez és az elem tetszőleges kiválasztásához, amely után rés lesz, a margin-left:auto vagy a margin-right:auto tulajdonságot kell használni.

#2 Érzékeny menü flexen

Készítsünk egy menüt az oldal legtetején. Széles képernyőn a jobb oldalon kell lennie. Átlagosan igazítsa középre. És egy kicsinél minden elemnek új sorban kell lennie.

#3 Reszponzí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 Érzékeny blokkok flexen

Tegyük fel, hogy 3 blokkot kell megjelenítenünk, egy nagyot és kettőt kicsiket. 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 a flexről és az átmenetről

Ez a példa azt mutatja be, hogy milyen gyorsan lehet csinos harmonikát készíteni képekkel flexen. Figyelje meg a flex átmeneti tulajdonságát.

#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égem van arra, hogy a kép felül legyen, a gomb mindig alul, és a szöveg középen, hogy egyetlen vízszintes sorban kezdődjön...

Ennek a problémának a megoldása érdekében magukat a blokkokat flexióval megfeszítik, és beállítják a lehető legnagyobb szélességet. Minden belső blokk egyben egy flex konstrukció is, a flex-direction:oszlop elforgatva; a középső elemet pedig (ahol a szöveg van) flex-grow:1 feszíti; hogy kitöltse az összes szabad helyet, így az eredmény megvan - 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 konstrukciókat. Néhányan még mindig előtagot igényelnek. A valós képhez vessünk egy pillantást a caniuse.com oldalra, és nézzük meg, hogy a manapság használt böngészők 96,3%-a előtag nélkül fog működni, 98,3%-a előtaggal. Ez nagyszerű mutató a flexbox merész 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 szükséges előtagokat:

/* 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.
Ebben a listában nincsenek (a caniuse szerint) mára felesleges előtagok, de általában több az előtag.

• (új) - új szintaxis: kijelző: flex; .
• (tweener) - régi, 2011-es nem hivatalos szintaxis: kijelző: flexbox; .
• (régi) - régi, 2009-es szintaxis: kijelző: doboz;

Videó

Nos, ne felejtsd el a videót, néha érdekes és érthető is. Íme néhány népszerű:

Hasznos Flex linkek

flexboxfroggy.com - flexbox tanulási játék.

A Flexplorer egy vizuális flex kódkonstruktor.

Arról, hogy milyen egyszerű a Flexbox használata egy híroldal sablonjának elrendezésének példáján.

Higgye el, nem kell belemennie a Flexbox-szal való munka minden részletébe, ha azonnal el akarja kezdeni használni. Ebben az oktatóanyagban a szerző bemutatja Önnek a Flexbox néhány funkcióját, és létrehoz egy „hírelrendezést”, amely hasonló ahhoz, amit a The Guardian webhelyén láthatott.

A szerző a Flexbox használatának oka, hogy számos lehetőséget kínál:
- adaptív oszlopok létrehozásának egyszerűsége;
- azonos magasságú oszlopok létrehozása;
- a tartalom a tartály aljára tolásának képessége.

Gyerünk!

1. Kezdje két oszlop létrehozásával

A Flexbox viszont leegyszerűsíti ezt a folyamatot számos előnnyel, mint például:

Tisztább kód írása: csak egy tárolót kell létrehoznunk egy szabállyal display:flex;
- rugalmasság: átméretezhetjük, nyújthatjuk és igazíthatjuk az oszlopokat a CSS pár soros változtatásával;
- szemantikai jelölés;
- ráadásul a Flexbox használatával nincs szükség a csomagolás megszakítására a kiszámíthatatlan elrendezési viselkedés elkerülése érdekében.

Kezdjük azzal, hogy hozzunk létre két oszlopot, egyet, amely a tárolónk szélességének 2/3-át, egyet pedig az 1/3-át.

Tartály oszlopok;
- két gyermek elem oszlop, amelyek közül az egyiknek van egy további osztálya fő-oszlop, amelyet később az oszlop szélesebbé tételére használunk.

Oszlopok ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Mert a fő-oszlop flexi értéke egyenlő 2 , akkor ez az oszlop kétszer annyi helyet foglal el, mint a második.

Adjunk hozzá némi látványtervet, és ennek eredményeként a következőket kapjuk:

Kattintson ide a működés közbeni megtekintéséhez

2. Készítsen minden oszlopot flexbox tárolóvá

Tehát a következő cikkekre van szükségünk:

Függőlegesen elrendezve egy konténeroszlopon belül;
- elfoglalta az összes rendelkezésre álló helyet.

szabály hajlítási irány: oszlop a tárolóhoz megadott, a szabállyal együtt flex: 1 Az utódelemhez megadott lehetővé teszi, hogy a cikk függőlegesen kitöltse az összes szabad helyet, miközben az első két oszlop magassága változatlan marad.

Kattintson ide a működés közbeni megtekintéséhez

3. Tartály készítése cikkből

cím;
- bekezdés;
- információs panel a szerző nevével és a hozzászólások számával;
- valami adaptív kép.

Itt a Flexbox segítségével toljuk az információs sávot az elem aljára. Itt nézzük meg, milyen eredményre számítunk.

És itt van maga a kód:

Az ingatlant is alkalmaztuk flex: 1 elemhez cikk-tartalom, ezáltal az összes szabad helyre nyújtja és megnyomja cikk Információ az aljára. Az oszlop magassága ebben az esetben nem számít.

Kattintson ide a működés közbeni megtekintéséhez

4. Több egymásba ágyazott oszlop hozzáadása

Beágyazott oszlop ( flex: 2; )
Ez az oszlop kétszer olyan széles lesz, mint a második.

Kattintson ide a működés közbeni megtekintéséhez

5. Az első cikk készítése vízszintes elrendezéssel

First-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( magasság: 300px; sorrend: 2; párnázás-top: 0; szélesség: 400 képpont ;)
Ingatlan rendelés ebben az esetben nagy szerepet játszik, mert lehetővé teszi a HTML elemek sorrendjének megváltoztatását a HTML jelölés megváltoztatása nélkül. A valóságban, cikk-kép a kódban az elem elé kerül cikk-törzs, de úgy viselkedik, mintha utána járna.

Kattintson ide a működés közbeni megtekintéséhez

6. Adaptív elrendezés készítése

A Flexbox egyik nagyszerű tulajdonsága, hogy egyszerűen eltávolíthatja a szabályt kijelző: flex a tárolóban annak teljes letiltása érdekében (Flexbox), míg a többi tulajdonságát (pl align-ites vagy Flex) továbbra is működőképes marad.

Ennek eredményeként aktiválhatjuk a reszponzív elrendezést, ha csak szükség esetén engedélyezzük a Flexboxot.

Tehát eltávolítjuk kijelző: flex válogatókból .oszlopokés .oszlop, ehelyett egy médialekérdezésbe "csomagolja" őket:

@média képernyő és (min-szélesség: 800 képpont) ( .columns, .column ( display: flex; ) )
Ez minden! A kis felbontású képernyőkön az összes cikk egymás felett, a 800 pixelnél nagyobb felbontású képernyőkön pedig két oszlopban található.

7. Az utolsó simítások hozzáadása

@media screen and (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( magasság: 300px) ; sorrend: 2; padding-top: 0; szélesség: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Az első cikk tartalma vízszintesen igazodik a bal oldalon lévő szöveghez és a jobb oldalon lévő képhez. Ezenkívül a fő oszlop szélesebb (75%). Ugyanez vonatkozik a beágyazott oszlopra (66%).

És itt a végeredmény!

Kattintson ide a működés közbeni megtekintéséhez

Következtetés

Arról, hogy milyen egyszerű a Flexbox használata egy híroldal sablonjának elrendezésének példáján.

Higgye el, nem kell belemennie a Flexbox-szal való munka minden részletébe, ha azonnal el akarja kezdeni használni. Ebben az oktatóanyagban a szerző bemutatja Önnek a Flexbox néhány funkcióját, és létrehoz egy „hírelrendezést”, amely hasonló ahhoz, amit a The Guardian webhelyén láthatott.

A szerző a Flexbox használatának oka, hogy számos lehetőséget kínál:
- adaptív oszlopok létrehozásának egyszerűsége;
- azonos magasságú oszlopok létrehozása;
- a tartalom a tartály aljára tolásának képessége.

Gyerünk!

1. Kezdje két oszlop létrehozásával

A Flexbox viszont leegyszerűsíti ezt a folyamatot számos előnnyel, mint például:

Tisztább kód írása: csak egy tárolót kell létrehoznunk egy szabállyal display:flex;
- rugalmasság: átméretezhetjük, nyújthatjuk és igazíthatjuk az oszlopokat a CSS pár soros változtatásával;
- szemantikai jelölés;
- ráadásul a Flexbox használatával nincs szükség a csomagolás megszakítására a kiszámíthatatlan elrendezési viselkedés elkerülése érdekében.

Kezdjük azzal, hogy hozzunk létre két oszlopot, egyet, amely a tárolónk szélességének 2/3-át, egyet pedig az 1/3-át.

Tartály oszlopok;
- két gyermek elem oszlop, amelyek közül az egyiknek van egy további osztálya fő-oszlop, amelyet később az oszlop szélesebbé tételére használunk.

Oszlopok ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Mert a fő-oszlop flexi értéke egyenlő 2 , akkor ez az oszlop kétszer annyi helyet foglal el, mint a második.

Adjunk hozzá némi látványtervet, és ennek eredményeként a következőket kapjuk:

Kattintson ide a működés közbeni megtekintéséhez

2. Készítsen minden oszlopot flexbox tárolóvá

Tehát a következő cikkekre van szükségünk:

Függőlegesen elrendezve egy konténeroszlopon belül;
- elfoglalta az összes rendelkezésre álló helyet.

szabály hajlítási irány: oszlop a tárolóhoz megadott, a szabállyal együtt flex: 1 Az utódelemhez megadott lehetővé teszi, hogy a cikk függőlegesen kitöltse az összes szabad helyet, miközben az első két oszlop magassága változatlan marad.

Kattintson ide a működés közbeni megtekintéséhez

3. Tartály készítése cikkből

cím;
- bekezdés;
- információs panel a szerző nevével és a hozzászólások számával;
- valami adaptív kép.

Itt a Flexbox segítségével toljuk az információs sávot az elem aljára. Itt nézzük meg, milyen eredményre számítunk.

És itt van maga a kód:

Az ingatlant is alkalmaztuk flex: 1 elemhez cikk-tartalom, ezáltal az összes szabad helyre nyújtja és megnyomja cikk Információ az aljára. Az oszlop magassága ebben az esetben nem számít.

Kattintson ide a működés közbeni megtekintéséhez

4. Több egymásba ágyazott oszlop hozzáadása

Beágyazott oszlop ( flex: 2; )
Ez az oszlop kétszer olyan széles lesz, mint a második.

Kattintson ide a működés közbeni megtekintéséhez

5. Az első cikk készítése vízszintes elrendezéssel

First-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( magasság: 300px; sorrend: 2; párnázás-top: 0; szélesség: 400 képpont ;)
Ingatlan rendelés ebben az esetben nagy szerepet játszik, mert lehetővé teszi a HTML elemek sorrendjének megváltoztatását a HTML jelölés megváltoztatása nélkül. A valóságban, cikk-kép a kódban az elem elé kerül cikk-törzs, de úgy viselkedik, mintha utána járna.

Kattintson ide a működés közbeni megtekintéséhez

6. Adaptív elrendezés készítése

A Flexbox egyik nagyszerű tulajdonsága, hogy egyszerűen eltávolíthatja a szabályt kijelző: flex a tárolóban annak teljes letiltása érdekében (Flexbox), míg a többi tulajdonságát (pl align-ites vagy Flex) továbbra is működőképes marad.

Ennek eredményeként aktiválhatjuk a reszponzív elrendezést, ha csak szükség esetén engedélyezzük a Flexboxot.

Tehát eltávolítjuk kijelző: flex válogatókból .oszlopokés .oszlop, ehelyett egy médialekérdezésbe "csomagolja" őket:

@média képernyő és (min-szélesség: 800 képpont) ( .columns, .column ( display: flex; ) )
Ez minden! A kis felbontású képernyőkön az összes cikk egymás felett, a 800 pixelnél nagyobb felbontású képernyőkön pedig két oszlopban található.

7. Az utolsó simítások hozzáadása

@media screen and (min-width: 1000px) ( .first-article ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( magasság: 300px) ; sorrend: 2; padding-top: 0; szélesség: 400px; ) .main-column ( flex: 3; ) .nested-column ( flex: 2; ) )
Az első cikk tartalma vízszintesen igazodik a bal oldalon lévő szöveghez és a jobb oldalon lévő képhez. Ezenkívül a fő oszlop szélesebb (75%). Ugyanez vonatkozik a beágyazott oszlopra (66%).

És itt a végeredmény!

Kattintson ide a működés közbeni megtekintéséhez

Következtetés

Szia habr!

Egy szép, semmi érdekeset nem sejtető estén chatünkhöz érkezett az általa 2012 tavaszán írt kiadvány szerzőjének javaslata, hogy írjunk egy remake cikket, de FlexBox segítségével, és egy hozzá tartozó magyarázatot, hogy mit és hogyan. művek. A kételyek bizonyos hányada után mégis győzött az érdeklődés a specifikáció mélyebb megértése iránt, és nyugodtan leültem, hogy éppen ezeket a példákat szedjem. Az e téren való elmélyülés során számos árnyalat kezdett kirajzolódni, ami több lett, mint az elrendezések átfordítása. Általánosságban elmondható, hogy ebben a cikkben a „CSS Flexible Box Layout Module” nevű csodálatos specifikációról szeretnék beszélni, és bemutatni néhány érdekes funkcióját és alkalmazási példáját. Minden érdeklődőt szeretettel hívok a habrakatra.

Amire szeretném felhívni a figyelmet, a FlexBoxon az elrendezés elrendezéséhez a fejlesztőnek némi adaptációra lesz szüksége. Saját példámon úgy éreztem, hogy a sok éves tapasztalat kegyetlen tréfát játszik. A FlexBox egy kicsit más elképzelést igényel az elemek áramlási elrendezéséről.

Műszaki rész

Így. A FlexBoxban két fő típusú cikk létezik: Flex Container és gyermekei, Flex Items. A tároló inicializálásához elegendő css-n keresztül hozzárendelni az elemet display:flex; vagy kijelző: inline-flex;. A különbség a flex és az inline-flex között csak a tárolót körülvevő elemekkel való interakció elvén van, mint pl. display: block; és kijelző: inline-block;, ill.

A hajlékony tartály belsejében két tengely jön létre, egy főtengely és egy merőleges vagy kereszttengely. A többnyire flexibilis elemek pontosan a főtengely mentén, majd a kereszttengely mentén sorakoznak. Alapértelmezés szerint a főtengely vízszintes és balról jobbra halad, míg a kereszttengely függőleges és fentről lefelé halad.

A tengelyek iránya a css tulajdonság segítségével szabályozható flexi irány. Ennek a tulajdonságnak számos értéke van:
sor(alapértelmezett): A hajlékony tároló főtengelyének tájolása megegyezik az aktuális sorirány mód belső tengelyével. A főtengely irányának kezdete (main-start) és vége (main-end) megfelel a belső tengely (inline-axis) kezdetének (inline-start) és végének (inline-end).
sor fordított: Minden ugyanaz, mint a sorban, csak a main-start és a main-end felcserélődik.
oszlop: ugyanaz, mint a sor, csak most a főtengely fentről lefelé irányul.
oszlop hátoldala: ugyanaz, mint a sor-fordítás, csak a főtengely alulról felfelé halad.
Hogyan működik, az a jsfiddle példában látható.

Alapértelmezés szerint a tárolóban lévő összes rugalmas elem elfér egy soron, még ha nem is fér el a tárolóban, túllépik a tároló határait. Ez a viselkedés a tulajdonság használatával váltható flex pakolás. Ennek a tulajdonságnak három állapota van:
nowrap(alapértelmezett): A rugalmas elemek balról jobbra sorakoznak.
betakar: flexibilis elemek többsoros módban épülnek fel, az átvitel a kereszttengely irányában, felülről lefelé történik.
wrap fordított: ugyanaz, mint a pakolás, de alulról felfelé burkol.
Lássunk egy példát.

A kényelem érdekében egy további ingatlan is rendelkezésre áll flex flow, amelyben egyidejűleg megadhatja flexi irányés flex pakolás. Ez így néz ki: flex-flow:

A tároló elemei egy tulajdonság segítségével igazíthatók indokolja-tartalom a főtengely mentén. Ez a tulajdonság akár öt különböző értéket is elfogad.
rugalmas indítás(alapértelmezett): A rugalmas elemek a főtengely origójához igazodnak.
hajlékony vég: Az elemek a főtengely végéhez igazodnak
központ: Az elemek a főtengely közepéhez igazodnak
közötti térköz: Az elemek elfoglalják a tartály teljes elérhető szélességét, a legkülső elemek szorosan illeszkednek a tartály széleihez, és a szabad hely egyenletesen oszlik el az elemek között.
tér körül: a hajlékony elemek úgy vannak igazítva, hogy a szabad hely egyenletesen oszlik el az elemek között. De érdemes megjegyezni, hogy a tartály széle és a szélső elemek közötti távolság fele akkora lesz, mint a sor közepén lévő elemek között.
Természetesen rákattinthat egy példára, hogyan működik ez a tulajdonság.

Ez még nem minden, lehetőségünk van elemeket a kereszttengely mentén elhelyezni. Az ingatlan alkalmazásával align-ites, amely szintén öt különböző értéket vesz fel, érdekes viselkedést érhet el. Ez a tulajdonság lehetővé teszi az elemek egymáshoz viszonyított egymáshoz igazítását.
rugalmas indítás: minden elem a sor elejére kerül
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 igazodnak a szöveg alapvonalához
nyújtózkodni(alapértelmezett): Az elemek ki vannak feszítve, hogy kitöltsék a teljes sort.

Egy másik, az előzőhöz hasonló tulajdonság az igazítsa a tartalmat. Egyedül ő felelős a teljes vonalak igazításáért a hajlékony tartályhoz képest. Ennek nincs hatása, ha a flex elemek ugyanazon a sorban vannak. Az ingatlan hat különböző értéket vesz fel.
rugalmas indítás: minden vonal a kereszttengely elejére van nyomva
hajlékony vég: minden vonal a kereszttengely végére van nyomva
központ: A csomagban lévő összes vonal a kereszttengely közepéhez igazodik
közötti térköz: a vonalak a felső széltől lefelé oszlanak el, szabad helyet hagyva a sorok között, míg a szélső vonalak a tartály széleihez nyomódnak.
tér körül: A vonalak egyenletesen oszlanak el a tartályban.
nyújtózkodni(alapértelmezett): A vonalak ki vannak feszítve, hogy kitöltsék a rendelkezésre álló helyet.
Ebben a példában kipróbálhatja, hogyan működnek az elemek és a tartalom igazítása. Ezt a két tulajdonságot konkrétan egy példán mutattam be, mivel ezek meglehetősen szoros kölcsönhatásban állnak egymással a feladatukat teljesítve. Figyelje meg, mi történik, ha az elemek egy sorba és több sorba kerülnek.

Kitaláltuk a flexibilis konténer paramétereit, maradt a rugalmas elemek tulajdonságaival foglalkozni.
Az első ingatlan, amellyel megismerkedünk az rendelés. Ez a tulajdonság lehetővé teszi egy adott elem pozíciójának megváltoztatását az adatfolyamban. Alapértelmezés szerint minden rugalmas elem rendelkezik sorrend: 0;és a természetes áramlás sorrendjében épülnek fel. A példában láthatja, hogy az elemek hogyan változtatnak helyet, ha különböző sorrendi értékeket alkalmaznak rájuk.

Az egyik fő tulajdonság az flex alapon. Ezzel a tulajdonsággal egy rugalmas elem alapszélességét tudjuk megadni. Az alapértelmezett érték auto. Ez az ingatlan szorosan kapcsolódik flex-growés rugalmas-zsugorodás, amiről kicsit később beszélek. Elfogadja a szélesség értékét px, %, em és egyéb mértékegységekben. Ez nem szigorúan a rugalmas elem szélessége, hanem egyfajta kiindulási pont. Amihez képest az elem megnyúlik vagy zsugorodik. Automatikus módban az elem alapszélességet kap a benne lévő tartalomhoz képest.

flex-grow több forráson teljesen helytelen leírást tartalmaz. Azt írja, hogy állítólag beállítja a tárolóban lévő elemek méretarányát. Valójában nem. Ez a tulajdonság egy tényezőt határoz meg az elem növelésére, ha van szabad hely a tárolóban. Ennek a tulajdonságnak az alapértelmezett értéke 0. Tegyük fel, hogy van egy 500 képpont széles rugalmas tárolónk, amelyben két rugalmas elem található, mindegyik alapszélessége 100 képpont. Ez további 300 képpont szabad helyet hagy a tárolóban. Ha az első elem flex-grow értéket kap: 2; és a második elem flex-grow: 1;. Ennek eredményeként ezek a blokkok a tároló teljes elérhető szélességét elfoglalják, csak az első blokk szélessége lesz 300 képpont, a másodiké pedig csak 200 képpont. Mi történt? Az történt ugyanis, hogy a konténerben rendelkezésre álló 300px szabad területet 2:1 arányban osztották el az elemek között, +200px az elsőhöz és +100px a másodikhoz. Valójában ez így működik.

Itt simán átmegyünk egy másik hasonló ingatlanra, mégpedig rugalmas-zsugorodás. Az alapértelmezett érték 1. Beállítja az elemek szélességének változtatási tényezőjét is, csak az ellenkező irányba. Ha a tartály széles Kevésbé mint az elemek alapszélességeinek összege, akkor ez a tulajdonság érvényesül. Például a tároló szélessége 600 képpont, a rugalmas alapú elemek pedig egyenként 300 képpontosak. Adja meg az első elem flex-shrink: 2; és a második elem flex-shrink: 1;. Most csökkentsük a tárolót 300 képponttal. Ezért az elemek szélességének összege 300 képponttal nagyobb, mint a tárolóé. Ez a különbség 2:1 arányban oszlik el, kiderül, hogy az első blokkból 200 képpontot, a másodikból 100 képpontot vonunk le. Az új elemméret 100 képpont az első és a második elemnél 200 képpont. Ha a flex-shrink értéket 0-ra állítjuk, akkor megakadályozzuk, hogy az elem az alapszélességénél kisebbre zsugorodik.

Valójában ez egy nagyon leegyszerűsített leírása annak működésének, hogy az általános elv egyértelmű legyen. Részletesebben, ha valakit érdekel, az algoritmus leírása a specifikációban van.

Mindhárom tulajdonság felírható rövidített formában a kifejezés használatával Flex. Ez így néz ki:
Flex: ;
És még két rövidített változatot is írhatunk, flex: auto;és flex: nincs, ami azt jelenti flex: 1 1 auto;és flex: 0 0 auto; illetőleg.

A flex elemek utolsó tulajdonsága az igazod-ön. Itt minden egyszerű, ez ugyanaz, mint a tároló elemeinek igazítása, lehetővé téve egy adott elem igazításának felülbírálását.

Minden fáradt! Jöjjenek a példák!

Kezdésként jelöljük ki az oldal fő szélességét, igazítsuk középre, nyomjuk a láblécet az oldal aljára. Mint általában mindig.

Html ( háttér: #ccc; min-magasság: 100%; betűcsalád: sans-serif; kijelző: -webkit-flex; kijelző: flex; flex-direction: oszlop ; kijelző: -webkit-flex; kijelző: flex; hajlítási irány: oszlop; hajlítás: automatikus; ) .header (szélesség: 100%; maximális szélesség: 960 képpont; minimális szélesség: 430 képpont; margó: 0 automatikus 30 képpont; kitöltés : 30px 0 10px; display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: space-beween; box-sizing: border-box; ) .main (szélesség: 100%; max-width .footer (háttér: #222; szélesség: 100%; maximális szélesség: 960px; minimális szélesség: 430px; szín: #eee; margó: automatikus; kitöltés: 15px; doboz mérete: keretes doboz; )

Annak a ténynek köszönhetően, hogy flex-grow-t adtunk meg a .main számára: 1; a teljes elérhető magasságig nyúlik, ezáltal a láblécet az aljára nyomja. A bónusz ennél a megoldásnál az, hogy a lábléc lehet nem rögzített magasságú.

Most helyezzük el a logót és a menüt a fejlécben.
.logo ( font-size: 0; margó: -10px 10px 10px 0; display: flex; flex: none; align-items: center; ) .logo:before, .logo:after ( tartalom: ""; megjelenítés: blokk ; ) .logo:before ( háttér: #222; szélesség: 50px; magasság: 50px; margó: 0 10px 0 20px; szegélysugár: 50%; ) .logo:after ( háttér: #222; szélesség: 90px; magasság : 30px; ) .nav ( margó: -5px 0 0 -5px; kijelző: -webkit-flex; kijelző: flex; flex-wrap: wrap; ) .nav-itm ( háttér: #222; szélesség: 130px; magasság: 50 képpont; betűméret: 1,5 rem; szín: #eee; szövegdekoráció: nincs; margó: 5px 0 0 5px; kijelző: -webkit-flex; kijelző: flex; tartalom igazítása: középen; elemek igazítása: középre; )

Mivel a fejléc flex-wrap-ra van állítva: wrap; és indokolja-tartalom: space-beween; a logó és a menü a fejléc különböző oldalain elszórtan található, és ha nincs elég hely a menünek, elegánsan eltolódik a logó alá.

Ezután egy nagy posztot vagy bannert látunk, nehéz megmondani, hogy konkrétan mi, de nem is ez a lényeg. A jobb oldalon egy kép, a bal oldalon egy cím látható. Én személy szerint ragaszkodom ahhoz az elképzeléshez, hogy minden elemnek a lehető legrugalmasabbnak kell lennie, függetlenül attól, hogy adaptív elrendezésről vagy statikusról van szó. Tehát ebben a bejegyzésben van egy oldalsáv, amibe a kép kerül, szigorúan véve nem tudjuk megmondani, hogy pontosan mekkora szélességre van szükségünk, mert ma van egy nagy képünk, holnap egy kicsi, és minden alkalommal nem szívesen csináljuk újra az elemet. a semmiből. Tehát szükségünk van az oldalsávra, hogy a szükséges helyet foglalja el, a többi hely pedig a tartalomhoz kerül. Csináljuk:

Box ( betűméret: 1,25 rem; sormagasság: 1,5; betűstílus: dőlt; margó: 0 0 40 képpont -50 képpont; kijelző: -webkit-flex; kijelző: flex; flex-wrap: wrap; indokolás tartalom: center; ) .box-base ( margó-bal: 50px; flex: 1 0 430px; ) .box-side ( margin-bal: 50px; flex: none; ) .box-img ( max-width: 100%; magasság : automata ;)

Mint látható a .box-base-nél, ahol a cím és a szöveg van, az alap szélességét a következővel adtam meg: rugalmas alapú: 430 képpont, és megtiltotta a blokk zsugorítását is rugalmas-zsugorodás: 0;. Ezzel a manipulációval azt mondtuk, hogy a tartalom nem lehet 430 képpontnál kisebb. És tekintettel arra, hogy a .boxhoz megadom flex-wrap: pakolás; abban a pillanatban, amikor az oldalsáv és a tartalom nem kerül a container.boxba, az oldalsáv automatikusan a tartalom alá kerül. És mindezt használat nélkül @ média! Szerintem nagyon klassz.

Maradunk a három oszlopos tartalommal. Erre a problémára több megoldás is létezik, ezek közül az egyiket megmutatom, a többi elrendezésben van még egy lehetőség.
Hozzunk létre egy tárolót, nevezzük el .content-nek és állítsuk be.
.content ( margin-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: wrap; )

A tárolónak három oszlopa van: .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( margó: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margó: 0 0 30px 30px; flex: 1 1 200px;)

Az oszlopokat 200px alapszélességre állítottam, hogy ne szűküljenek túl az oszlopok, jobb, ha szükség szerint egymás alá kerülnek.

Az elrendezésnek megfelelően a tartalom mellett nem nélkülözhetjük a @ mediat, ezért az oszlopok viselkedését még egy kicsit a szélességhez igazítjuk<800px и <600px.
@média képernyő és (max. szélesség: 800 képpont) ( .bannerek ( margó balra: -30 képpont; kijelző: -webkit-flex; kijelző: flex; flex-alap: 100%; ) .posts ( margó bal: 0; ) ) @média képernyő és (max. szélesség: 600px) ( .content ( display: block; ) .banners ( margó: 0; display: block; ) .comments ( margó: 0; ) )

Ez minden varázslat a FlexBox elrendezés elkészítésében. Egy másik feladat, ami tetszett az 5. elrendezésben van, konkrétan a tartalom adaptációjára vonatkozik.

Látjuk, hogyan épülnek be az asztali felbontású bejegyzések egy három egymás utáni rácsba. Ha a nézetablak szélessége kisebb, mint 800 képpont, a rács bejegyzéseket tartalmazó oszlopmá alakul, ahol a bejegyzés képe felváltva sorakozik a bejegyzés tartalmának bal és jobb oldalán. Ha pedig a szélesség kisebb, mint 600 képpont, akkor a bejegyzés fotója teljesen el van rejtve.
.grid ( display: -webkit-flex; megjelenítés: flex; flex-wrap: wrap; justify-content: space-beween; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px * 2/3); kijelző: -webkit-flex; kijelző: flex; flex-wrap: wrap; ) .grid-img ( margó: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; ) .grid-title ( text-align: center; ) @media screen and (max-width: 800px) ( .grid-itm ( flex-wrap: nowrap; flex-basis: 100%; ) . grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child(páros) .grid-img ( margó: 0 0 0 30px; sorrend: 2; ) .grid-itm:nth-child(páratlan) .grid-img ( margó: 0 30 képpont 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( szöveg igazítása: balra; ) ) @média képernyő és (max. szélesség: 600 képpont) ( .grid-img ( kijelző: nincs; ) )

Valójában ez csak egy kis része annak, ami a FlexBoxon megvalósítható. A specifikáció lehetővé teszi, hogy nagyon összetett oldalelrendezéseket készítsen egyszerű kód használata mellett.

Tartalom:

Flexbox egy új módszer a blokkok elrendezésére egy oldalon. Ez egy olyan technológia, amelyet kifejezetten az elemek elrendezésére hoztak létre, ellentétben az úszókkal. Használva Flexbox könnyedén igazíthatja az elemeket vízszintesen és függőlegesen, megváltoztathatja az elemek irányát és megjelenítési sorrendjét, a blokkokat a szülő teljes magasságába feszítheti, vagy az alsó szélére szögezheti.

UPD 2017.02.02-től: készített egy praktikus flexbox cheatsheet élő demókat és leírásokat a specifikációból: Flexbox cheatsheet .

A példák csak az új szintaxist használják. Az írás idején ezek a leghelyesebben jelennek meg Króm. Firefoxban részben, Safariban egyáltalán nem.

A caniuse.com szerint Flexbox az IE 8 és 9, valamint az Opera Mini nem támogatja, és más böngészők nem támogatják az összes tulajdonságot és/vagy előtagokat igényelnek.

Ez azt jelenti, hogy a technológia jelenleg nem használható széles körben, de itt az ideje, hogy jobban megismerjük.

Először is tudnia kell, hogy a flex elemek a tengelyek mentén vannak elrendezve. Alapértelmezés szerint az elemek vízszintesen vannak elrendezve - mentén főtengely- a főtengely.

Használatakor ne feledje azt is Flexbox float , tiszta és függőleges igazítás nem működik a belső blokkoknál, valamint a szövegben oszlopokat beállító tulajdonságoknál.

Készítsünk egy teszthelyet a kísérletekhez:

Egy szülőblokk (sárga) és 5 gyerek.

Kijelző: flex

És most a szülőelemhez adjuk hozzá a displayt: flex; . A belső divek sorakoznak (a főtengely mentén) azonos magasságú oszlopokkal, tartalomtól függetlenül.

display:flex; minden gyermekelemet fluid - flex -re tesz, és nem inline vagy block, mint eredetileg.

Ha a szülőblokk tördelése nélkül képeket vagy szöveget tartalmaz, névtelen rugalmas elemekké válnak.

megjelenítési tulajdonság a számára Flexbox két értéket vehet fel:

flex - blokk elemként viselkedik. A blokkok szélességének számításakor az elrendezés élvez prioritást (ha a blokkok szélessége nem elegendő, előfordulhat, hogy a tartalom kimászik a szegélyekből).

inline-flex – úgy viselkedik, mint az inline-block. A tartalom prioritása (a tartalom a blokkokat a kívánt szélességre terjeszti, hogy a vonalak lehetőleg illeszkedjenek).

Flex irány

A blokkok elrendezésének irányát a flex-direction tulajdonság szabályozza.

Lehetséges értékek:

sor - sor (alapértelmezett érték); row-reverse - sor az elemekkel fordított sorrendben; oszlop - oszlop; oszlop-fordított - oszlop az elemek fordított sorrendben.

sor és sor-fordítás

oszlop és oszlop-fordítás

Flex-csomagolás

Egy sor több blokkot tartalmazhat. Azt, hogy burkolnak-e vagy sem, a flex-wrap tulajdonság határozza meg.

Lehetséges értékek:

nowrap - a blokkok nincsenek becsomagolva (alapértelmezett érték); pakolás - a blokkokat becsomagolják; wrap-reverse - a blokkokat becsomagolják és fordított sorrendben helyezik el.

A flex-direction és flex-wrap tulajdonságok lerövidítésére létezik egy tulajdonság: flex-flow .

Lehetséges értékek: beállíthatja mindkét tulajdonságot, vagy csak az egyiket. Például:

flex-flow: oszlop; flex-flow: wrap-reverse; flex-flow: oszlop-visszatekerés;

Sor-fordítás-fordítás bemutatója:

rendelés

Az order tulajdonság a blokkok sorrendjének szabályozására szolgál.

Lehetséges értékek: számok. Ha először blokkot szeretne tenni, adjon sorrendet: -1:

indokolja-tartalom

Számos tulajdonság van az elemek igazításához: justify-content , align-items és align-self .

Az igazítási tartalom és az igazítási elemek a szülőtárolóra, az igazítás a gyermekekre vonatkoznak.

a justify-content felelős a főtengely beállításáért.

Az indokoló tartalom lehetséges értékei:

flex-start - az elemek a főtengely elejétől igazodnak (alapértelmezett érték); flex-end - az elemek a főtengely végétől igazodnak; központ - az elemek a fő tengely közepéhez igazodnak; közötti tér - az elemek a fő tengely mentén vannak elrendezve, elosztva a szabad helyet egymás között; tér körül - az elemek a fő tengely mentén vannak elrendezve, szabad teret osztva el körülöttük.

flex-start és flex-end

tér-között, tér-körül

Elemek igazítása

Az align-items felelős a merőleges tengely mentén történő igazításért.

Az igazítási elemek lehetséges értékei:

flex-start - az elemek a merőleges tengely elejétől igazodnak; flex-end - az elemek a merőleges tengely végétől igazodnak; központ - az elemek középre vannak állítva; alapvonal - az elemek az alapvonal mentén vannak igazítva; nyújtás – az elemek úgy vannak megfeszítve, hogy a merőleges tengely mentén elfoglalják a teljes helyet (alapértelmezett érték).

flex-start , flex-end

alapvonal, nyújtás

Igazítás-ön

Az align-self a merőleges tengely mentén történő igazításért is felelős, de az egyes rugalmas elemekre van beállítva.

Az önigazítás lehetséges értékei:

auto az alapértelmezett érték. Azt jelzi, hogy az elem a szülőelem igazítási elemeit használja; flex-start - az elem a merőleges tengely elejétől igazodik; flex-end - az elem a merőleges tengely végétől igazodik; center - az elem középre van állítva; alapvonal - az elem az alapvonalhoz igazodik; nyújtás - az elem meg van nyújtva, és magasságban elfoglalja az összes helyet.

Align-tartalom

A többsoros rugalmas tárolón belüli igazítás szabályozásához létezik az align-content tulajdonság.

Lehetséges értékek:

flex-start - az elemek a főtengely elejétől igazodnak; flex-end - az elemek a főtengely végétől igazodnak; központ - az elemek a fő tengely közepéhez igazodnak; közötti tér - az elemek a fő tengely mentén vannak elrendezve, elosztva a szabad helyet egymás között; tér körül - az elemek a fő tengely mentén vannak elrendezve, szabad teret osztva el körülöttük; nyújtás – az elemek ki vannak feszítve, hogy kitöltsék a teljes magasságot (alapértelmezett érték).

flex-start , flex-end

center , stretch

tér-között, tér-körül

PS: Néhány dolog, amit soha nem sikerült működés közben látni, például a vonal flex-flow: oszlop tördelése vagy ugyanazon flex-direction teljes rekordja: oszlop; flex-wrap: pakolás; .

Az elemek egymásra vannak rakva, de nincsenek becsomagolva:

A tekercs nem működik flexi irányban: oszlop; , bár specifikációban így néz ki:

Szerintem idővel működni fog.

UPD 2014.06.21-től: Minden működik, ha magasságot adsz a blokknak. Köszönöm a borravalót