A Flexbox azt ígéri, hogy megment minket a sima CSS bajaitól (például a függőleges igazítás).
Nos, a Flexbox valóban teljesíti ezt a célt. De új mentális modelljének elsajátítása kihívást jelenthet.
Vessünk egy animációs pillantást a Flexbox működésére, így jobb elrendezések készítésére használhatjuk fel.
A Flexbox alapelve az, hogy az elrendezéseket rugalmasá és intuitívabbá tegye.
Ennek elérése érdekében a konténerek maguk dönthetik el, hogyan osztják el egyenletesen gyermekeiket - beleértve a méretüket és a köztük lévő helyet.
Ez mind elvileg jól hangzik. De nézzük meg, hogy néz ki a gyakorlatban.
Ebben a cikkben az 5 leggyakoribb Flexbox tulajdonságba merülünk. Felfedezzük, hogy mit csinálnak, hogyan használhatja fel őket, és hogy valójában hogyan fognak kinézni az eredményeik.
1. tulajdonság: Kijelző: Flex
Íme a példa weboldalunk:
Négy színes, különféle méretű div van, egy szürke tartályban. Mostantól minden div alapértelmezett display: block. Minden négyzet tehát teljes vonalát lefedi.
Annak érdekében, hogy megkezdte flexbox meg kell tenni a tartályba egy flex tartályba . Ez olyan egyszerű, mint:
#container { display: flex;}
Nem sok minden változott - a diveid most inline-ban jelennek meg, de ennyi. De a kulisszák mögött valami hatalmasat tettél. A négyzeteinek olyat adott, amelyet flex kontextusnak neveztek .
Most már elkezdheti őket abban a kontextusban elhelyezni, sokkal kevesebb nehézséggel, mint a hagyományos CSS.
2. tulajdonság: Flex irány
A Flexbox konténernek két tengelye van: egy fő és egy kereszttengely , amelyek alapértelmezés szerint így néznek ki:
Alapértelmezés szerint az elemek a fő tengely mentén vannak elrendezve, balról jobbra . Ez az oka annak, hogy a négyzetek alapértelmezés szerint vízszintes vonalra álltak, miután alkalmazta display: flex.
Flex-directionazonban forgassuk el a fő tengelyt.
#container { display: flex; flex-direction: column;}
Fontos különbséget tenni itt: flex-direction: columnnem igazítja a négyzeteket a kereszttengelyre a fő tengely helyett. Maga a fő tengely vízszintesből függőlegesbe megy.
Van még néhány más lehetőség a hajlítási irányhoz: sor-hátramenet és oszlop-hátramenet.
3. tulajdonság: Indokolja a tartalmat
A Justify-content szabályozza, hogy az elemeket hogyan igazítsa a fő tengelyhez.
Itt egy kicsit mélyebbre merül a fő / kereszt tengely megkülönböztetésben. Először térjünk vissza a flex-direction: sorra.
#container { display: flex; flex-direction: row; justify-content: flex-start;}Öt parancs áll rendelkezésére az igazoló tartalom használatához :
- Flex-start
- Flex-end
- Központ
- Szóköz
- Kör körül
A tér körül és a térköz a legkevésbé intuitív. A köztes tér egyenlő teret ad az egyes négyzetek között, de nem azok és a tartály között.
A Kör körüli tér egyenlő párnát helyez a négyzet mindkét oldalára - ez azt jelenti, hogy a legkülső négyzetek és a tartály közötti tér fele akkora, mint a két négyzet közötti tér (mindegyik négyzet nem átfedő egyenlő mennyiségű margóval jár, így megduplázva a teret).
Utolsó megjegyzés: ne felejtsük el, hogy az igazolás-tartalom a fő tengely mentén működik , és a hajlítási irány váltja meg a fő tengelyt . Ez fontos lesz, amikor átköltözik ide:
4. tulajdonság: Tételek igazítása
Ha 'kap' justify-content-et, akkor az align-items szellő lesz.
Mivel az igazoló tartalom a fő tengely mentén működik, az igazítási elemek a kereszttengelyre vonatkoznak.
Állítsuk vissza a hajlítási irányunkat sorra, így tengelyeink ugyanúgy néznek ki, mint a fenti kép.
Ezután merüljünk el az align-items parancsokban.
- flex-start
- flex-end
- központ
- nyújtás
- alapvonal
Az első három pontosan megegyezik az igazol-tartalommal , tehát itt semmi túl divatos.
A következő kettő azonban kicsit más.
Van olyan szakaszod, amelyben az elemek a kereszttengely és az alapvonal teljes egészét felveszik, amelyben a bekezdések címkéinek alja igazodik.
(Ne feledje, hogy align-items: stretcha négyzetek magasságát automatikusnak kellett beállítanom. Ellenkező esetben a magasság tulajdonság felülírja a szakaszt.
Alapvonallal vegye figyelembe, hogy ha eltávolítja a bekezdéscímkéket, akkor ez a négyzetek alját igazítja, például:
A fő- és kereszttengely jobb bemutatásához egyesítsük az igazolás-tartalom és az igazítás-elemeket, és nézzük meg, hogy a középpontosítás hogyan változik a két flex irányú parancsnál:
Sorral a négyzetek egy vízszintes főtengely mentén kerülnek felállításra. Oszlopokkal függőleges főtengely mentén esnek.
Még akkor is, ha a négyzetek mindkét esetben függőlegesen és vízszintesen egyaránt középre vannak helyezve, a kettő nem cserélhető fel egymással!
5. tulajdonság: Önmag igazítása
Az Align-self lehetővé teszi egy adott elem igazításának manuális manipulálását.
Alapvetően felülírja az egy négyzethez tartozó igazító elemeket . Minden tulajdonság ugyanaz, bár alapértelmezés szerint automatikus , amelyben a tároló igazítási elemeit követi .
#container { align-items: flex-start;}.square#one { align-self: center;}// Only this square will be centered.Nézzük meg, hogy néz ki ez. Két négyzetre alkalmazza az align-self alkalmazást , a többire pedig align-items: centerés flex-direction: row.
Következtetés
Annak ellenére, hogy éppen megkarcoltuk a Flexbox felületét, ezeknek a parancsoknak elegendőnek kell lenniük ahhoz, hogy kezelni tudja a legtöbb alapvető igazítást - és függőlegesen igazodjon a szíve tartalmához.
Ha további GIF Flexbox oktatóanyagokat szeretne látni, vagy ha ez az oktatóanyag hasznos volt, nyomja meg az alábbi zöld szívet, vagy hagyjon megjegyzést.
Köszönöm, hogy elolvasta!