Vse o lastnostih flexboxa
Koncept, ki stoji za lastnostmi Flexbox, je, da embalaži omogočijo samodejno spreminjanje širine, višine in vrstnega reda svojih postavk, kar najbolje zapolni razpoložljivi prostor. To je lahko zelo koristno za namestitev predmetov znotraj različnih velikosti zaslona in naprav. Elemente razširite, da zapolnite vsak prosti prostor, ali skrčite, da preprečite preliv.
CSS Flexbox mreža za začetnike
CSS je ena prvih in najlažjih stvari, ki se jih naučite pri spletnem razvoju in oblikovanju, vendar ne zamudite njene preprostosti zaradi pomanjkanja funkcij. Ima številne neverjetne funkcije in zmogljivosti, ki so pripravljene na uporabo, ena izmed njih je njegov relativno nov modul postavitve: lastnosti Flexbox.
Lastnosti Flexbox so ena izmed novejših postavitev, ki je na voljo za CSS3, in o tem se lahko naučimo veliko. Tukaj se srečujemo s postavitvijo in kako jo uporabljati. Preden začnemo, pa je nekaj podrobnosti o lastnostih Flexbox:
Kaj so načini postavitve?
Najpreprosteje povedano, mreža CSS Flexbox je način postavitve. CSS ima več obstoječih načinov postavitve. Način postavitve blokov (kot je prikaz: blok) že dolgo obstaja. Postavitve blokov so dobra izbira za oblikovanje celotnih dokumentov. V bistvu spletni brskalnik privzeto obravnava več elementov, kot so div in odstavki, kot raven bloka.
Drug pogost način postavitve je linijski. Močna oznaka, vhodna oznaka in sidrna oznaka so primeri elementov na ravni. Orodja za razvijalce Google Chroma celo omogočajo ogled 'izračunanega sloga' elementa za določitev lastnosti in vrednosti CSS, ki so bile uporabljene za elemente, ki jih razvijalci niso izrecno določili.
Razmeroma novejša postavitev lastnosti Flexboxa (Fleksibilna škatla) je zasnovana kot učinkovitejša metoda postavitve, poravnave in porazdelitve prostora med zabojniki, tudi če je velikost teh elementov dinamična ali neznana. Od tod tudi izraz „prožen“.
Koncept lastnosti Flexbox
Najpomembnejša stvar lastnosti Flexbox je, da je smerno-agnostična. Medtem ko je postavitev bloka zasnovana na vertikali, in postavitev v liniji je vodoravna, Flexbox ni noben. Blok in inline dobro delujejo v pravih situacijah, vendar nimajo prožnosti za podporo zapletenih ali velikih aplikacij, zlasti ko gre za spremembo orientacije, raztezanje, krčenje, spreminjanje velikosti in drugače spreminjanje dimenzij elementov.
Kje se uporabljajo lastnosti Flexboxa?
Kot katero koli drugo postavitev CSS je tudi Flexbox v določenih situacijah najbolje uporabiti. Zlasti je primerna za majhne postavitve in sestavne dele aplikacije. Za postavitve v večjem obsegu bi bila pametnejša izbira postavitev mreže.
Zakaj je prednost Flexbox?
Veliko razvijalcev in oblikovalcev daje prednost lastnostim Flexbox kadar koli lahko (včasih prepogosto!). To je zato, ker so lastnosti Flexbox enostavnejše za uporabo; pozicioniranje elementov je veliko enostavnejše, zato lahko dobite bolj zapletene postavitve z manj kodiranja. Z drugimi besedami, poenostavlja proces razvoja.
Vodnik po lastnostih Flexbox
Zdaj, ko veste nekaj o lastnostih Flexbox in kako in zakaj deluje, je tu podroben vodič o postavitvi. Model postavitve je sestavljen iz nadrejenega vsebnika, imenovanega tudi "prilagodljivi vsebnik". Takojšnji otroci iz te posode se imenujejo „fleksibilni predmeti“.
Postavitev je v letih, odkar je bil ustvarjen prvi osnutek leta 2009, doživela več iteracij in sprememb sintakse. Najnovejša specifikacija Flexbox je podprta v naslednjih spletnih brskalnikih:
- Opera 17+
- Internet Explorer 11 ali novejši
- Mozilla Firefox 28+
- Google Chrome 29 ali novejši
- Apple Safari 6.1+
- Android 4.4 ali novejši
- iOS 7.1 ali novejši
Terminologija, uporabljena v lastnostih Flexbox
Tu je pogled na osnovno terminologijo, uporabljeno v postavitvi lastnosti Flexbox:
- Zaslon: Ta ukaz se uporablja za definiranje flex vsebnika. Lahko je inline ali blok, odvisno od tega Prav tako določa vsebino fleksibilnosti za vse elemente v vsebniku. Primer:
.container (
zaslon: flex; / * ali inline-flex * /
)
- Vrstni red: Flex predmeti so privzeto razporejeni po izvornem vrstnem redu, vendar lahko lastnost 'order' nadzoruje vrstni red, v katerem so predmeti prikazani v vsebniku. Primer:
.item (
vrstni red:;
)
- Smer proge: Ta vrstni red vzpostavi glavno os, ki določa smer, v katero se naložijo fleksibilni predmeti znotraj posode. Flex predmeti so lahko postavljeni predvsem v navpični ali vodoravni smeri. Primer:
.container (
flex-smer: vrstica | vrstica-povratna | stolpec | stolpec-vzvratno;
)
- Prožna rast: To naročilo določa sposobnost prožnega elementa, da se samodejno poveča, če ima prostor. Lahko sprejme vrednost brez vrednosti, ki služi kot sorazmerje. Ta vrednost narekuje, koliko prostora naj izdelek zasede v fleksibilnem vsebniku. Na primer, če je za vse elemente nastavljeno prilagodljivo naraščanje kot 1, bo preostali prostor v vsebniku enakomerno razdeljen vsem otrokom. Če je vrednost 2, bo preostali prostor zavzel dvakrat več prostora kot preostali. Primer:
.item (
upogniti-rasti:; / * privzeto 0 * /
)
- Flex-skrčenje: To je ravno obratno kot gibanje raste, saj krči prožne elemente, kadar je to potrebno. Primer:
.item (
fleksno skrčen:; / * privzeto 1 * /
)
- Flex-osnova: Ta vrstni red določa privzeto velikost elementov, preden se razdeli preostanek prostora. To je lahko dolžina, kot 5rem ali 20%, ali ključna beseda. Ključna beseda „samodejno“ pomeni, da se merita širina in višina predmeta, ključna beseda „vsebina“ pa pomeni, da je element velikost glede na njegovo vsebino. Primer:
.item (
prožna osnova: | avto; / * privzeto samodejno * /
)
- Flex: To je kombinirana okrajšava za vse zgoraj naštete tri lastnosti: prilagodljivo rast, gibanje na osnovi in upogibanje. Privzeta vrednost je »0 1 samodejno«.
.item (
flex: noben | (||)
)
- Opraviči vsebino: Ta vrstni red določa poravnavo glavne osi in pomaga porazdeliti dodatni prosti prostor, če je levo ostalo, če so elementi negibni ali dosežejo največjo velikost. To pomaga tudi nadzirati poravnavo predmeta, kadar pride do prelivanja.
.container (
upraviči-vsebina: flex-start | flex konec | središče | presledki med | prostor okoli;
)
- Poravnaj elementov: to se uporablja za določitev privzetega vedenja postavitve prožnih elementov na prečni osi trenutne vrstice. To je v bistvu različica 'upraviči vsebino' na prečni osi, ki je pravokotna na glavno os. Primer:
.container (
poravnati predmete: flex-start | fleksibilni | središče | osnovna | raztegniti;
)
- Poravnava vsebine: Ta vrstni red poravna črte posode, če je na prečni osi dodatni prostor. Podobno je z 'upraviči vsebino', toda za prečno os namesto glavne osi. Če obstaja samo ena vrstica prožnih elementov, ta lastnost nima nobenega učinka. Primer:
.container (
poravnati vsebino: flex-start | fleksibilni | središče | presledki med | vesolje okoli | raztegniti;
)
Uporaba lastnosti Flexbox
Če želite uporabiti postavitev Flexboxa, lahko preprosto nastavite lastnost prikaza na nadrejenem elementu HTML, kot je spodaj:
.flex-container (
zaslon: -webkit-flex; / * Safari * /
zaslon: flex;
)
Če želite prikazati kot vgrajen element, lahko napišete:
.flex-container (
zaslon: -webkit-inline-flex; / * Safari * /
zaslon: inline-flex;
)
To lastnost potrebujete samo za nastavitev na nadrejeni prilagodljivi vsebnik in njegove neposredne prilagodljive elemente. Otroci posode bodo samodejno postali prožni predmeti.
Priporočeni tečaji
- Spletni tečaj brezplačne jQuery
- Spletni tečaj brezplačnega kotnega JS
- Spletno usposabljanje na Mudboxu
- Usposabljanje za certificiranje v Free Ruby
Lastnosti Flexbox - lastnosti posod Flex
Obstaja veliko načinov za razvrščanje lastnosti Flexbox-a, o njih pa najlažje spoznate tako, da jih razdelite na lastnosti vsebnika Flexbox in elementov. Zgoraj smo opisali nekatere lastnosti fleksibilnih vsebnikov. Poglejmo še ostalo:
-
Smer proge: vrstica ali stolpec
Lastnost prožne smeri je mogoče postaviti kot stolpce navpično ali vrstice vodoravno. V smeri vrstice so prožni elementi privzeto zloženi od leve proti desni. Povratna vrstica spremeni to smer v desno v levo. Smer stolpca je privzeto od vrha do dna in funkcija povratnega stolpca to obrne v smer od spodaj navzgor.
-
Flex-ovi: zdaj ovijemo ali ovijemo
Lastnost flex-wrap nadzoruje, če so otroci gibljive posode razporejeni v več ali enojnih vrsticah in smer, v kateri so zložene nove črte. Vrednost nowrap vidi prožne elemente, prikazane v eni vrstici, skrčene, da privzeto ustrezajo širini vsebnika. Vrednost prekrivanja prikazuje prožne elemente, prikazane v različnih vrsticah v smeri od leve proti desni ali od zgoraj navzdol. Za spreminjanje naročila lahko dodate tudi previjanje. Privzeta vrednost je zdajrap.
-
Flex-flow
Ta lastnost je v bistvu kratka roka, da skupaj določimo lastnosti upogibanja in upogibanja. Privzeta vrednost je 'vrstica zdaj'. Primer:
.flex-container (
prožni pretok: ||
)
-
Upraviči vsebino
Lastnost utemeljitve vsebine ima štiri vrednosti: flex-start za poravnavo elementov na levi strani vsebnika; prilagodljiv element za poravnavo predmetov na desni strani; središče za poravnavo s središčem; presledek za poravnavo predmetov z enakim razmikom med njimi, pri čemer so prvi in zadnji elementi poravnani na robovih posode; in prostora za poravnavo prožnega elementa z enakim razmikom okoli njih, vključno s prvim in zadnjim elementom. Flex-start je privzeta vrednost.
-
Poravnajte predmete
Ta lastnost ima pet vrednosti: raztegnite, da povečate prožne elemente, da zapolnite celotno širino ali višino od križnega začetka do prečnega konca posode; fleksibilni zagon za zlaganje predmetov na navzkrižnem startu; fleksibilni del za zlaganje predmetov na prečnem koncu; središče za poravnavo predmetov na sredini križne osi; in osnovno črto za poravnavo elementov, tako da so njihove osnovne črte poravnane. Stretch je privzeta vrednost.
-
Poravnaj vsebino
Ta lastnost poravna črte prožne posode, če je v osi križa dodaten prostor. Njene vrednosti so: raztegnite, da razporedite prostor po vsaki vrsti; fleksibilni zagon za zlaganje predmetov proti navzkrižnemu startu; flex-end, da zložite predmete na prečni konec; središče za zlaganje predmetov na sredino križne osi; space-around, da enakomerno porazdelite prostor okoli fleksibilnih predmetov. Privzeta vrednost je stretch.
Lastnosti Flexbox - lastnosti elementov Flex
Zdaj, ko veste o lastnostih vsebnika Flexbox, poglejmo lastnosti izdelka:
- Naročilo
Ta lastnost nadzoruje vrstni red videza otrok fleksibilne posode. Privzeto so razvrščeni znotraj flex vsebnika.
.flex-element (
vrstni red:;
)
Elemente fleksibilnega izdelka lahko preuredite, ne da bi morali prestrukturirati kodo HTML. Privzeta vrednost je nič.
- Poravnajte se
Ta lastnost omogoča, da se privzeta poravnava določenega prožnega predmeta preglasi. Za to lastnost lahko uporabite vrednosti elementov poravnave.
.flex-element (
poravnaj-sam: samodejno | flex-start | fleksibilni | središče | osnovna | raztegniti;
)
Samodejna vrednost pri poravnavi se izračuna z vrednostjo elementov poravnave v nadrejenem elementu. Če element nima starša, se namesto tega uporabi raztežaj.
Osnovni primeri
To je vse, kar morate vedeti za uporabo postavitve mreže CSS Flexbox. Zdaj je čas, da vadite, kar ste se naučili. Tu je nekaj primerov, ki prikazujejo, kako se vse te lastnosti združujejo. Začnimo z nekaj povsem preprostega:
.pozorno (
zaslon: flex;
višina: 300px;
)
.child (
širina: 100px;
višina: 100px;
marža: samodejno;
)
To je primer popolnega centriranja. Vrednosti višine in širine lahko spreminjate po želji. Ključno pri tem je, da določite rob na "samodejno", tako da fleksibilni vsebnik samodejno absorbira dodaten prostor. Dovolj preprosto!
Zdaj pa preidimo na dodajanje še nekaj lastnosti: seznam s šestimi elementi fiksnih dimenzij, ki jih je mogoče samodejno prilagoditi. Enakomerno jih je treba razporediti na vodoravno os.
.flex-container (
zaslon: flex;
upraviči-vsebina: prostor okoli;
)
Nato poskusimo usmeriti desno usmerjeno navigacijo za srednje velike zaslone in jo narediti enobarvno na majhnih napravah.
/ * Velik * /
.navigation (
zaslon: flex;
prožni pretok: oviranje vrstice;
utemeljiti vsebino: flex-end;
)
/ * Srednji zasloni * /
@media vse in (največja širina: 800 pik) (
.navigation (
upraviči-vsebina: prostor okoli;
)
)
/ * Mali zasloni * /
@media vse in (največja širina: 500 pik) (
.navigation (
gibljiva smer: stolpec;
)
)
Čas je, da naredite še korak naprej! Poskusimo prvo postavitev za mobilne naprave s tremi stolpci, s spodnjo nogo in glavo celotne širine ter neodvisno od vrstnega reda.
.wrapper (
zaslon: flex;
prožni pretok: oviranje vrstice;
)
/ * Povemo, da so vsi predmeti 100% širine * /
.header, .main, .nav, .aside, .footer (
fleksibilnost: 1 100%;
)
/ * Za mobilni prvi pristop se zanašamo na izvorno naročilo * /
/ * Srednji zasloni * /
@media vse in (najmanjša širina: 600 pik) (
.aside (flex: 1 samodejno; )
)
/ * Veliki zasloni * /
@media vse in (najmanjša širina: 800 pik) (
.main (flex: 2 0px; )
.aside-1 (vrstni red: 1; )
. glavna (vrstni red: 2; )
.aside-2 (vrstni red: 3; )
.footer (vrstni red: 4; )
)
Zaključek
To je le nekaj osnovnih primerov. S postavitvami omrežja CSS Flexbox se lahko igrate veliko več in so popolnoma neprecenljive, če želite narediti odzivno spletno stran.
Priporočeni članki
Tukaj je nekaj člankov, ki bodo pripomogli k podrobnejšim podrobnostim o lastnostih flexboxa, kode flexbox in tudi o css flexbox mreži, zato pojdite skozi povezavo, ki je navedena spodaj.
- HTML v primerjavi z XML - Najboljše razlike
- CSS3 vs CSS - kako se razlikujejo? (Infograph)
- Najboljše razlike med HTML in CSS
- HTML5 vs Flash