Minden, ami a flexbox tulajdonságait tartalmazza

A Flexbox tulajdonságai mögött meghúzódó koncepció annak biztosítása, hogy a tároló automatikusan megváltoztassa tételeinek szélességét, magasságát és sorrendjét, hogy a rendelkezésre álló helyet a legjobban kitöltsék. Ez nagyon hasznos lehet, ha különféle képernyőméreteken és készülékeken belül elemeket szeretne elhelyezni. A tételeket kibővítik, hogy kitöltsék a szabad helyet, vagy a túlcsordulások elkerülése érdekében zsugorítják.

CSS Flexbox rács kezdőknek

A CSS az egyik legegyszerűbb és legfejlettebb dolog a webfejlesztésben és a dizájnban, de ne tévessze egyszerűségét a funkciók hiánya miatt. Számos csodálatos funkcióval és képességgel rendelkezik, amelyek készen állnak arra, hogy kihasználják őket, ezek egyike viszonylag új elrendezési modulja: a Flexbox tulajdonságai.

A Flexbox tulajdonságai a CSS3 egyik elérhető újabb elrendezése, és sokat lehet tanulni róla. Itt áttekintjük az elrendezést és annak használatát. Mielőtt elkezdenénk, itt van egy kis háttér a Flexbox tulajdonságaival kapcsolatban:

Mik az elrendezési módok?

A legegyszerűbben: a CSS Flexbox rács elrendezési mód. A CSS-nek számos létező elrendezési módja van. A blokk elrendezés módja (mint a kijelző: blokk) hosszú ideje működik. A blokkos elrendezés jó választás a teljes dokumentumok stílusához. Valójában egy webböngésző alapértelmezés szerint számos elemet, például a divs és a bekezdéseket blokk szintűként kezel.

Egy másik általános elrendezési mód az inline. Az erős címke, a bemeneti címke és a horgonycímke példák az inline szintű elemekre. A Google Chrome fejlesztői eszközei lehetővé teszik egy elem „kiszámított stílusának” megtekintését, hogy meghatározza a CSS tulajdonságait és értékeit, amelyeket alkalmaztak azokra az elemekre, amelyeket a fejlesztő kifejezetten nem állított be.

A viszonylag újabb Flexbox tulajdonságok (rugalmas doboz) elrendezését úgy hozták létre, hogy hatékonyabb módszer legyen a tárolóegységek közötti hely elrendezésére, összehangolására és elosztására, még akkor is, ha ezen elemek mérete dinamikus vagy ismeretlen. Ezért a „rugalmas” kifejezés.

A Flexbox tulajdonságai koncepció

A Flexbox tulajdonságainál a legfontosabb, hogy irány-agnosztikus. Míg a blokk elrendezése függőleges és az inline elrendezés vízszintes, a Flexbox sem. A blokkolás és a beépítés jól működik a megfelelő helyzetekben, de hiányzik a rugalmasság a bonyolult vagy nagy alkalmazások támogatása szempontjából, főleg amikor az elemek tájolását megváltoztatják, nyújtják, összehúzzák, átméretezik és egyéb módon megváltoztatják az elemeket.

Hol használják a Flexbox tulajdonságokat?

Mint minden más CSS-elrendezés, a Flexbox-ot bizonyos helyzetekben a legjobb használni. Különösen helyénvaló az alkalmazás kisméretű elrendezései és összetevői. Nagyobb méretű elrendezések esetén a bölcsebb megoldás a rácsos elrendezés.

Miért előnyben részesítik a Flexboxot?

Számos fejlesztő és tervező előnyben részesíti a Flexbox tulajdonságait (néha túl gyakran!). Ennek oka az, hogy a Flexbox tulajdonságait könnyebben lehet használni; az elemek elhelyezése sokkal egyszerűbb, így bonyolultabb elrendezéseket kaphat kevesebb kódolással. Más szavakkal, ez egyszerűsíti a fejlesztési folyamatot.

Útmutató a Flexbox tulajdonságaihoz

Most, hogy egy kicsit megismeri a Flexbox tulajdonságait, valamint hogy hogyan és miért működik, itt található egy részletes útmutató az elrendezéshez. Az elrendezés modellje egy szülőtartályból áll, melyet flex-konténernek is neveznek. A tartály közvetlen gyermekeit „flex cikkeknek” hívják.

