A Flexbox egy hatékony elrendezési modul a CSS-ben , amely lehetővé teszi rugalmas és reszponzív elrendezések létrehozását. Ebben a bemutatóban a flex-basis tulajdonságra fogunk összpontosítani, amely egy elem alapméretének meghatározásáért felelős a flex irányában. Lényeges, hogy a flex konténer konkrét méreteitől függetlenül meg kell adni a gyermekelemek méretét. A flex-basis helyes használatával jelentősen leegyszerűsítheti és optimalizálhatja az elrendezés tervezését.
A legfontosabb megállapítások
- A flex-basis meghatározza egy elem kezdeti méretét a flex konténer irányában.
- Alapértelmezés szerint a flex-basis értéke 0%, ami azt jelenti, hogy az elem csak a tartalom által igényelt helyet foglalja el.
- A flex-grow és flex-shrink értékekkel az elem a rendelkezésre álló hely függvényében módosíthatja méretét.
- A flex iránya befolyásolja az alapméret értelmezését.
Lépésről-lépésre történő utasítások
Először nézzük meg, hogyan működik a flex-base egy flex elrendezésben. Kezdjük egy egyszerű példával. Győződjön meg róla, hogy létrehozott egy flex konténert elemekkel.
Először definiálja a flex konténert. Példánkban a konténerünkön a display: flex és a flex-direction: row értékeket állítottuk be. Ez lehetővé teszi, hogy a gyermekelemek vízszintesen egymás mellé rendeződjenek.
A következő lépés, hogy kijelölünk egy elemet a konténeren belül, és alkalmazzuk a flex tulajdonságot. Itt a flex: 1 tulajdonságot használjuk, ami a flex-grow, flex-shrink és flex-base tulajdonságok kombinációja. Nézzük meg az egyes elemeket.
A flex: 1 használatával az elem flex-méretű lesz, az alapértelmezett alapméret 0%-ra van beállítva. Ez azt jelenti, hogy csak a tartalom által igényelt helyet foglalja el.
Most nézzük meg közelebbről a flex-basis tulajdonságot. Ezt közvetlenül is megadhatjuk, például úgy, hogy elkezdjük megváltoztatni flex-ről flex-basis: 100px-re. Ezzel az elem kezdeti szélességét 100 pixelre állítjuk be.
Mentse el a módosításokat, és látni fogja, hogy a fő elem most már 100 pixel széles. Ez a 100 pixel az alapszélesség, amelyből a böngésző elrendezése kiindul.
Ez azt jelenti, hogy az elem nagyobb helyet foglalhat el, ha a flex-grow nagyobb helyet biztosít neki, vagy kevesebbet, ha a flex-shrink aktiválva van.
Alternatívaként százalékos értékeket is megadhat. Módosítsa az értéket flex-basis: 100%-ra, ami azt jelenti, hogy az elemnek a konténerben rendelkezésre álló teljes helyet ki kell foglalnia.
Ha most a flex-basis értékét 0-ra állítja, akkor látni fogja, hogy az elem a tartalom által megadott szélességre esik össze. Fontos megjegyezni, hogy a 0 nem azt jelenti, hogy az elemnek nincs szélessége, ez csak a minimális tartalom alapján történik.
A flex-basis általánosan használt értéke az auto. Ha ezt az értéket állítja be, az elrendezés nagyon rugalmas lesz, mivel a szélesség a tartalomtól függően változik. Ellenőrizze ezt a szélesség explicit beállításával, mondjuk 200px-re, és nézze meg, hogy az elem 200 pixelt foglal el.
A flex irányát is megváltoztathatja. Állítsa a flex-irányt oszlopra. Ez megváltoztatja az alapméret értelmezésének módját - mostantól az alapméret függőleges irányban érvényesül.
Ha most megváltoztatja a flex-alapot, akkor ezért az elem magasságát is módosítania kell. Ha a flex-bázis értékét 100 pixelre állítja, akkor az elem 100 pixel magas lesz, és rugalmasan méretezhet a tartalomtól függően.
Ezt azért fontos megérteni, mert míg a szélesség és a magasság statikus, addig a flex-bázis a flex-iránynak megfelelően változik. Ez teszi a flexboxot sokkal rugalmasabbá a hagyományos elrendezési módszerekhez képest.
Emellett a következő lépés a flex-grow és a flex-shrink jelentésének magyarázata a flex-basis-szal együtt. Ezek az értékek határozzák meg, hogy az elem mekkora helyet foglaljon el a konténerben, annak méretétől és a rendelkezésre álló erőforrásoktól függően.
Összefoglaló
Ebben az útmutatóban megismerte a flex-basis tulajdonság alapjait. Most már tudja, hogyan használhatja ezt a tulajdonságot egy elem alapméretének meghatározására, és hogyan befolyásolja a flex-irány az elrendezés megjelenítését. Ezzel a tudással készen áll arra, hogy olyan fejlett flexbox elrendezéseket hozzon létre, amelyek rugalmasan alkalmazkodnak a különböző képernyőméretekhez és tartalmakhoz.
Gyakran ismételt kérdések
Mi az a flex-base? Aflex-base határozza meg a flex elem kezdeti méretét a főtengelyen.
Hogyan működik a flex-grow?flex-grow meghatározza, hogy egy elem mekkora helyet foglal el a többi flex elemhez képest, ha van szabad hely.
Mi történik, ha a flex-base értékét nullára állítom?Ha a flex-base értékét nullára állítod, az elem szélessége a minimális tartalmi szélességre csökken.
Használhatok százalékos értéket is a flex-bázishoz?Igen, a flex-bázist százalékos értékként is megadhatja, hogy meghatározza, hogy az elemnek mekkora helyet kell elfoglalnia a konténerhez képest.
Hogyan befolyásolja a flex-irány a flex-bázist?A flex-irány határozza meg, hogy a flex-bázis hogyan értelmeződik, akár az elem szélességéhez, akár magasságához viszonyítva.
