Što je Flexbox?
Flexbox, kratica od "fleksibilni okvir", način je rasporeda uveden u CSS3 koji određuje kako su elementi raspoređeni na stranici tako da se ponašaju predvidljivo u različitim veličinama zaslona i na različitim uređajima.
Nazvan je Flexbox zbog njegove sposobnosti širenja i skupljanja elemenata unutar savijačkog okvira kako bi najbolje ispunio raspoloživi prostor. U usporedbi sa starijim metodama rasporeda, kao što su prikaz tablice i plutajući ugrađeni blokovi, Flexbox je snažniji način za:
- Postavite elemente u različitim smjerovima
- Preuredite redoslijed prikaza elemenata
- Promijenite poravnanje elemenata
- Dinamično uklapanje elemenata u spremnik
Kada ne koristiti Flexbox?
Iako je Flexbox izvrstan za skaliranje, poravnavanje i preuređivanje elemenata, pokušajte ga izbjegavati koristiti za:
- cjelokupni izgled stranice
- web stranice koje u potpunosti podržavaju stare preglednike
Stariji preglednici, poput IE 11 ili starije verzije, ne podržavaju ili samo djelomično podržavaju Flexbox. Ako želite igrati na sigurno, trebali vratiti na druge metode CSS rasporeda, kao što display: inline-blocks floati display: table.
Međutim, ako ciljate samo moderne preglednike, Flexbox svakako vrijedi pogledati.
Terminologija
U modelu Flexbox postoje tri temeljna koncepta:
- flex predmete, elemente koje treba položiti
- flex spremnik koji sadrži flex predmete
- smjer protoka, koji određuje smjer rasporeda fleksibilnih predmeta
Ljudi najbolje uče iz iskustva i primjera, pa krenimo!
Razina 1 - osnovna
1) Stvaranje fleks spremnika
.flex-container { display: flex;}Da biste stvorili flex spremnik, trebate samo dodati display: flexsvojstvo elementu. Prema zadanim postavkama, sva se izravna djeca smatraju fleksibilnim predmetima i položena su vodoravno u jedan red s lijeva na desno. Ako je ukupna širina savitljivih predmeta veća od spremnika, predmeti će se smanjiti tako da stanu u spremnik.
2) Stavite flex predmete u jedan stupac
.flex-container { display: flex; flex-direction: column;}Flex predmeti mogu se postaviti okomito postavljanjem flex-direction: column. Također ih je moguće postaviti obrnutim redoslijedom postavljanjem flex-direction: column-reverseili flex-direction: row-reverse.
.flex-container { display: flex; flex-direction: column-reverse;}Razina 2 - početnik
1) Poravnajte flex predmete udesno
.flex-container { display: flex; justify-content: flex-end;}Podsjetimo da postoji flex pravac za svaki Flexbox model. justify-contentkoristi se za određivanje mjesta na kojima treba savijati predmete duž smjera savijanja. U gornjem primjeru, justify-content: flex-endznači da su predmeti opravdani do kraja fleks spremnika u vodoravnom smjeru. Zbog toga su postavljeni udesno.
2) Poravnajte fleksibilne predmete po sredini
.flex-container { display: flex; justify-content: center;}3) Raširite fleks predmete
Možete odrediti koliko prostora treba biti između stavki u spremniku pomoću jedne od tri moguće vrijednosti razmaka za justify-contentsvojstvo:
space-evenly: razmak između početnog ruba spremnika i prve stavke jednak je razmaku između svake stavke i predmeta uz nju.space-between: razmak između bilo koje dvije susjedne stavke jednak je, ali ne nužno jednak razmaku između prve / posljednje stavke i njenog najbližeg ruba; razmak između početnog ruba i prve stavke jednak je razmaku između krajnjeg ruba i posljednje stavke.space-around: prostor na svakoj strani predmeta jednak je za svaku stavku u spremniku. Imajte na umu da to znači da će razmak između dvije susjedne stavke biti dvostruko veći od razmaka između prve / posljednje stavke i njenog najbližeg ruba.
4) Poravnajte flex predmete u drugom smjeru
.flex-container { display: flex; justify-content: center; align-items: center;}Obično bismo htjeli rasporediti predmete u smjeru savijanja, a istovremeno ih poravnati u smjeru okomitom na njega. Postavljanjem justify-content: centeri align-items: center, flex elementi se mogu postaviti u središte flex posude i vodoravno i okomito.
5) Poravnajte određeni element savijanja
.flex-container { display: flex; align-items: center;}.flex-bottom { align-self: flex-end;}Pomoću align-selfCSS svojstva na toj stavci moguće je poravnati određenu fleksibilnu stavku drugačije od ostalih u spremniku .
Razina 3 - srednja
1) Dopustite fleksibilnim stavkama da se umotaju u druge retke / stupce
.flex-container { display: flex; flex-wrap: wrap;}Prema zadanim postavkama, flex elementi se ne smiju zamatati i njima se mijenja veličina kako bi se uklopile u jedan redak ili stupac ako flex spremnik nije dovoljno velik za sve njih. Dodavanjem flex-wrap: wrap, flex stavke koje bi prelijevale spremnik bit će zamotane u drugi redak.
2) Obrnuto omatanje
.flex-container { display: flex; flex-wrap: wrap-reverse;}Flex predmeti i dalje su raspoređeni u više redaka, flex-wrap: wrap-reverseali počinju s kraja flex spremnika.
3) Obrazložiti položaj linija elemenata
.flex-container { display: flex; flex-wrap: wrap; align-content: flex-start;}Prema zadanim postavkama, omotani redovi savijenih stavki rastežu se kako bi zauzeli sav preostali prostor s jednakim razmakom između susjednih redaka. Možete postaviti align-contentna flex spremnik kako biste odredili pozicioniranje redaka kada dođe do premotavanja. Moguće vrijednosti su flex-start, flex-end, center, space-between, space-aroundi stretch(zadano).
Razina 4 - napredni
1) Proširite elemente
.flex-container { display: flex;}.flex-item.nth-of-type(1){ flex-grow: 1;}.flex-item.nth-of-type(2) { flex-grow: 2;}flex-growstupa na snagu samo kada u fleks spremniku ima preostalog prostora. flex-growVlasništvo flex specifikaciji artikala koliko predmet će se proširiti u odnosu na druge predmete, kako bi se popunila flex kutiju. Zadana vrijednost je 1. Kada je postavljeno na 0, stavka uopće neće rasti kako bi popunila preostali prostor. U ovom primjeru omjer dviju stavki je 1: 2, što znači da će prva stavka zauzeti ⅓, dok će druga stavka zauzeti ⅔ preostalog prostora.
2) Elementi za skupljanje
.flex-container { display: flex;}.flex-item:nth-of-type(1) { flex-shrink: 1;}.flex-item:nth-of-type(2) { flex-shrink: 2;}flex-shrinkstupa na snagu tek kada fleksibilni predmeti preplave fleks spremnik zbog nedostatka prostora. Određuje koliko će se stavka smanjiti u odnosu na ostale stavke kako se stavke ne bi prelijevale u fleks okvir. Zadana vrijednost je 1. Kada je postavljeno na 0, stavka flex neće se uopće smanjiti. U ovom primjeru omjer je 1: 2, što znači da će se prva stavka smanjiti za ⅓, dok će se druga stavka smanjiti za ⅔ preplavljenog prostora.
3) Postavite veličinu elemenata
.flex-container { display: flex;}.flex-item.nth-of-type(1) { flex-basis: 200px;}.flex-item.nth-of-type(2) { flex-basis: 10%;}Umjesto da koristite početnu veličinu elementa, njegovu veličinu možete prilagoditi pomoću flex-basis. Prema zadanim postavkama njegova vrijednost je flex-basis: auto, što znači da je veličina izračunata iz CSS pravila koja nisu Flexbox. Također ga možete postaviti na neku apsolutnu vrijednost ili vrijednost koja predstavlja postotak fleks spremnika; na primjer flex-basis: 200pxi flex-basis: 10%.
4) Stavite flex-grow, flex-shrink i flex-osnovu zajedno
.flex-container { display: flex;}.flex-item:nth-of-type(1) { flex: 1 0 100px;}.flex-item:nth-of-type(2) { flex: 2 0 10%;}flexje skraćenica za flex-grow, flex-shrinki flex-basis. U ovom je primjeru postavljena prva flex stavkaflex-grow=1, flex-shrink=0,flex-basis=100px A drugi flex predmet je postavljen da budeflex-grow=2, flex-shrink=0,flex-basis=10% . U ovom slučaju, budući da u fleks spremniku ima preostalog prostora, on samo flex-growdjeluje i flew-shrinkzanemaruje se.
Zaključak
Flexbox je lako naučiti i njime upravljati. Znanje o njegovoj uporabi posebno je korisno jer je ciklus web razvoja kratak, a iteracije su brze. Ako želite više eksperimentirati s Flexboxom prije nego što ga upotrijebite u svojim projektima, posjetite Flexyboxes i Flexbox Froggy kako biste vježbali. Također možete pročitati više o CSS triku: Vodič za Flexbox i W3C: CSS Flexible Box.
Ovaj je članak izvorno objavljen na blogu Altitude Labs, a napisao ga je naš softverski inženjer Felix Yau. Altitude Labs je softverska agencija koja se specijalizirala za personalizirane React aplikacije, mobilne aplikacije.