Az elrendezés több iteráción és szintaxisváltozáson ment keresztül az első vázlat 2009-ben történt létrehozása óta eltelt évek során. A legújabb Flexbox specifikációt a következő böngészők támogatják:

  • Opera 17+
  • Internet Explorer 11 vagy újabb
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4 vagy újabb
  • iOS 7.1 vagy újabb

A Flexbox tulajdonságokban használt terminológia

Íme néhány áttekintés a Flexbox tulajdonságok elrendezésében használt alapvető terminológiáról:

  • Kijelző: Ez a parancs a flex konténer meghatározására szolgál. Lehet, hogy sorban vagy blokkban van, attól függően, hogy meghatározza-e a tárolóban lévő összes elem flex tartalmát. Példa:

.container (

kijelző: flex; / * vagy inline-flex * /

)

  • Rendezés: A rugalmas elemeket alapértelmezés szerint a forrás sorrendje szerint állítják el, de a 'rendelés' tulajdonság vezérelheti az elemek megjelenési sorrendjét a tárolóban. Példa:

.item (

rendelés: ;

)

  • Rugalmas irány: Ez a sorrend állítja be a főtengelyt, meghatározva azt az irányt, ahogyan a hajlékony tárgyak a tartályba kerülnek. A hajlékony tárgyakat elsősorban függőleges vagy vízszintes irányban lehet elrendezni. Példa:

.container (

hajlítási irány: sor | sor hátra | oszlop | oszlop hátra;

)

  • Flex növekedés: Ez a sorrend meghatározza a flex elem automatikus méretezését, ha van hely. Elfogadhat egy egység nélküli értéket, amely arányként szolgál. Ez az érték diktálja, hogy az elemnek mekkora helyet kell foglalnia a rugalmas tartályban. Például, ha az összes elem rugalmas növekedése 1-re van állítva, akkor a tartályban fennmaradó hely egyenlően oszlik meg minden gyermek számára. Ha az érték 2, akkor a fennmaradó hely kétszer annyi helyet foglal el, mint a többi. Példa:

.item (

flex-növekedés:; / * alapértelmezett 0 * /

)

  • Flex-zsugorodás: Ez pontosan ellenkezőleg hat, mint a flex-növekedés, abban az esetben, ha szükség esetén zsugorítja a flexibilis elemeket. Példa:

.item (

flex-zsugorodás:; / * alapértelmezett 1 * /

)

  • Rugalmas alap: Ez a sorrend határozza meg az elemek alapértelmezett méretét a fennmaradó hely elosztása előtt. Lehet egy hosszúság, például 5rem vagy 20%, vagy egy kulcsszó. Az 'automatikus' kulcsszó azt jelzi, hogy az elem szélességét és magasságát meg kell mérni, az 'tartalom' kulcsszó pedig azt jelzi, hogy az elem mérete annak tartalma alapján történik. Példa:

.item (

flex-alap: | auto; / * alapértelmezett auto * /

)

  • Flex: Ez a fenti három tulajdonság összesített kombinációja: flex-növekedés, flex-base és flex-shrink. Az alapértelmezett érték '0 1 auto'.

.item (

flex: nincs | (||)

)

  • Indokolja a tartalmat: Ez a sorrend meghatározza a főtengely igazítását és segít elosztani a további szabad helyet, ha van még hátra, amikor az elemek rugalmatlanok vagy elérték a maximális méretet. Ez is segít az elem igazításának szabályozásában, ha túl van.

.container (

igazolja a tartalmat: flex-start | flex vég | központ | térköz között | tér-körül;

)

  • Elemek igazítása: Ezzel határozható meg a rugalmas elemek elrendezésének alapértelmezett viselkedése az aktuális sor keresztengelyén. Ez alapvetõen a „tengely igazolása” változata a kereszttengelyen, amely merõleges a fõ tengelyre. Példa:

.container (

igazítási elemek: flex-start | flex-end | központ | alapvonal | nyúlik;

)

  • Tartalom összehangolása : Ez a sorrend összehangolja a konténer vonalait abban az esetben, ha van további hely a kereszttengelyen. Ez hasonló az „igazolja a tartalomhoz”, de a főtengely helyett a kereszttengelyhez. Ha csak egy sor flex elem van, akkor ez a tulajdonság nincs hatással. Példa:

.container (

összehangolás tartalma: flex-start | flex-end | központ | térköz között | tér-körül | nyúlik;

)

A Flexbox tulajdonságainak használata

