Poravnava škatel s css z uporabo vsebnika flex. Vse, kar morate vedeti o Flexbox Alignment Flex elementih

Označevalni modul Flexbox ( iz angleščine Flexible Box - prilagodljiv blok), ki je trenutno v fazi » Možno priporočilo»standardizacija W3C ( Priporočilo kandidata za W3C) želi zagotoviti učinkovitejši način za označevanje, poravnavo in porazdelitev prostora med elementi v vsebniku, tudi če je njihova velikost neznana in/ali določena dinamično ( zato se je imenoval "fleksibilen").

Glavna ideja prilagodljivih postavitev je omogočiti vsebniku možnost spreminjanja višine/širine (in vrstnega reda) svojih elementov, da optimalno zapolni razpoložljivi prostor ( predvsem za podporo vseh vrst in velikosti zaslonov).

Flex vsebnik raztegne predmete, da zapolni prosti prostor, ali skrči predmete, da prepreči, da bi šli izven meja.

Najpomembneje je, da je postavitev Flexbox neodvisna od smeri, v nasprotju z običajnimi postavitvami ( bloki, ki so usmerjeni navpično in elementi v vrstici, ki so vodoravno).

Čeprav običajni označevalni elementi dobro delujejo na straneh, jim primanjkuje prilagodljivosti ( in to ni besedna igra) za podporo velikih in zapletenih aplikacij ( zlasti ko gre za spreminjanje orientacije, dimenzij, raztezanje, krčenje itd).

Opomba: Označevanje Flexbox je najbolj primerno za komponente aplikacij in majhne postavitve, medtem ko je označevanje na podlagi mreže najbolj primerno za postavitve velikega obsega.

Osnovni pojmi in izrazi

Ker je Flexbox cel modul in ne ločena lastnost, vsebuje veliko elementov, vključno s celotnim nizom lastnosti. Nekateri od njih so namenjeni za nanos na posodo ( nadrejeni element, znan kot flex vsebnik), medtem ko je treba druge uporabiti za otroke ( imenujemo jih flex items).

Medtem ko konvencionalno označevanje temelji na smereh polja in inline, flex označevanje temelji na smereh flex toka. Oglejte si spodnji diagram iz specifikacij, da razložite osnovno idejo za flex označevanje:

V bistvu bodo elementi postavljeni bodisi vzdolž glavne osi ( od točke glavnega začetka do glavnega konca) ali vzdolž prečne osi ( od navzkrižne začetne točke do prečnega konca):

glavna os je glavna os fleksibilnega vsebnika, vzdolž katere so razporejeni flex elementi. Bodite previdni, ni nujno, da je vodoravno, njegov položaj je odvisen od lastnosti flex-direction (glej spodaj);
glavni začetek | glavni konec - flex elementi se nahajajo znotraj vsebnika, začenši od glavne začetne točke in dosežejo glavno končno točko;
glavna velikost je širina ali višina flex elementa, odvisno od glavne velikosti. Lastnost glavne velikosti lahko nastavite na širino ali višino;
prečna os - prečna os pravokotna na glavno os. Njegova smer je odvisna od smeri glavne osi.
navzkrižni začetek | prečni konec - upogibne črte se napolnijo s predmeti in položijo v posodo, začenši od prečne začetne strani proti strani prečnega konca;
križna velikost - širina ali višina flex elementa, odvisno od izbrane dimenzije. Lastnost ima lahko vrednost širine ali višine prečne dimenzije.

Lastnosti nadrejenega razreda (flex vsebnik)

prikazovalniku

Ta lastnost definira flex vsebnik: vgrajen ali blok, odvisno od nastavljene vrednosti. Prav tako omogoča prilagodljiv kontekst za vse svoje neposredne potomce:

Vsebnik (prikaz: flex; / * ali inline-flex * /)

Upoštevajte, da stolpci CSS nimajo učinka v flex vsebniku.

flex-smer

Ta lastnost nastavi glavno os, ki določa smer, v kateri so flex elementi razporejeni v flex vsebniku. Flexbox ( razen neobveznega zavijanja) je koncept enosmernega označevanja.

Predstavljajte si, da so flex elementi primarno postavljeni v vodoravne ali navpične stolpce:

Vsebnik (upogibna smer: vrstica | vrstica-obrnjena | stolpec | stolpec-obrnjena;)

vrstica (privzeto): od leve proti desni za ltr; od desne proti levi za rtl;
row-reverse: desno proti levi za v ltr; od leve proti desni za rtl;
stolpec: enako kot vrstica, vendar od zgoraj navzdol;
stolpec-reverse: enako kot row-reverse, vendar od spodaj navzgor.

flex-wrap

Privzeto se bodo flex elementi poskušali stisniti v eno vrstico. To lahko spremenite in elemente po želji ovijete s to lastnostjo. Tu igra vlogo tudi smer, v kateri se nahajajo nove linije:

Posoda (flex-wrap: nowrap | wrap | wrap-reverse;)

nowrap (privzeto): ena vrstica / od leve proti desni za ltr; od desne proti levi za rtl;
zavoj: večvrstični / od leve proti desni za ltr; od desne proti levi za rtl;
ovijanje-obrnjeno: večvrstično / od desne proti levi za ltr; od leve proti desni za rtl.

flex-flow (velja za nadrejenega vsebnika flex)

To je skrajšana oblika lastnosti flex-direction in flex-wrap, ki skupaj definirata glavno in navzkrižno os vsebnika flex. Privzeto je row nowrap:

flex-flow:<‘flex-direction’> || <‘flex-wrap’>

opraviči vsebino

Ta lastnost nastavi poravnavo vzdolž glavne osi. To pomaga dodeliti presežek prostega prostora, ko so vsi prilagodljivi elementi v vrsti neprilagodljivi ali prilagodljivi, vendar so dosegli največjo velikost. Prav tako vam ta lastnost omogoča nadzor nad poravnavo elementov, ko presegajo meje črte:

