Flexbox a CSS-ben és HTML-ben (Útmutató) - reszponzív elrendezések kialakítása

Ezt várhatod a CSS és HTML Flexbox tanfolyamon.

Mi is az a Flexbox-elrendezés és miért érdemes egyáltalán használni?

Itt lesz létrehozva a projekt, amelyben később tovább dolgoznak.

Itt mutatom be a példastruktúrát és a VS Code-ban integrált hibakeresési lehetőségeket a MS Edge-eszközökkel. Ebben a videóban először aktiváljuk a Flexbox elrendezést és beállítjuk az irányt.

Hogyan lehet egyenletesen vagy meghatározott arányokban elosztani a teret a Flexbox elrendezésben?

Egy kis gyakorlat, ahol egy kis (egyszerű) matematika elkerülhetetlen.

Itt egy vízszintes elrendezést mutatok be két oldalsávval, amely reszponzívan igazodik az ablak szélességéhez.

A gyermek elemek a flex container mentén az inline-tengely mentén igazíthatók. Itt mutatom, hogyan lehet ezt beállítani.

Nem csak a konténernél lehet beállítani az összes gyermek elem igazítását, a align-self segítségével az egyes elemekeknél is más módon szabályozható.

Egy kis gyakorlat az egyéni igazításhoz egy kockával.

Nemcsak a kereszt-tengely mentén lehet igazítani egy flex-containerben, hanem a fő-tengely mentén is lehet néhány dolgot igazítani az elrendezésben. ;-)

Egy kis példa arra, hogyan lehet nagyon jól használni a fő tengely menti igazítást egy gyakori elrendezéshez.

Annak érdekében, hogy valaki rugalmas maradjon, képesnek kell lennie a kislelemek méretének megadására a konkrét szélesség vagy magasság függetlenül. Szerencsére van a flex-basis- CSS tulajdonság, amely lehetővé teszi ezt pontosan. Ha megváltoztatjuk a flex-direction-t, egy szélességből magasság lesz, és fordítva. 

Mennyivel kell egy elemnek nőnie, ha több hely áll rendelkezésre, mint amennyit a flex-basis megad? Ezt a flex-grow segítségével lehet célzottan beállítani.

Elem milyen mértékben zsugorodjon, ha kevesebb hely áll rendelkezésre, mint amennyit a flex-basis megad? Ezt lehet irányítottan beállítani a flex-shrink segítségével.

A gyerek elemek nemcsak összehúzódhatnak, ha kevés a hely, hanem szét is törhetnek a konténerben. Hogyan tudod ezt vezérelni a flex-wrap segítségével, azt ebben a videóban megmutatom.

flex-direction és flex-wrap kombinálható az flex-flow tulajdonságban. Ez még akkor is értelmes, ha csak flex-direction van beállítva, mivel az flex-flow rövidebb. ;-)

Egy feladat a flex-wrap-ról.

Néha szükség van távolságra, hogy ne legyen feleslegesen kényelmetlen az emberi szemnek. Szerencsére a gap CSS tulajdonsággal pontosan ezt tudod elérni a Flex-Container gyermek elemeinél.

Rend a lelked, különösen a webes felületeknél, mert ezeknek jól kezelhetőknek kell lenniük. Az sorrendet néha egyénileg is meg kell határozni, anélkül hogy az elemeket áthelyezné a DOM-ban. Ehhez nagyon jól használható a rendezés CSS tulajdonság, amellyel egyszerűen megváltoztathatja az elemek látható sorrendjét.

Teszteljük, hogy értettétek-e a sorrendet. Itt még egy második lehetőség is van ugyanazzal az eredménnyel, de biztos vagyok benne, hogy ezt is kitaláljátok.

Sokszor előfordul, hogy az elemeket és különösen a szöveget vízszintesen és függőlegesen középre szeretnénk igazítani (!). Ami régen felülmúlhatatlan volt, az most a Flexbox segítségével gyerekjáték.

Ki ne ismerné, a 3 oszlopos elrendezést? Ha ez még a rendelkezésre álló helyhez igazodik, nincs sok hátra a reszponzív tervezésig.

Vannak weboldalak, amelyek nem tartalmaznak űrlapokat? Ha igen, akkor nem sok van belőlük. Ezért nagyon fontos, hogy ezeket vonzóan rendezzük el, szerencsére a Flexbox segítségével ez nem jelent problémát.

Nagyon gyakran találkozhatunk egymásba ágyazott elrendezésekkel, de a Rugalmas elrendezés használatával ezek sem jelentenek nagy kihívást.

Közben oly sok web chat kliens van, mint a homokban, és a KI chatbotok csak még továbbiak hozzáadása. De hogyan lehet létrehozni egy chat-et Flexbox-szal? Ezt bemutatom ebben a videóban.

Legkésőbb a Web 2.0-as éra óta szinte minden webhelyen található egy galéria. Ebben a videóban leírom, hogyan lehet ilyen elrendezést például csodálatosan megvalósítani Flexbox segítségével.

Mindennek tisztának kell lennie most, ami a flex elrendezést illeti. Végül leírom, mit kellene megtanulnotok, mit tehettek még, és hogy milyen szép CSS elrendezési lehetőségek vannak még.