A Flexbox elrendezés használatához egyszerűen beállíthatja a HTML szülő elem megjelenítési tulajdonságát, az alábbiak szerint:

.flex-container (

kijelző: -webkit-flex; / * Safari * /

kijelző: flex;

)

Ha inkább egy inline elemként szeretne megjeleníteni, akkor beírhat:

.flex-container (

kijelző: -webkit-inline-flex; / * Safari * /

kijelző: inline-flex;

)

Csak akkor kell ezt a tulajdonságot beállítani a szülő flex tartályra és annak azonnali flex elemeire. A konténer gyermekek automatikusan flex tárgyakká válnak.

Ajánlott tanfolyamok

  • Online tanfolyam a ingyenes jQuery-ről
  • Online tanfolyam a szabad szögletes JS-ről
  • Online képzés a Mudboxon
  • Tanúsító képzés a szabad Rubinban

Flexbox tulajdonságai - Flex tartály tulajdonságai

A Flexbox tulajdonságainak csoportosításához sokféle módszer van, és ezek megismerésének a legegyszerűbb módja a Flex tároló és az elem tulajdonságainak felosztása. Éppen a fentebb leírtuk a rugalmas tartály tulajdonságait. Nézzük meg a többit:

  • Rugalmas irány: sor vagy oszlop

A hajlítási tulajdonság oszlopként függőlegesen vagy vízszintesen sorba helyezhető. A sor irányával a flex elemeket alapértelmezés szerint balról jobbra rakják egymásra. A fordított sor megváltoztatja ezt az irányt jobbról balra. Az oszlop iránya alapértelmezés szerint fentről lefelé, az oszlop fordított funkció pedig visszafordítja ezt fentről lefelé irányba.

  • Flex-wrap: becsomagolva vagy letakarva

A flex-wrap tulajdonság ellenőrzi, ha a flex konténer gyermekei több vagy egy sorban vannak elrendezve, és az új sorok egymásra rakásának irányát. A most beilleszthető érték egyetlen sorban megjelenő flex elemeket jelenít meg, zsugorítva, hogy alapértelmezés szerint a tároló szélességéhez igazodjanak. A becsíptetési érték különböző sorokban balról jobbra vagy fentről lefelé mutatott flex elemeket lát. Felveheti a fordított fordítást is a sorrend megváltoztatásához. Az alapértelmezett érték a nowrap.

  • Flex-áramlás

Ez a tulajdonság alapvetően rövidítés a flex-irány és a flex-wrap tulajdonságok összeállításához. Az alapértelmezett érték a „sort nowrap”. Példa:

.flex-container (

flex-flow: ||

)

  • Indokolja-tartalom

Az igazolható tartalom tulajdonságnak négy értéke van: flex-start, hogy az elemeket a tároló bal oldalához igazítsák; flex-end, hogy igazítsa az elemeket a jobb oldalra; központ, hogy igazodjon a középponthoz; térköz, hogy az elemeket egymással egyenlő távolságra igazítsák az első és az utolsó elem a tartály széleihez igazítva; és hely-körül, hogy a flexibilis tárgyat egyenlő távolságra igazítsák körülük, beleértve az első és az utolsó elemet is. A Flex-Start az alapértelmezett érték.

  • Align-tételek

Ennek a tulajdonságnak öt értéke van: nyújtás a rugalmas tárgyak méretarányához, hogy kitöltsék a teljes szélességet vagy magasságot a tartály kereszteződésétől a végéig; flex-start, hogy az elemeket a keresztezésnél rakja össze; flex-end, hogy az elemeket a keresztirányban egymásra helyezzék; központ, hogy az elemeket a keresztirányú tengely közepéhez igazítsák; és az alapvonal, hogy az elemeket úgy igazítsák, hogy alapvonalaik igazodjanak. A Stretch az alapértelmezett érték.

  • Align-tartalom

Ez a tulajdonság igazítja a rugalmas tartály vonalait, ha további hely van a keresztirányban. Értékei a következők: nyújtás a hely elosztására minden sor után; flex-start, hogy az elemeket a keresztirányú indulás felé rakja; hajlékony vég, hogy az elemeket a keresztvég felé rakja; középen helyezkedik el, hogy az elemeket a kereszttengely közepére rakja; space-around, hogy egyenlően osztja el a helyet a flexibilis tárgyak között. Az alapértelmezett érték stretch.

Flexbox tulajdonságai - Flex elem tulajdonságai