Vsebnik (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (privzeto): elementi so poravnani na začetek vrstice;
flex-end: elementi so poravnani na konec vrstice
center: elementi so poravnani na sredino vrstice;
presledek med: elementi so enakomerno razporejeni v vrstici: prvi element se nahaja na začetku vrstice, zadnji - na koncu;
space-around: predmeti so enakomerno razporejeni na vrstici z enakim razmikom.

poravnajte elemente

Ta lastnost določa, kako so prilagodljivi elementi privzeto postavljeni glede na prečno os v trenutni vrstici. Lahko si ga predstavljamo kot navzkrižno različico justify-content ( pravokotno na glavno):

Vsebnik (poravnaj-elementi: flex-start | flex-end | center | baseline | stretch;)

flex-start: meja navzkrižnih začetnih elementov je na črti navzkrižnega začetka;
flex-end: meja navzkrižnih začetnih elementov je na črti navzkrižnega konca;
center: predmeti so centrirani na prečni osi;
osnovna črta: elementi so poravnani glede na osnovno črto;
stretch (privzeto): elementi se raztegnejo, da napolnijo vsebnik ( ob upoštevanju vrednosti najmanjše širine/največje širine).

align-content

Ta lastnost omogoča poravnavo vrstic znotraj vsebnika flex, ko je na prečni osi prosti prostor, podobno kot lastnost justify-content poravna posamezne elemente na glavno os.

Opomba: ta lastnost ne bo delovala, če je le ena vrstica prilagodljivih elementov:

flex-start: vrstice so nameščene na začetku vsebnika;
flex-end: črte so nameščene na koncu vsebnika;
središče: črte so nameščene na sredini posode;
presledek med: vrstice so enakomerno razporejene; prva vrstica je na začetku vsebnika, zadnja pa na koncu;
space-around: črte so enakomerno razporejene na enaki razdalji druga od druge;
raztegni (privzeto): vrstice se raztegnejo, da zapolnijo preostali prostor.

Lastnosti otrok

(fleksibilni predmeti)

Naročite

Privzeto so prilagodljivi elementi razvrščeni v izvornem vrstnem redu. Vendar pa lastnost naročila nadzoruje vrstni red, v katerem se elementi prikažejo v vsebniku flex:

Artikel (naročilo: ; }

flex-grow

Ta lastnost omogoča, da flex element "raste" po potrebi. Prevzame brezdimenzijsko vrednost, ki služi kot delež. Ta vrednost določa, koliko razpoložljivega prostora v flex vsebniku lahko zavzame element.

Če imajo vsi elementi flex-grow nastavljeno na 1, bo vsak podrejeni element v vsebniku nastavljen na enako velikost. Če enega od otrok nastavite na 2, bo zavzel dvakrat več prostora kot drugi:

Artikel (flex-grow: ; / * privzeto 0 * /)

flex-shrink

Ta lastnost omogoča, da se flex elementi skrčijo po potrebi:

Artikel (flex-shrink: ; / * privzeto 1 * /)

Negativne številke niso dovoljene.

flex-osnova

Ta lastnost določa privzeto velikost elementov pred dodelitvijo preostalega prostora:

Artikel (flex-basis: | avto; / * privzeto nastavljeno na samodejno * /)

upogniti

Ta lastnost je okrajšava za kombinacijo flex-grow, flex-shrink in flex-basis. Drugi in tretji parameter (flex-shrink in flex-basis) sta neobvezna. Privzete vrednosti: 0 1 auto:

Element (flex: brez | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

poravnaj-sebe

Ta lastnost vam omogoča, da preglasite privzeto poravnavo ( ali definirano z lastnostjo align-items) za posamezne flex elemente.

Razpoložljive vrednosti najdete v opisu lastnosti align-items:

Upoštevajte, da float, clear in vertical-align ne delujejo s flex elementi.

Primeri

Začnimo z zelo preprostim primerom, ki rešuje skoraj vsakodnevno težavo: popolna sredinska poravnava. Uporaba flexboxa ne bi mogla biti enostavnejša:

Nadrejeni (zaslon: flex; višina: 300 slikovnih pik; / * Ali karkoli * /) .child (širina: 100 slikovnih pik; / * Ali karkoli * / višina: 100 slikovnih pik; / * Ali karkoli * / margin: auto; / * Magic ! * / )

Ta primer temelji na dejstvu, da lastnost margin, nastavljena na samodejno, porabi dodaten prostor. Zato ta nastavitev zamika poravna element natančno na sredino obeh osi.

Zdaj pa uporabimo še nekaj lastnosti. Recimo, da imamo seznam 6 elementov, vsi so fiksne velikosti ( za estetiko), vendar z možnostjo samodejnega polnjenja.

Želimo, da so lepi, enakomerno razporejeni vzdolž vodoravne osi, tako da je ob spremembi velikosti okna brskalnika vse videti dobro ( brez uporabe medijskih poizvedb):

Flex-container (/ * Najprej ustvarite kontekst fleksibilne postavitve * / display: flex; / * Nato določite smer toka in če želimo, da se elementi zavijejo. * Ne pozabite, da je to isto kot: * flex-direction : row; * flex-wrap: wrap; * / flex-flow: row wrap; / * Zdaj definiramo, kako dodeliti preostali prostor * / justify-content: space-around;)

Pripravljen! Vse ostalo je že vprašanje oblikovanja. Tukaj je demo tega primera. Sledite povezavi in poskusite spremeniti velikost okna, da vidite, kaj se zgodi:

HTML:

CSS:

Flex-vsebnik (oblazinjenje: 0; rob: 0; slog seznama: brez; zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; -webkit-flex-flow: previjanje vrstice; justify-content: space-around;). flex-item (ozadje: paradižnik; oblazinjenje: 5px; širina: 200px; višina: 150px; rob-vrh: 10px; višina vrstice: 150px; barva: bela; teža pisave: krepko; velikost pisave: 3em; poravnava besedila: središče;)

Poskusimo še eno stvar. Recimo, da imamo desno poravnan navigacijski meni na samem vrhu našega spletnega mesta, vendar želimo, da je osredotočen na srednje velike zaslone in en stolpec na majhnih napravah. Vse je precej preprosto:

CSS:

/ * Veliki zasloni * / .navigacija (zaslon: flex; flex-flow: previjanje vrstice; / * Poravnajte elemente na konec vrstice vzdolž glavne osi * / justify-content: flex-end;) / * srednji zasloni * / @media all in (max-width: 800px) (.navigation (/ * Pri srednjih zaslonih centriramo elemente enakomerno porazdelili prosti prostor med njimi * / justify-content: space-around;)) / * Majhni zasloni * / @media all in (max-width: 500px) (.navigation (/ * Za majhne zaslone uporabljamo stolpce in ne vrstice * / flex-direction: column;))

HTML:

CSS:

Navigacija (slog seznama: brez; rob: 0; ozadje: deepskyblue; zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; -webkit -flex-flow: prevleka vrstice; justify-content: flex-end;) .navigacija a (okrasitev besedila: brez; prikaz: blok; oblazinjenje: 1em; barva: bela;) .navigacija a: lebdenje (ozadje: zatemnitev ( deepskyblue, 2%);) @media all in (max-width: 800px) (.navigation (justify-content: space-around;)) @media all in (max-width: 600px) (.navigation (-webkit- flex-flow: prevleka stolpca; flex-flow: prevleka stolpca; padding: 0;). navigacija a (poravnava besedila: središče; oblazinjenje: 10px; obroba-vrh: 1px trdna rgba (255,255,255,0,3); obroba-dno: 1px trdni rgba (0,0,0,0.1);). Navigacija li: zadnji-od-vrste a (border-bottom: brez;))

Poskusimo še bolje, tako da se poigramo s "fleksibilnostjo" flex predmetov. Kaj pa mobilna postavitev s tremi stolpci z glavo in nogo celotne širine? In z izhodom elementov, neodvisnim od vrstnega reda, ki ga poda izvorna koda:

CSS:

Ovitek (zaslon: flex; flex-flow: row wrap;) / * Vse elemente nastavite na 100 % širine * / .header, .main, .nav, .aside, .footer (flex: 1 100 %;) / * In v tem primeru se zanašamo na prvotni vrstni red za ciljanje na mobilne naprave: * 1. naslov * 2. navigacija * 3. telo * 4. stranska vrstica * 5. noga * / / * srednji zasloni * / @media vsi in (min -width : 600px) (/ * Obe stranski vrstici sta v isti vrstici * / .aside (flex: 1 auto;)) / * Veliki zasloni * / @media all in (min-width: 800px) (/ * Obrni vrstni red prikaza, prvo stransko vrstico in glavno telo ter povejte glavnemu elementu, naj zavzame največ dvakrat več prostora kot dve stranski vrstici * / .main (flex: 2 0px;) .aside-1 (order: 1;) .main (order : 2;) .na stran-2 (vrstni red: 3;) .noga (vrstni red: 4;))

HTML:

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

CSS:

Ovitek (zaslon: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex; -webkit-flex-flow: ovijanje vrstice; flex-flow: previjanje vrstice ; font-weight: krepko; text-align: center;) .wrapper> * (oblazinjenje: 10px; flex: 1 100%;) .header (ozadje: paradižnik;) .footer (ozadje: svetlo zeleno;) .main (besedilo -align: levo; ozadje: deepskyblue;) .aside-1 (ozadje: zlato;) .aside-2 (ozadje: hotpink;) @media all and (min-width: 600px) (.aside (flex: 1 auto;) )) @media all in (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (red: 2;) .aside-2 (order: 3; ) .noga (vrstni red: 4;))

Uporaba predpon flexbox

Flexbox zahteva, da večina brskalnikov podpira predpone proizvajalca. To vključuje ne samo uporabo predpon prodajalca pred lastnostmi, ampak popolnoma drugačna imena in vrednosti lastnosti.

To je zato, ker se je specifikacija flexboxa sčasoma razvila in ustvarila "stare", "tweener" in "nove" različice.

Morda je najboljši izhod iz te situacije, da napišete kodo z uporabo nove (in končne) sintakse in zaženete CSS prek Autoprefixerja, ki zelo dobro obvladuje vrnitve.

Druga možnost je, da je spodaj metoda Sass @mixin za pomoč pri nekaterih predponah, ki tudi daje idejo o tem, kaj je treba sprejeti:

SCSS:

@mixin flexbox () (prikaz: -webkit-box; zaslon: -moz-box; zaslon: -ms-flexbox; zaslon: -webkit-flex; zaslon: flex;) @mixin flex (vrednosti $) (-webkit- box-flex: $ vrednosti; -moz-box-flex: $ vrednosti; -webkit-flex: $ vrednosti; -ms-flex: $ vrednosti; flex: $ vrednosti;) @mixin vrstni red ($ val) (-webkit- box-ordinal-group: $ val; -moz-box-ordinal-group: $ val; -ms-flex-order: $ val; -webkit-order: $ val; vrstni red: $ val;) .wrapper (@include flexbox ();) .item (@include flex (1 200px); @include order (2);)

Podpora za brskalnik

Razdeljeno po "različicah" flexboxa na:

(novo) - pomeni podporo za najnovejšo sintakso iz specifikacije (npr. zaslon: flex;
Psevdoelement barve nadomestnega mesta :: (ali v nekaterih primerih psevdorazred) vam omogoča, da določite vsebino besedila elementa obrazca. Nastavi se s pomočjo atributa placeholdera: .

Vsebina:

Flexbox je nov način razporejanja blokov na strani. To je tehnologija, ustvarjena posebej za postavitev elementov, v nasprotju s plovci. Z uporabo Flexbox elemente lahko enostavno poravnate vodoravno in navpično, spremenite smer in vrstni red elementov, raztegnete bloke na celotno višino nadrejenega ali jih pribijete na spodnji rob.

UPD od 02.02.2017: je naredil priročno goljufanje flexboxa, s predstavitvami v živo in opisi iz specifikacije: Flexbox cheatsheet.

Primeri uporabljajo samo novo sintakso. V času tega pisanja so najbolj pravilno prikazani v Chrome... V Firefoxu delujejo delno, v Safariju sploh ne delujejo.

Glede na caniuse.com, Flexbox IE 8 in 9 ter Opera Mini ne podpirata in v drugih brskalnikih niso potrebne vse lastnosti in/ali predpone.

To pomeni, da tehnologije trenutno ni mogoče široko uporabljati, vendar je skrajni čas, da jo bolje spoznamo.

Najprej morate vedeti, da so flex elementi postavljeni vzdolž osi. Privzeto so predmeti razporejeni vodoravno - vzdolž glavna os- glavna os.

Prav tako je treba upoštevati, da pri uporabi Flexbox float, clear in vertical-align ne delujejo za notranje bloke, kot tudi lastnosti, ki nastavljajo stolpce v besedilu.

Pripravimo poligon za poskuse:

En starševski blok (rumen) in 5 otrok.

Zaslon: flex

In zdaj dodajte display: flex nadrejenemu elementu; ... Notranji divji so razvrščeni (vzdolž glavne osi) v stolpce enake višine, ne glede na vsebino.

zaslon: flex; naredi vse otroke prilagodljive - upogljive, ne v vrstice ali bloke, kot so bili prvotno.

Če nadrejeni blok vsebuje slike ali besedilo brez ovojov, postanejo anonimni flex elementi.

Prikaži lastnost za Flexbox lahko ima dve vrednosti:

flex - se obnaša kot blok element. Pri izračunu širine blokov ima prednost postavitev (če je širina blokov nezadostna, lahko vsebina leze iz meje).

inline-flex - se obnaša kot inline-block. Prednost vsebine (vsebina razširi bloke na zahtevano širino, tako da se črte čim bolj prilegajo).

Flex-smer

Smer postavitve polj nadzoruje lastnost flex-direction.

Možne vrednosti:

vrstica - vrstica (privzeta vrednost); row-reverse - vrstica z elementi v obratnem vrstnem redu; stolpec - stolpec; stolpec-reverse - stolpec z elementi v obratnem vrstnem redu.

vrstica in vrstica obratno

stolpec in stolpec-reverz

Flex-wrap

V eni vrstici je lahko veliko blokov. Ali se zavijejo ali ne, je določeno z lastnostjo flex-wrap.

Možne vrednosti:

nowrap - bloki niso zaviti (privzeto); zaviti - bloki so zaviti; wrap-reverse - bloki so zaviti in postavljeni v obratnem vrstnem redu.

Če želite na kratko napisati lastnosti flex-direction in flex-wrap, obstaja lastnost: flex-flow.

Možne vrednosti: nastavite lahko obe lastnosti ali samo eno. Na primer:

flex-flow: kolona; flex-flow: zaviti-obrniti; flex-flow: kolon-reverzni ovoj;

Demo za vrstico-obrnjeno previjanje-obrnjeno:

Naročite

Lastnost order se uporablja za nadzor vrstnega reda blokov.

Možne vrednosti: številke. Če želite blok postaviti na prvo mesto, mu nastavite vrstni red: -1:

Upraviči vsebino

Obstaja več lastnosti za poravnavo elementov: justify-content, align-items in align-self.

justify-content in align-items veljata za nadrejeni vsebnik, align-self za otroke.

justify-content je odgovoren za poravnavo z glavno osjo.

Možne vrednosti za justify-content:

flex-start - elementi so poravnani od začetka glavne osi (privzeto); flex-end - elementi so poravnani s konca glavne osi; center - elementi so poravnani s središčem glavne osi; prostor med - elementi so poravnani vzdolž glavne osi in med seboj porazdelijo prosti prostor; space-around - predmeti so poravnani vzdolž glavne osi in porazdelijo prosti prostor okoli njih.

flex-start in flex-end

prostor-med, prostor-naokrog

Poravnajte elemente

align-items je odgovoren za pravokotno poravnavo osi.

Možne vrednosti za elemente poravnave:

flex-start - elementi so poravnani od začetka pravokotne osi; flex-end - elementi so poravnani s konca pravokotne osi; center - predmeti so centrirani; osnovna črta - elementi so poravnani z osnovno črto; stretch - Elementi so raztegnjeni, da zapolnijo ves prostor vzdolž pravokotne osi (privzeto).

flex-start, flex-end

osnovna linija, razteg

Poravnaj-sebe

align-self je odgovoren tudi za poravnavo pravokotne osi, vendar je nastavljen na posamezne flex elemente.

Možne vrednosti poravnave:

samodejno je privzeto. Pomeni, da element uporablja elemente poravnave nadrejenega elementa; flex-start - element je poravnan od začetka pravokotne osi; flex-end - element je poravnan s konca pravokotne osi; center - element je centriran; osnovna črta - element je poravnan z osnovno črto; stretch - Element je raztegnjen, da zapolni celotno višino.

Poravnaj vsebino

Za nadzor poravnave znotraj večvrstičnega flex vsebnika obstaja lastnost align-content.

Možne vrednosti:

flex-start - elementi so poravnani od začetka glavne osi; flex-end - elementi so poravnani s konca glavne osi; center - elementi so poravnani s središčem glavne osi; prostor med - elementi so poravnani vzdolž glavne osi in med seboj porazdelijo prosti prostor; prostor okoli - elementi so poravnani vzdolž glavne osi, tako da se okoli njih porazdeli prosti prostor; stretch - Elementi se raztegnejo, da zapolnijo celotno višino (privzeto).

flex-start, flex-end

središče, razteg

prostor-med, prostor-naokrog

ps: Nekaterih stvari nisem mogel videti v akciji, na primer vrstice flex-flow: column wrap ali celotnega zapisa iste flex-direction: column; flex-wrap: zaviti; ...

Elementi so zloženi, vendar se ne prenašajo:

Wrap se ne sproži, ko flex-direction: column; , čeprav v specifikaciji izgleda takole:

Mislim, da bo sčasoma delovalo.

UPD od 21.6.2014: vse deluje, če daš bloku višino. Hvala za namig

Namen modula Flexbox Layout (Flexible Box) je zagotoviti učinkovitejši način pozicioniranja, poravnave in porazdelitve prostega prostora med elementi v vsebniku, tudi če je njihova velikost neznana in/ali dinamična (od tod beseda "flex").

Osnovna ideja prilagodljivih postavitev je omogočiti vsebniku možnost spreminjanja širine/višine (in vrstnega reda) svojih elementov, da bi najbolje zapolnili razpoložljivi prostor (predvsem, da se prilega vsem vrstam in velikostim zaslonov). Flexbox vsebnik razširi predmete, da zapolni prosti prostor, ali jih skrči, da se izogne prelivanju.

Najpomembneje je, da je Flexbox usmerjen agnostik, za razliko od običajnih postavitev (polje, ki temeljijo na navpičnem pozicioniranju in inline elementi, ki temeljijo na horizontalnem pozicioniranju). Čeprav delujejo dovolj dobro, jim primanjkuje fleksibilnosti za podporo velikih ali zapletenih aplikacij (zlasti ko gre za preusmeritev, spreminjanje velikosti, raztezanje, krčenje itd.).

Opomba. Flexbox je bolj primeren za komponente aplikacij in majhne postavitve, medtem ko je CSS Grid za večje postavitve.

Osnove in terminologija

Ker je Flexbox cel modul in ne ločena lastnost, vsebuje veliko različnih stvari, vključno s cel kup lastnosti. Nekateri od teh so zasnovani tako, da jih nastavite na njihov vsebnik (starševski, znan kot "flex vsebnik"), drugi pa morajo biti nastavljeni na podrejene (znane kot "fleksibilni elementi").

Medtem ko običajni sistem postavitve temelji na škatlastih in inline smereh, Flexbox temelji na "smerih flex-flow". Oglejte si to sliko iz specifikacije, da razložite osnovno idejo za Flexbox.

V bistvu bodo elementi nameščeni vzdolž glavna os(od glavnega začetka do glavnega konca) oz prečna os(od navzkrižnega začetka do prečnega konca).

Podpora za brskalnik

Modul prilagodljive postavitve škatle CSS

Chrome za Android

Brskalnik Blackberry, začenši z različico 10, podpira novo sintakso.

Lastnosti za posodo

Lastnosti elementov

Lastnosti za nadrejeno (Flex Container)

prikazovalniku

Definira flex vsebnik; niz ali blok je odvisen od posredovane vrednosti. Vključuje prilagodljiv kontekst za vse njegove neposredne otroke.

Vsebnik (prikaz: flex; / * ali inline-flex * /)

Upoštevajte, da stolpci CSS ne vplivajo na vsebnik flex.

flex-smer

Nastavi glavno os in tako določi smer elementov, ki se nahajajo v vsebniku. Flexbox (poleg izbirnega ovoja) je koncept enosmerne postavitve. Zamislite si prilagodljive elemente predvsem kot vodoravne vrstice ali navpične stolpce.

Vsebnik (upogibna smer: vrstica | vrstica-obrnjena | stolpec | stolpec-obrnjena;)

vrstica (privzeto)- od leve proti desni v ltr; od desne proti levi v rtl;
vrstica - obratno- od desne proti levi v ltr; od leve proti desni v rtl;
stolpec- enako kot vrsta, samo od zgoraj navzdol;
stolpec-obrnjeno- enako kot zaporedno obratno, samo od spodaj navzgor;

flex-wrap

Elementi bodo privzeto poskušali zapolniti samo eno vrstico. To vedenje lahko spremenite in po potrebi dovolite, da se elementi prelijejo v naslednjo vrstico.

Posoda (flex-wrap: nowrap | wrap | wrap-reverse;)

Nowrap (privzeto)- vsi flex elementi bodo nameščeni v eni vrstici;
zaviti- flex elementi bodo razporejeni v več vrsticah, od zgoraj navzdol;
zaviti-obrniti- flex elementi bodo razporejeni v več vrsticah, od spodaj navzgor;

opraviči vsebino

Določa poravnavo vzdolž glavne osi. To pomaga pri porazdelitvi prostega prostora, ki ostane po tem, ko vsi fiksni in nefiksirani flex elementi dosežejo največjo velikost. Prav tako vam pomaga ohraniti nekaj nadzora nad poravnavo elementov, ko preletijo črto.

Vsebnik (justify-content: flex-start | flex-end | center | space-between | space-around;)

flex-start (privzeto)- elementi so pritisnjeni na začetek vrstice;
flex-end- elementi so pritisnjeni do konca vrstice;
center- predmeti so centrirani vzdolž črte;
prostor-med- elementi so nameščeni enakomerno na liniji; prvi element je na začetku vrstice, zadnji element je na koncu vrstice;
prostor okoli- elementi so nameščeni enakomerno na liniji z enakim prostorom okoli njih. Upoštevajte, da vizualno prostor ni enak, saj imajo vsi elementi enak prostor na obeh straneh. Prvi element bo imel na strani posode eno prostorsko enoto, med njim in naslednjim elementom pa dve enoti, ker ima tudi naslednji element eno enoto na obeh straneh.

poravnajte elemente

Ta lastnost določa, kako se elementi flex obnašajo vzdolž prečne osi v trenutni vrstici. Pomislite na to kot o, samo za prečno os (pravokotno na glavno os).

Vsebnik (poravnaj-elementi: flex-start | flex-end | center | baseline | stretch;)

flex-start - elementi so nameščeni na začetku prečne osi;
flex-end - elementi so nameščeni na koncu prečne osi;
center - elementi se nahajajo v središču prečne osi;
osnovno linijo- elementi so poravnani z izhodiščem;
raztegniti (privzeto)- raztegnite, da napolnite celotno posodo (še vedno upoštevajte najmanjšo/maksimalno širino);

align-content

Opomba. Ta lastnost nima učinka, če je le ena vrstica prilagodljivih elementov.

flex-start- vrstice se nahajajo na začetku vsebnika;
flex-end- črte se nahajajo na koncu posode;
center- črte so postavljene na sredino posode;
prostor-med- vrstice so enakomerno razporejene, prva vrstica je na začetku posode, zadnja vrstica pa na koncu;
prostor okoli- črte so razporejene enakomerno, z enako razdaljo med njimi;
raztegniti (privzeto)- črte se raztezajo po celotni širini, da zavzamejo preostali prostor;

Lastnosti za otroke (fleksibilni predmeti)

naročilo

Privzeto so vsi elementi razvrščeni v prvotnem vrstnem redu. Vendar pa lastnost order nadzoruje vrstni red, v katerem so elementi razporejeni znotraj vsebnika.

Artikel (naročilo: ; }

flex-grow

Lastnost določa zmožnost elementa, da se po potrebi poveča. Kot delež vzame vrednost brez enote, ki določa, koliko prostega prostora v vsebniku naj element zaseda.

Če imajo vsi elementi flex-grow nastavljeno na 1, bo prosti prostor znotraj vsebnika enakomerno porazdeljen med vse elemente. Če ima eden od elementov vrednost 2, bo element zavzel dvakrat več prostora kot drugi (vsaj poskusil bo).

Artikel (flex-grow: ; / * privzeto 0 * /)

Negativnih številk ni mogoče določiti.

flex-osnova

Določa privzeto velikost elementa, preden se dodeli preostali prostor. Lahko je dolžina (20%, 5rem itd.) ali ključna beseda. Ključna beseda auto pomeni "pogledaj kot moja lastnost širine ali višine". Ključna beseda vsebine pomeni "velikost temelji na vsebini elementa" - ta ključna beseda še ni dobro podprta, zato jo je težko preizkusiti in še težje vedeti, kaj so njeni bratje in sestre min-content, max-content in fit-content delajo.

Artikel (flex-basis: | avto; / * privzeto samodejno * /)

Če je nastavljena na 0, se dodatni prostor okoli vsebine ne bo štel. Če je nastavljeno na samodejno, bo na podlagi vrednosti dodeljen dodaten prostor.

upogniti

To je okrajšava za in. Drugi in tretji parameter (flex-shrink in flex-basis) sta neobvezna. Privzeto je 0 1 samodejno.

Element (flex: brez | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

poravnaj-sebe

Ta lastnost vam omogoča, da preglasite privzeto (ali nabor lastnosti) poravnavo za posamezne flex elemente.

Za razumevanje razpoložljivih vrednosti si oglejte razlago lastnosti.

Upoštevajte, da float, clear in vertical-align nimajo vpliva na flex element.

Primeri

Začnimo z najpreprostejšim primerom, ki rešuje problem, ki se pojavlja skoraj vsak dan: popolno centriranje. Ne bi moglo biti lažje, če uporabljate Flexbox.

Nadrejeni (zaslon: flex; višina: 300px;) .child (širina: 100px; višina: 100px; rob: samodejno;)

Odvisno je od samodejnega roba vsebnika flex, ki absorbira dodaten prostor. Če nastavite navpični rob elementa na samodejno, bo element popolnoma centriran na obeh oseh.

Zdaj pa uporabimo še nekaj lastnosti. Razmislite o seznamu 6 elementov, ki so vsi estetsko določeni, vendar so lahko avtomatski. Želimo, da so enakomerno razporejeni vzdolž vodoravne osi in da so v redu, ko spremenite velikost brskalnika (brez medijskih poizvedb!).

Flex-container (prikaz: flex; flex-flow: row wrap; justify-content: space-around;)

Pripravljen! Vse ostalo je le nekaj težav pri oblikovanju. Spodaj je primer CodePen, ne pozabite pojdite tja in poskusite spremeniti velikost oken, da vidite, kaj se zgodi.

Poskusimo nekaj drugega. Predstavljajte si, da imamo desno poravnano navigacijo na samem vrhu zaslona, vendar želimo, da je osredotočena na srednje velike zaslone in en stolpec na majhnih zaslonih. Tako enostavno kot pita.

Navigacija (zaslon: flex; flex-flow: row wrap; justify-content: flex-end;) @media all in (max-width: 800px) (.navigation (justify-content: space-around;)) @media all in (maks. in (max-width: 500px) (.navigation (flex-direction: column;))

Poskusimo narediti nekaj še boljšega, tako da se poigramo s prilagodljivostjo naših flex predmetov! Kaj pa postavitev s tremi stolpci, ki je na prvem mestu v mobilnih napravah z glavo in nogo polne širine in ni odvisna od prvotnega vrstnega reda elementov.

Ovitek (zaslon: flex; flex-flow: row wrap;) .header, .main, .nav, .aside, .footer (flex: 1 100 %;) @media all in (min-width: 600px) (.aside (flex: 1 auto;)) @media all in (min-width: 800px) (.main (flex: 2 0px;) .aside-1 (order: 1;) .main (red: 2;) .aside- 2 (vrstni red: 3;) .noga (red: 4;))

Povezane lastnosti

Napake

Flexbox zagotovo ni brez napak. Najboljša zbirka, ki sem jo videl, prihaja iz Flexbugs Philipa Waltona in Grega Whitwortha. To je odprtokodno mesto za spremljanje vseh hroščev, zato mislim, da je najbolje, da samo objavite povezavo.

CSS flexbox (Modul prilagodljive postavitve škatle)- modul postavitve fleksibilnega vsebnika - je način razporeditve elementov, ki temelji na ideji osi.

Flexbox je sestavljen iz flex posoda in flex predmeti... Flex elemente je mogoče razporediti v vrstico ali stolpec, preostali prosti prostor pa je med njimi razporejen na različne načine.

Modul flexbox vam omogoča izpolnjevanje naslednjih nalog:

Predmete razporedite v eni od štirih smeri: od leve proti desni, od desne proti levi, od zgoraj navzdol ali od spodaj navzgor.
Preglasite vrstni red prikaza elementov.
Samodejno spremeni velikost elementov, da se prilegajo razpoložljivemu prostoru.
Rešite problem z vodoravnim in navpičnim centriranjem.
Predmete zavijte v posodo, ne da bi jih prelili.
Ustvarite stolpce enake višine.
Ustvari pripeto na dno strani.

Flexbox obravnava posebne potrebe ustvarjanja enodimenzionalnih postavitev, kot je navigacijska vrstica, saj je flex elemente mogoče razporediti samo vzdolž ene osi.

Za seznam trenutnih težav z moduli in rešitev za več brskalnikov glejte članek Philipa Waltona.

Kaj je flexbox

Podpora za brskalnik

IE: 11,0, 10,0 -ms-
Firefox: 28,0, 18,0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android brskalnik: 4.4, 4.1 -spletni komplet-
Chrome za Android: 44

1. Osnovni pojmi

riž. 1. Model flexbox

Za opis modula Flexbox se uporablja poseben niz izrazov. Vrednost flex-flow in način pisanja določata, kako ti izrazi ustrezajo fizičnim smerem: zgoraj / desno / spodaj / levo, osi: navpično / vodoravno in dimenzije: širina / višina.

Glavna os- os, vzdolž katere so razporejeni flex predmeti. Razširja se v glavni dimenziji.

Glavni začetek in glavni konec- črte, ki določajo začetno in končno stran flex vsebnika, glede na katere so razporejeni flex elementi (začenši od glavnega začetka proti glavnemu koncu).

Glavna velikost) – Širina ali višina fleksibilnega vsebnika ali flex elementov, kar je v osnovni dimenziji, določa osnovno velikost fleksibilnega vsebnika ali flex elementa.

Križna os- os, pravokotna na glavno os. Razteza se bočno.

Križni začetek in križni konec- Črte, ki določajo začetno in končno stran prečne osi, okoli katere so razporejeni flex elementi.

Križna velikost- širina ali višina fleksibilnega vsebnika ali fleksibilnih predmetov, kar je v prečni dimenziji, je njihova prečna dimenzija.

riž. 2. Način vrstice in stolpca

2. Flex posoda

Flex vsebnik nastavi nov prilagodljiv kontekst oblikovanja za svojo vsebino. Flex vsebnik ni blok vsebnik, zato lastnosti CSS, kot so float, clear, vertikalna poravnava, ne delujejo za podrejene elemente. Prav tako na vsebnik flex ne vplivajo lastnosti stolpca- *, ki ustvarjajo stolpce v besedilu ter psevdoelementi :: prva vrstica in :: prva črka.

Model postavitve flexbox je povezan z določeno vrednostjo v lastnosti prikaza CSS nadrejenega elementa html, ki vsebuje podrejena polja. Za nadzor elementov s tem modelom morate nastaviti lastnost prikaza na naslednji način:

Flex-container (/ * generira flex vsebnik na ravni blokov * / display: -webkit-flex; display: flex;). Flex-container (/ * generira flex vsebnik na ravni vrstice * / display: -webkit-inline- flex; zaslon: inline-flex;)

Po nastavitvi teh vrednosti lastnosti vsak otrok samodejno postane fleksibilen element, ki se postavi v eno vrstico (vzdolž glavne osi). Vendar se blokovni in inline otroci obnašajo enako, t.j. širina blokov je enaka širini njihove vsebine, ob upoštevanju oblazinjenja in robov elementa.

riž. 3. Poravnava elementov v modelu flexbox

Če nadrejeni blok vsebuje besedilo ali slike brez ovojov, postanejo anonimni flex elementi. Besedilo je poravnano na zgornji rob bloka vsebnika, višina slike pa postane enaka višini bloka, t.j. se deformira.

3. Flex predmeti

Flex elementi so bloki, ki predstavljajo vsebino flex vsebnika v toku. Flex vsebnik nastavi nov kontekst oblikovanja za svojo vsebino, ki zagotavlja naslednje funkcije:

Za prilagodljive elemente je njihova vrednost lastnosti prikaza zaklenjena. Prikazna vrednost: inline-block; in prikaz: celica tabele; ocenjeno na zaslonu: blok; ...
Presledki med elementi izginejo: ne postane lasten flex element, tudi če je besedilo med postavkami zavito v anonimni flex postavko. Vsebine anonimne flex postavke ni mogoče oblikovati samostojno, vendar jo bo podedoval (kot so nastavitve pisave) iz vsebnika flex.
Absolutno pozicioniran flex element ne sodeluje pri postavitvi flex postavitve.
Obrobna polja sosednjih prilagodljivih elementov se ne strnejo.
Odstotki robov in polnila se izračunajo iz notranje velikosti vsebnega bloka.
marža: samodejno; razširiti in absorbirati dodaten prostor v ustrezni dimenziji. Uporabljajo se lahko za poravnavo ali razširitev sosednjih flex elementov.
Privzeta samodejna najmanjša velikost za flex elemente je najmanjša velikost njegove vsebine, to je najmanjša širina: auto; ... Za drsne posode je avtomatska najmanjša velikost običajno enaka nič.

4. Prikaz vrstnega reda prilagodljivih elementov in orientacije

Vsebino flex vsebnika je mogoče razporediti v katero koli smer in v poljubnem vrstnem redu (preureditev flex elementov znotraj vsebnika vpliva samo na vizualno upodabljanje).

4.1. Smer glavne osi: flex-direction

Lastnost je specifična za flex kontejner. Nadzira smer glavne osi, vzdolž katere so zloženi elementi fleksibilnosti v skladu s trenutnim načinom pisanja. Ni podedovano.

flex-smer
Vrednote:
vrstico	Privzeto je od leve proti desni (v rtl, od desne proti levi). Flex elementi so razporejeni na vrstico. Smer glavnega začetka in glavnega konca glavne osi ustrezata zagonu v vrstici in koncu v vrstici inline osi.
vrstica - obratno	Smer od desne proti levi (v rtl od leve proti desni). Flex elementi so razporejeni v vrstico glede na desni rob vsebnika (v rtl - levo).
stolpec	Smer od zgoraj navzdol. Flex elementi so razporejeni v stolpec.
stolpec-obrnjeno	Stolpec z elementi v obratnem vrstnem redu, od spodaj navzgor.
začetni
podedovati

riž. 4. Lastnost flex-direction za jezike od leve proti desni

Sintaksa

Flex-vsebnik (zaslon: -webkit-flex; -webkit-flex-direction: row-reverse; zaslon: flex; flex-direction: row-reverse;)

4.2. Nadzor večvrstičnega vsebnika flex: flex-wrap

Lastnost določa, ali bo flex vsebnik enovrstični ali večvrstični, in nastavi tudi smer prečne osi, ki določa smer, v kateri so zložene nove vrstice vsebnika flex.

Privzeto so prilagodljivi elementi zloženi v eno vrstico, vzdolž glavne osi. Če se prelijejo, bodo šli izven omejevalnega okvirja flex vsebnika. Lastnina ni podedovana.

riž. 5. Nadzor več vrstic z lastnostjo Flex-Wrap za jezike LTR

Sintaksa

Flex-container (zaslon: -webkit-flex; -webkit-flex-wrap: zaviti; zaslon: flex; flex-wrap: zaviti;)

4.3. Okrajšava za smer in večvrstično: flex-flow

Lastnost vam omogoča, da določite smeri glavne in prečne osi, kot tudi možnost, da po potrebi ovijete prilagodljive elemente v več vrsticah. To je okrajšava za lastnosti flex-direction in flex-wrap. Privzeti flex-flow: row nowrap; ... premoženje ni podedovano.

Sintaksa

Flex-container (display: -webkit-flex; -webkit-flex-flow: row wrap; display: flex; flex-flow: row wrap;)

4.4. Prikaz vrstnega reda prilagodljivih elementov: vrstni red

Lastnost določa vrstni red, v katerem so prikazani in pozicionirani flex elementi znotraj vsebnika flex. Velja za flex predmete. Lastnina ni podedovana.

Na začetku imajo vsi flex elementi vrstni red: 0; ... Če za element podate vrednost med -1, se ta premakne na začetek časovne osi in vrednost 1 na konec. Če ima več prilagodljivih elementov enako vrednost naročila, bodo prikazani v skladu z njihovim prvotnim vrstnim redom.

Sintaksa

Flex-container (prikaz: -webkit-flex; zaslon: flex;) .flex-item (-webkit-order: 1; naročilo: 1;)
riž. 6. Prikaz vrstnega reda prilagodljivih elementov

5. Prilagodljivost fleksibilnih predmetov

Določujoč vidik prilagodljive postavitve je zmožnost "zlaganja" prilagodljivih elementov s spreminjanjem njihove širine/višine (odvisno od tega, katera velikost je na glavni osi), da se zapolni razpoložljivi prostor v osnovni dimenziji. To se naredi z lastnostjo flex. Flex vsebnik dodeli prosti prostor med svojimi podrejenimi (sorazmerno z njihovim razmerjem upogibanja in rasti), da napolni vsebnik, ali jih skrči (sorazmerno z razmerjem upognjenega krčenja), da prepreči prelivanje.

Flex element bo popolnoma neprilagodljiv, če sta njegovi vrednosti flex-grow in flex-shrink enaki nič, v nasprotnem primeru pa flex.

5.1. Prilagodljiva velikost z eno lastnostjo: flex

Lastnost je okrajšava za lastnosti flex-grow, flex-shrink in flex-basis. Privzeta vrednost: flex: 0 1 auto; ... Določite lahko eno ali vse tri vrednosti lastnosti. Lastnina ni podedovana.

Sintaksa

Flex-container (prikaz: -webkit-flex; zaslon: flex;) .flex-item (-webkit-flex: 3 1 100px; -ms-flex: 3 1 100px; flex: 3 1 100px;)

5.2. Stopnja rasti: flex-grow

Lastnost nadzira, koliko bo en flex element zrasel glede na druge flex elemente v flex vsebniku pri dodelitvi pozitivnega belega prostora. Če je vsota vrednosti flex-grow elementov flex v vrstici manjša od 1, zavzamejo manj kot 100 % prostega prostora. Lastnina ni podedovana.

riž. 7. Upravljanje prostega prostora v navigacijski vrstici s flex-grow

Sintaksa

Flex-container (prikaz: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-grow: 3; flex-grow: 3;)

5.3. Razmerje krčenja: flex-shrink

Lastnost določa, koliko se bo flex postavka skrčila glede na druge flex postavke pri dodelitvi negativnega belega prostora. Pomnoženo z osnovno velikostjo flex-basis. Negativni prostor se dodeli sorazmerno s tem, koliko se lahko element skrči, tako da se na primer majhen flex element ne bo skrčil na nič, dokler se večji flex element ni vidno skrčil. Lastnina ni podedovana.

riž. 8. Zoženje flex elementov v vrsti

Sintaksa

Flex-posoda (zaslon: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-shrink: 3; flex-shrink: 3;)

5.4. Osnovna velikost: flex-basis

Lastnost nastavi začetno osnovno velikost elementa flex, preden se dodeli prosti prostor glede na razmerja flex. Za vse vrednosti, razen za samodejno in vsebino, je osnovna velikost flex definirana na enak način kot širina v horizontalnih načinih pisanja. Odstotki so relativni glede na velikost vsebnika flex, in če velikost ni podana, je vrednost, uporabljena za flex-basis, velikost njegove vsebine. Ni podedovano.

Sintaksa

Flex-container (prikaz: -webkit-flex; zaslon: flex;). Flex-item (-webkit-flex-basis: 100px; flex-basis: 100px;)

6. Poravnava

6.1. Poravnava glavne osi: justify-content

Lastnost poravna flex elemente na glavno os flex vsebnika tako, da porazdeli prosti prostor, ki ga ne zasedajo flex elementi. Ko se element pretvori v prilagodljiv vsebnik, so flex elementi privzeto združeni (razen če imajo zanje nastavljen rob). Razmik se doda po izračunu vrednosti marže in flex-grow. Če imajo kateri koli elementi neničelno flex-grow ali margin: auto; , nepremičnina ne bo imela učinka. Lastnina ni podedovana.


Vrednote:
flex-start	Privzeta vrednost. Flex predmeti so razporejeni v smeri stran od začetne črte flex vsebnika.
flex-end	Flex predmeti so razporejeni v smeri stran od končne črte flex vsebnika.
center	Flex elementi so poravnani na sredino flex vsebnika.
prostor-med	Flex predmeti so enakomerno razporejeni vzdolž črte. Prvi flex element je nameščen poravnano z robom začetne vrstice, zadnji flex element je poravnan z robom končne črte, preostali upogljivi elementi na vrstici pa so razmaknjeni tako, da je prostor med katerima koli sosednjima elementoma je enako. Če je preostali presledek negativen ali če je na vrstico samo en element flex, je ta vrednost identična parametru flex-start.
prostor okoli	Flex elementi na vrstici so razporejeni tako, da je razdalja med katerima koli sosednjima flex elementoma enaka, razdalja med prvim/zadnjim flex elementom in robovi vsebnika flex pa je polovica razdalje med flex elementoma.
začetni	Nastavi vrednost lastnosti na privzeto vrednost.
podedovati	Podeduje vrednost lastnosti od nadrejenega elementa.

riž. 9. Poravnava elementov in dodelitev prostega prostora z uporabo lastnosti Justify-Content

Sintaksa

Flex-vsebnik (prikaz: -webkit-flex; -webkit-justify-content: flex-start; zaslon: flex; justify-content: flex-start;)

6.2. Poravnava čez os: align-items in align-self

Elemente Flex je mogoče poravnati s prečno osjo trenutne vrstice vsebnika flex. align-items nastavi poravnavo za vse elemente vsebnika flex, vključno z anonimnimi flex elementi. align-self vam omogoča, da preglasite to poravnavo za posamezne flex elemente. Če je kateri koli od prečnih robov flex elementa samodejni, align-self nima učinka.

6.2.1. Poravnajte elemente

Poravna flex elemente, vključno z anonimnimi flex elementi, vzdolž prečne osi. Ni podedovano.


Vrednote:
flex-start
flex-end
center
osnovno linijo	Izhodišča vseh flex elementov, vključenih v poravnavo, so enaka.
raztegniti
začetni	Nastavi vrednost lastnosti na privzeto vrednost.
podedovati	Podeduje vrednost lastnosti od nadrejenega elementa.

riž. 10. Poravnajte predmete v posodi navpično

Sintaksa

Flex-container (prikaz: -webkit-flex; -webkit-align-items: flex-start; zaslon: flex; align-items: flex-start;)

6.2.2. Poravnaj-sebe

Lastnost je odgovorna za poravnavo posameznega flex elementa na višino flex vsebnika. Preglasi poravnavo, določeno z align-items. Ni podedovano.


Vrednote:
avto	Privzeta vrednost. Element flex uporablja poravnavo, določeno v lastnosti align-items vsebnika flex.
flex-start	Zgornji rob flex elementa je nameščen poravnano z upogibno črto (ali razmikom, glede na določen rob in obrobo elementa), ki poteka skozi izvor prečne osi.
flex-end	Spodnji rob flex elementa je nameščen poravnano z upogibno črto (ali razmikom, glede na podani rob in obrobo elementa), ki poteka skozi konec prečne osi.
center	Robovi upogljivega elementa so osredotočeni na prečno os znotraj upogibne črte.
osnovno linijo	Flex element je poravnan z osnovno črto.
raztegniti	Če je navzkrižna velikost elementa flex samodejno in nobeden od navzkrižnih robov ni samodejno, je postavka raztegnjena. Privzeta vrednost.
začetni	Nastavi vrednost lastnosti na privzeto vrednost.
podedovati	Podeduje vrednost lastnosti od nadrejenega elementa.

riž. 11. Poravnajte posamezne flex elemente

Sintaksa

Flex-vsebnik (zaslon: -webkit-flex; zaslon: flex;). Flex-item (-webkit-align-self: center; align-self: center;)

6.3. Poravnava vrstic flex vsebnika: align-content

Lastnost poravna vrstice v fleksibilnem vsebniku, ko je na prečni osi dodaten prostor, podobno kot pri poravnavi posameznih elementov na glavni osi z uporabo lastnosti justify-content. Lastnost nima vpliva na enoplastni flex kontejner. Ni podedovano.


Vrednote:
flex-start	Vrstice so zložene proti začetku flex vsebnika. Rob prve vrstice je nameščen blizu roba flex vsebnika, vsaka naslednja vrstica je nameščena blizu prejšnje vrstice.
flex-end	Vrvice so zložene proti koncu fleksibilne posode. Rob zadnje vrstice je nameščen blizu roba flex vsebnika, vsaka prejšnja vrstica je nameščena blizu naslednje vrstice.
center	Vrvice so zložene proti sredini fleksibilne posode. Vrstice so blizu druga drugi in poravnane s središčem vsebnika flex z enakim razmikom med začetnim robom vsebine flex vsebnika in prvo vrstico ter med končnim robom vsebine vsebnika flex in zadnjo vrstico.
prostor-med	Vrstice so v flex posodi enakomerno razporejene. Če je preostali prosti prostor negativen ali je v flex vsebniku samo ena flex vrstica, je ta vrednost identična flex-start. V nasprotnem primeru je rob prve vrstice nameščen blizu začetnega roba vsebine vsebnika flex, rob zadnje vrstice pa je nameščen blizu zadnjega roba vsebine vsebnika flex. Preostale vrstice so razporejene tako, da je razdalja med katerima koli sosednjima črtama enaka.
prostor okoli	Vrsti so enakomerno razporejene v fleksibilni posodi s polovičnim prostorom na obeh koncih. Če je preostali prosti prostor negativen, je ta vrednost enaka središču centov. V nasprotnem primeru so vrstice razmaknjene tako, da je razmik med katerima koli sosednjima vrsticama enak, razmik med prvimi/zadnjimi vrsticami in robovi vsebine flex vsebnika pa je polovica razmika med vrsticama.
raztegniti	Privzeta vrednost. Vrstice fleksibilnih predmetov se enakomerno raztegnejo, da zapolnijo ves razpoložljivi prostor. Če je preostali prosti prostor negativen, je ta vrednost enaka flex-start. V nasprotnem primeru bo prosti prostor enakomerno razdeljen med vse črte, kar bo povečalo njihovo stransko velikost.
začetni	Nastavi vrednost lastnosti na privzeto vrednost.
podedovati	Podeduje vrednost lastnosti od nadrejenega elementa.

riž. 12. Večvrstična poravnava flex elementov

Sintaksa

Flex-vsebnik (zaslon: -webkit-flex; -webkit-flex-flow: ovijanje vrstice; -webkit-align-content: flex-end; zaslon: flex; flex-flow: previjanje vrstice; align-content: flex-end ; višina: 100px;)

Eden od razlogov, da je flexbox hitro pritegnil zanimanje spletnih razvijalcev, je ta, da je v splet prvič prinesel ustrezne zmožnosti poravnave. Omogočil je pravilno navpično poravnavo, tako da lahko končno zlahka centriramo škatlo. V tem priročniku si bomo podrobno ogledali, kako delujejo lastnosti poravnave in poravnave v Flexboxu.

Za centriranje našega polja uporabljamo lastnost align-items, da poravnamo naš element na prečni osi, ki je v tem primeru os bloka, ki teče navpično. Za poravnavo elementa na glavni osi uporabljamo justify-content, ki v tem primeru poteka vodoravno inline os.

Spodaj si lahko ogledate kodo tega primera. Spremenite velikost vsebnika ali ugnezdenega elementa in ugnezdeni element vedno ostane na sredini.

Lastnosti, ki nadzorujejo poravnavo

Lastnosti, ki si jih bomo ogledali v tem priročniku, so naslednje.

justify-content - nadzoruje poravnavo vseh elementov na glavni osi.
align-items - nadzoruje poravnavo vseh elementov na prečni osi.
align-self - nadzoruje poravnavo posameznega flex elementa na prečni osi.
align-content - opisano v specifikaciji kot za “pakiranje flex lines”; nadzoruje prostor med upogibnimi črtami na prečni osi.

Odkrili bomo tudi, kako je mogoče uporabiti samodejne robove za poravnavo v flexboxu.

Opomba: Lastnosti poravnave v Flexboxu so bile umeščene v lastno specifikacijo - CSS Box Alignment Level 3. Pričakuje se, da bo ta specifikacija na koncu nadomestila lastnosti, kot so opredeljene v Flexbox Level One.

Prečna os

Align-items in lastnosti align-self nadzorujejo poravnavo naših flex elementov na prečni osi, navzdol po stolpcih, če je flex-direction vrstica, in vzdolž vrstice, če je flex-direction stolpec.

Uporabljamo navzkrižno osno poravnavo v najbolj preprostem primeru fleksibilnosti. Če vsebniku dodamo display: flex, vsi podrejeni elementi postanejo flex elementi, razporejeni v vrsti. Vsi se bodo raztegnili tako, da bodo visoki kot najvišji predmet, saj ta element določa višino elementov na prečni osi. Če ima vaš flex vsebnik nastavljeno višino, se bodo elementi raztegnili na to višino, ne glede na to, koliko vsebine je v elementu.

Razlog, da elementi postanejo enake višine, je ta, da je začetna vrednost align-items, lastnost, ki nadzoruje poravnavo na prečni osi, nastavljena na raztezanje.

Za nadzor nad tem, kako se elementi poravnajo, lahko uporabimo druge vrednosti:

align-items: flex-start
align-items: flex-end
align-items: center
align-items: raztegniti
align-items: baseline

V spodnjem primeru v živo je vrednost align-items stretch. Preizkusite druge vrednosti in si oglejte, kako so vsi elementi poravnani drug proti drugemu v flex vsebniku.

Poravnava enega elementa z align-self

Lastnost align-items nastavi lastnost align-self za vse elemente flex kot skupino. To pomeni, da lahko lastnost align-self izrecno navedete za ciljanje na en element. Lastnost align-self sprejema vse enake vrednosti kot align-items plus vrednost auto, ki bo ponastavila vrednost na tisto, ki je definirana v vsebniku flex.

V tem naslednjem živem primeru ima vsebnik flex elemente align-items: flex-start, kar pomeni, da so vsi elementi poravnani na začetek prečne osi. Ciljal sem na prvi element z uporabo izbirnika prvega otroka in ta element nastavil na align-self: stretch; drug element je bil izbran s svojim razredom izbranega in danega align-self: center. Lahko spremenite vrednost align-items ali spremenite vrednosti align-self za posamezne elemente, da vidite, kako to deluje.

Spreminjanje glavne osi

Do sedaj smo si ogledali vedenje, ko je naša flex-smer vrstica in med delom v jeziku, napisanem od zgoraj navzdol. To pomeni, da glavna os poteka vzdolž vrstice vodoravno, naša poravnava navzkrižne osi pa premika elemente gor in dol.

Če spremenimo našo flex-direction v stolpec, bosta align-items in align-self postavke poravnala levo in desno.

To lahko preizkusite v spodnjem primeru, ki ima vsebnik flex s stolpcem flex-direction:, sicer pa je popolnoma enak prejšnjemu primeru.

Poravnava vsebine na prečni osi - lastnost align-content

Doslej smo poravnali elemente ali posamezen element znotraj območja, ki ga definira flex-container. Če imate zavit večvrstični flex vsebnik, boste morda želeli uporabiti tudi lastnost align-content za nadzor porazdelitve prostora med vrsticami. V specifikaciji je to opisano kot pakiranje flex linij.

Za delovanje align-content potrebujete večjo višino v flex vsebniku, kot je potrebna za prikaz elementov. Nato deluje na vse elemente kot nabor in narekuje, kaj se zgodi s tem prostim prostorom in poravnavo celotnega nabora elementov v njem.

Lastnost align-content ima naslednje vrednosti:

align-content: flex-start
align-content: flex-end
align-content: center
align-content: presledek-med
align-content: space-around
align-content: raztegni
align-content: space-enly (ni definirano v specifikaciji Flexbox)

V spodnjem primeru v živo ima vsebnik flex višino 400 slikovnih pik, kar je več kot potrebno za prikaz naših predmetov. Vrednost align-content je space-between, kar pomeni, da se razpoložljivi prostor deli med upogibne črte, ki so nameščene poravnano z začetkom in koncem posode na prečni osi.

Preizkusite druge vrednosti, da vidite, kako deluje lastnost align-content.

Še enkrat lahko preklopimo našo flex-direction na stolpec, da vidimo, kako se ta lastnost obnaša, ko delamo po stolpcu. Kot prej, potrebujemo dovolj prostora v prečni osi, da imamo nekaj prostega prostora po prikazu vseh elementov.

Opomba: vrednost enakomerno v prostoru ni definirana v specifikaciji flexbox in je kasnejši dodatek k specifikaciji za poravnavo polja. Podpora brskalnika za to vrednost ni tako dobra kot vrednost, opredeljena v specifikaciji flexboxa.