A Flexbox működése - nagy, színes, animált gifekkel magyarázva

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 :

  1. Flex-start
  2. Flex-end
  3. Központ
  4. Szóköz
  5. 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.

  1. flex-start
  2. flex-end
  3. központ
  4. nyújtás
  5. 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!