Most, hogy tudott a Flexbox konténer tulajdonságairól, nézzük meg az elem tulajdonságait:

  • Rendelés

Ez a tulajdonság szabályozza a flex konténer gyermekeinek megjelenési sorrendjét. Alapértelmezés szerint a flex konténerben kerülnek megrendelésre.

.flex-elem (

rendelés: ;

)

A flex elemeket átrendezheti anélkül, hogy a HTML-kódot újra kellene szerkeszteni. Az alapértelmezett érték nulla.

  • Align-én

Ez a tulajdonság lehetővé teszi egy adott flex elem alapértelmezett igazításának felülbírálását. Ehhez a tulajdonsághoz az igazító elemek értékeit használhatja.

.flex-elem (

önbeállítás: automatikus | flex-start | flex-end | központ | alapvonal | nyúlik;

)

Az automatikus értéket az igazítás önmagában az elem szülőjén lévő igazítási elemek értékével számítják ki. Ha az elemnek nincs szülője, akkor a szakaszot használja.

Alapvető példák

Ez minden, amit tudnia kell a CSS Flexbox rácsos elrendezésének használatához. Itt az ideje, hogy gyakorolja azt, amit megtanult. Íme néhány példa, amely megmutatja, hogy ezek a tulajdonságok hogyan válnak össze. Kezdjük valami teljesen egyszerűvel:

.parent (

kijelző: flex;

magasság: 300 képpont;

)

.child (

szélesség: 100 képpont;

magasság: 100 képpont;

margin: auto;

)

Ez a tökéletes központosítás példája. A magasság és a szélesség értékei tetszés szerint megváltoztathatók. A kulcs itt az, hogy a margót „auto” -ra állítsa úgy, hogy a rugalmas tartály automatikusan felszívjon minden extra helyet. Elég egyszerű!

Most folytassunk néhány további tulajdonság hozzáadásával: egy hat rögzített méretű elemmel rendelkező lista, amelyek automatikusan méretezhetők. Ezeket egyenletesen kell elosztani a vízszintes tengelyen.

.flex-container (

kijelző: flex;

igazolja-tartalom: tér-körül;

)

Ezután próbáljuk középre igazítani a jobbra igazított navigációt a közepes méretű képernyőkhöz, és tegyük azt egyetlen összeomlással kis eszközökön.

/ * Nagy * /

.navigáció (

kijelző: flex;

flex-flow: sor burkolás;

igazolja a tartalmat: flex-end;

)

/ * Közepes képernyők * /

@media all és (maximális szélesség: 800 képpont) (

.navigáció (

igazolja-tartalom: tér-körül;

)

)

/ * Kis képernyők * /

@media all és (maximális szélesség: 500 képpont) (

.navigáció (

hajlítási irány: oszlop;

)

)

Ideje megtenni ezt egy lépést tovább! Próbáljuk meg a mobil első elrendezését három oszlopban, teljes szélességű lábléccel és fejléccel, függetlenül a forrás sorrendjétől.

.wrapper (

kijelző: flex;

flex-flow: sor burkolás;

)

/ * Azt mondjuk, hogy minden elem 100% szélességű legyen. /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * A forrásmegrendelésre támaszkodunk a mobil első megközelítésben * /

/ * Közepes képernyők * /

@media all és (min. szélesség: 600 képpont) (

.side (flex: 1 auto; )

)

/ * Nagy képernyők * /

@media all és (min. szélesség: 800 képpont) (

.main (flex: 2 0px; )

.aside-1 (sorrend: 1; )

.main (sorrend: 2; )

.side-2 (sorrend: 3; )

.láb (sorrend: 4; )

)

Következtetés

Ez csak néhány alapvető példa. Sokkal többet játszhatsz a CSS Flexbox rácsos elrendezéseivel, és ezek feltétlenül felbecsülhetetlen értékűek, ha rugalmas weblapot szeretne létrehozni.

Ajánlott cikkek

Tehát itt van néhány cikk, amely segít részletesebben megismerni a flexbox tulajdonságait, a flexbox kódot és a css flexbox rácsot, tehát csak keresse meg az alább megadott linket.

  1. HTML vs XML - legfontosabb különbségek
  2. CSS3 vs CSS - Mennyire különböznek egymástól? (Infograph)
  3. HTML vs CSS legfontosabb különbségek
  4. HTML5 vs Flash

Kategória:

Webfejlesztő eszközök