„Flexbox“ (lanksčios dėžutės išdėstymo modulio) specifikacija yra elementų išdėstymo horizontalia arba vertikalia kryptimis metodas.
„Flexbox“ sujungia pirminio lanksčios talpyklos ir vaikų lankstaus elementų savybių rinkinį.
Kad elementas taptų lanksčiu konteineriu, jis turi būti priskirtas ekranas: lankstus; arba ekranas: inline-flex;(atitinkamai blokas arba eilutė).
Lanksčiojo konteinerio viduje sukuriamos dvi ašys: pagrindinė ir jai statmenos skersinės ašys. Pirmiausia lankstieji elementai išlygiuojami išilgai pagrindinės ašies, o paskui išilgai skersinės.
Flex konteinerio savybės |
|
| lankstumo kryptis | Apibrėžia pagrindinės ašies kryptį. Galimos reikšmės:
|
| lankstus įvyniojimas | Nustato, ar konteineris yra kelių eilučių. Galimos reikšmės:
|
| lankstus srautas | Vienu metu apibrėžia du parametrus: flex-direction ir flex-wrap. Pavyzdžiui, flex-flow: stulpelio apvyniojimas; |
| pateisinti-turinys | Nustato elementų išlygiavimą išilgai pagrindinės ašies. Galimos reikšmės:
|
| išlyginti elementus | Nustato elementų išlyginimą išilgai skersinės ašies. Galimos reikšmės:
|
| suderinti turinį | Nustato ištisų lanksčių elementų eilių skersinį išlygiavimą. Galimos reikšmės:
Ši ypatybė neveikia vienos eilutės lanksčiam konteineriui. |
Flex elemento savybės |
|
| įsakymas | Nustato tvarką, kuria lanksčiame konteineryje rodomas vienas lankstus elementas. Nurodytas kaip sveikasis skaičius. Numatytoji vertė yra 0, tada elementai seka vienas kitą natūralia srauto tvarka. Reikšmė įsakymas nurodo elemento padėties sekoje svorį, o ne absoliučią padėtį. |
| lankstus pagrindas | Apibrėžiamas lankstaus elemento bazinis dydis prieš paskirstant vietą konteineryje. Galima nurodyti px, %, em ir kitais matavimo vienetais. Iš esmės tai yra tam tikras atskaitos taškas, kurio atžvilgiu elementas yra ištemptas arba suspaustas. Numatytoji reikšmė - automatinis, kurio elemento dydis priklauso nuo vidinio turinio dydžio. |
| lankstus augimas | Nustato, kiek laisvos vietos talpyklos viduje lankstus elementas padidins prie pagrindinio dydžio. Nurodomas sveikasis skaičius, kuris naudojamas kaip proporcija. Numatytoji vertė yra 0. Jei visi elementai lankstus augimas: 1, tada jie visi bus vienodo dydžio. Jei vieną lanksčią elementą nustatysite į 2, jis padidins du kartus daugiau nei kiti. |
| lankstus-susitraukiantis | Nustato, kiek, jei nėra pakankamai vietos, lankstus elementas susitrauks, palyginti su gretimų elementų sumažėjimu lankstaus konteinerio viduje. Nurodomas sveikasis skaičius, kuris naudojamas kaip proporcija. Numatytoji vertė yra 1. Jei nustatytas vienas lankstus elementas lankstus susitraukimas: 2, tada iš jo pagrindinio dydžio bus atimta dvigubai daugiau nei iš kitų, jei konteineris bus mažesnis už jame esančių elementų bazinių dydžių sumą. |
| lankstus | Vienu metu apibrėžia tris parametrus: lankstus augimas, lankstus susitraukimas, lankstus pagrindas. Pavyzdžiui, lankstus: 1 1 200 pikselių; |
| lygiuotis-savaime | Nepaiso numatytojo lygiavimo arba išlyginti elementus, skirta konkrečiam lankstumo elementui. Galimos reikšmės:
|
Flexbox naudojimo praktikoje ypatybės
1. Dešinysis lygiavimas
Išsamus CSS Flexbox vadovas. Šiame išsamiame vadove paaiškinama viskas apie „flexbox“, sutelkiant dėmesį į visus galimos savybės pirminiam elementui (flex konteineriui) ir antriniams elementams (lankstiesiems elementams). Tai taip pat apima istoriją, demonstracines versijas, šablonus ir naršyklės palaikymo lentelę.
Fonas
flex-flow (taikoma: pirminiam lanksčiojo konteinerio elementui)
Tai yra santrumpa lankstumo kryptis Ir lankstus įvyniojimas savybės, kurios kartu apibrėžia pagrindinę ir skersinę lanksčiojo konteinerio ašis. Numatytoji reikšmė yra eilutė be apvyniojimo.Lankstus srautas:<‘flex-direction’> || <‘flex-wrap’>
pateisinti-turinys
Ši savybė nustato išlygiavimą išilgai pagrindinės ašies. Tai padeda paskirstyti papildomą likusią laisvą erdvę, kai visi lankstūs elementai iš eilės yra nelankstūs arba yra lankstūs, bet pasiekė maksimalų dydį. Tai taip pat leidžia šiek tiek valdyti elementų išlygiavimą, kai jie perpildo liniją.
Konteineris (pagrįsti turinį: lankstus pradžia | lankstus galas | centras | tarpas tarp | tarpas aplink | erdvė tolygiai | pradžia | pabaiga | kairė | dešinė... + saugus | nesaugus; )
- lankstus startas(numatytasis): elementai perkeliami į lankstumo krypties pradžią.
- lankstus galas: Elementai perkeliami link lenkimo krypties pabaigos.
- pradėti: elementai perkeliami į pradžią rašymo režimas kryptys.
- galas: elementai perkeliami pabaigoje rašymo režimas kryptys.
- paliko: elementai perkeliami link kairiojo konteinerio krašto, jei tai nėra prasminga lankstumo kryptis, tada jis elgiasi kaip pradėti.
- teisingai: elementai perkeliami link dešiniojo konteinerio krašto, jei tai nėra prasminga lankstumo kryptis, tada jis elgiasi kaip pradėti.
- centras: elementai centruojami išilgai linijos
- tarpas-tarp: elementai yra tolygiai paskirstyti išilgai linijos; pirmasis elementas yra eilutės pradžioje, paskutinis elementas yra eilutės pabaigoje
- erdvė aplink: Elementai yra tolygiai išdėstyti išilgai linijos, aplink juos vienoda erdvė. Atkreipkite dėmesį, kad vizualiai erdvės nėra vienodos, nes visi elementai turi vienodą erdvę iš abiejų pusių. Pirmasis elementas turės vieną erdvės vienetą prieš konteinerio kraštą, bet du erdvės vienetus tarp kito elemento, nes kitam elementui taikomas atskiras atstumas.
- erdvė-tolygiai: elementai paskirstomi taip, kad atstumas tarp bet kurių dviejų elementų (ir atstumas iki kraštų) būtų vienodas.
Taip pat yra du papildomi raktiniai žodžiai, kuriuos galite susieti su šiomis reikšmėmis: saugus Ir nesaugu. Naudojimas saugus užtikrina, kad nesvarbu, kiek atliksite tokio tipo pozicionavimo, negalėsite elemento padėties taip, kad jis būtų rodomas už ekrano ribų (kaip viršuje), kad nebūtų galima slinkti ir turinio (tai vadinama " duomenų praradimas“).
išlyginti elementus
Ši savybė apibrėžia numatytąją elgseną, kaip lankstieji elementai išdėstomi išilgai skersinės ašies dabartinėje eilutėje. Pagalvokite apie tai kaip skersinės ašies (statmenos pagrindinei ašiai) pagrindimo turinio versiją.
Sudėtinis rodinys ( sulygiuoti elementus: ištemptas | lankstus pradžia | lankstus galas | centras | pradinė linija | pirmoji bazinė linija | paskutinė bazinė linija | pradžia | pabaiga | savaiminis paleidimas | savaiminis pabaiga + ... saugus | nesaugus; )
- ištempti(numatytasis): ištempti, kad užpildytumėte talpyklą (vis tiek laikomasi minimalaus pločio / maksimalaus pločio)
- lankstus startas / pradėti / savarankiškas startas: elementai dedami skersinės ašies pradžioje. Skirtumas tarp jų yra nedidelis ir priklauso nuo atitikimo lankstumo kryptis taisyklės arba rašymo režimas taisykles
- lankstus galas / galas / savibaiga: elementai yra skersinės ašies gale. Skirtumas vėlgi yra subtilus ir slypi atitikime lankstumo kryptis arba rašymo režimas taisykles
- centras: elementai centruojami skersinėje ašyje
- pradinė linija: elementai sulygiuoti su bazine linija
suderinti turinį
Ši savybė sulygiuoja linijas lankstaus konteinerio viduje, kai yra papildomos erdvės skersinėje ašyje, panašiai kaip pateisinti-turinys Sulygiuoja atskirus elementus pagrindinėje ašyje.
Pastaba: Ši savybė neturi įtakos, kai yra tik viena lanksčių elementų eilutė.
Sudėtinis rodinys ( sulygiuoti turinį: lankstus pradžia | lankstus galas | centras | tarpas tarp | tarpas aplink | erdvė tolygiai | ruožas | pradžia | pabaiga | pradinė linija | pirmoji bazinė linija | paskutinė bazinė linija + ... saugus | nesaugus; )
- lankstus startas / pradėti: elementai perkelti į sudėtinio rodinio pradžią. Daugiau palaikoma lankstus startas naudoja, lankstumo kryptis kol pradėti naudoja rašymo režimas kryptis.
- lankstus galas / galas: elementai perkelti į konteinerio galą. Daugiau palaikoma lankstus galas naudoja lankstumo kryptis kol galas naudoja rašymo režimas kryptis.
- centras: elementai talpinami centre
- tarpas-tarp: elementai yra tolygiai paskirstyti; pirmoji eilutė yra konteinerio pradžioje, o paskutinė eilutė yra pabaigoje
- erdvė aplink: Elementai yra tolygiai išdėstyti vienodais tarpais aplink kiekvieną eilutę
- erdvė-tolygiai: elementai paskirstomi tolygiai, aplink juos yra vienoda erdvė
- ištempti(numatytasis): linijos tęsiasi, kad užpildytų likusią erdvę
Pirmųjų vaikų elementų (lanksčiųjų elementų) ypatybės
įsakymas
Pagal numatytuosius nustatymus lankstieji elementai yra išdėstyti pradine tvarka. Tačiau turtas įsakymas valdo tvarką, kuria jie rodomi lanksčiame konteineryje.
Prekė (užsakymas:
lankstus augimas
Ši savybė lemia lankstaus elemento gebėjimą išsitempti, kai reikia. Ji paima vertę nuo nulio, kuri naudojama kaip proporcija. Tai yra savybė, kiek laisvos vietos lanksčiame konteineryje elementas turėtų užimti.
Jei visiems elementams lankstus augimas nustatytas į 1, likusi talpyklos vieta bus tolygiai paskirstyta visiems antriniams elementams. Jei vieno iš antrinių elementų reikšmė yra 2, tas elementas užims dvigubai daugiau vietos nei kiti (arba stengsis bent jau).
Prekė (lankstus augimas:
lankstus-susitraukiantis
Ši savybė lemia lankstaus elemento gebėjimą prireikus suspausti.Prekė (lankstus susitraukimas:
Neigiami skaičiai nepalaikomi.
lankstus pagrindas
Ši savybė nurodo numatytąjį elemento dydį prieš paskirstant likusią erdvę. Tai gali būti ilgis (pvz., 20%, 5rem ir pan.) arba raktažodį. raktinis žodis automatinis reiškia „pažiūrėkite į mano pločio ar aukščio savybę“. raktinis žodis turinys reiškia „dydis pagal elemento turinį“ – šis raktinis žodis vis dar nėra labai gerai palaikomas, todėl sunku patikrinti, kam jis naudojamas maksimalus turinys, min-turinys arba tinkamas turinys.Prekė ( lankstumo pagrindu:
Jei nustatyta 0
, į papildomą erdvę aplink turinį neatsižvelgiama. Jei nustatyta automatinis, papildoma erdvė paskirstoma priklausomai nuo jos lankstus augimas reikšmės.
Žiūrėkite šį piešinį.
lankstus
Tai yra naudojimo santrumpa lankstus augimas, lankstus-susitraukiantis Ir lankstus pagrindas kartu. Antrasis ir trečiasis parametrai ( lankstus-susitraukiantis Ir lankstus pagrindas) yra neprivalomi. Numatytasis yra 0 1 automatinis.Prekė ( lankstus: nėra | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
}
Rekomenduojama naudoti šią stenografinę savybę o ne nustatyti atskiras savybes. Šis sumažinimas protingai nustato kitas reikšmes.
lygiuotis-savaime
Ši savybė leidžia nepaisyti numatytojo lygiavimo (arba nurodyto naudojant išlyginti elementus) atskiriems lankstiems gaminiams.
Prašau pažiūrėk išlyginti elementus savybę suprasti turimas vertes.
Elementas (sulygiuoti: automatinis | lankstus paleidimas | lankstus galas | centras | bazinė linija | ištempimas; )
Atkreipkite dėmesį, kad savybės plūdė, aišku Ir vertikaliai išlyginti neturi įtakos lankstiesiems elementams.
Pavyzdžiai
Pradėkime nuo labai paprastas pavyzdys beveik kasdienės problemos sprendimas: tobulas derinimas. Paprasčiausias šios užduoties sprendimas yra naudoti „flexbox“.Parent ( ekranas: lankstus; aukštis: 300 tšk.; /* Arba bet koks */ ) .child ( plotis: 100 tšk.; /* Arba bet koks */ aukštis: 100 pikselių; /* Arba bet koks */ paraštė: automatinis; /* Magija ! */ )
Taip nutinka dėl to, kad nustatyta vertikalaus lygiavimo ypatybės marža automatinis lanksčiame inde, sugeria papildomą erdvę. Taigi nustatykite paraštę į automatinis objektą puikiai sucentruosite ant abiejų ašių.
Dabar naudokime dar keletą savybių. Apsvarstykite 6 elementų sąrašą, kurių dydžiai yra fiksuoti, tačiau gali būti ir automatinių dydžių. Norime, kad jie būtų tolygiai paskirstyti išilgai horizontalios ašies, kad pasikeitus naršyklės dydžiui viskas išsilygintų gerai ir be medijos užklausų.
Flex-container ( /* Pirmiausia sukuriame lankstų kontekstą */ display: flex; /* Tada apibrėžiame lanksčią kryptį ir leidžiame elementams apvynioti naujas eilutes * Atminkite, kad tai tas pats, kas: * flex-direction: eilutė ;
Paruošta. Visa kita yra tik stilius.
Jei pakeisite ekrano skiriamąją gebą arba mastelį, jis atrodys taip:
Pabandykime ką nors kita. Įsivaizduokite, kad mūsų svetainės viršuje yra dešinėje sulygiuotų naršymo elementų, bet norime, kad jie būtų pagrįsti vidutinio dydžio ekranuose ir viename stulpelyje maži prietaisai. Tai gana paprasta.
/* Dideli ekranai */ .navigation ( ekranas: lankstus; flex-flow: eilučių apvyniojimas; /* Tai sulygiuos elementus su pagrindinės ašies eilutės pabaiga */ justify-content: flex-end; ) /* Vidutiniai ekranai */ @ medija visi ir (maks. plotis: 800 piks.) ( .navigation ( /* Vidutinio dydžio ekranuose elementus centruojame tolygiai paskirstydami baltą erdvę aplink elementus */ justify-content: space-around; ) ) /* Maži ekranai */ @media all and (maks. plotis: 500 pikselių) ( .navigation ( /* Mažuose ekranuose nebenaudojame eilutės krypties, o stulpelio */ flex-direction: stulpelis; ) )
Dideli ekranai
Vidutiniai ekranai
Maži ekranai
Išbandykime ką nors dar geresnio žaisdami su lankstumo elementų lankstumu! Kaip apie 3 stulpelių viso aukščio puslapio išdėstymą su antrašte ir porašte. Ir nepriklauso nuo pradinės elementų tvarkos.
Wrapper ( display: flex; flex-flow: row wrap; ) /* Sakome, kad visų elementų plotis yra 100%, per flex-base */ .wrapper > * ( flex: 1 100%; ) /* Mes naudojame pirminis užsakymas pirmam mobiliajam variantui * 1. antraštė * 2. straipsnis * 3. aside 1 * 4. aside 2 * 5. poraštė */ /* Viduriniai ekranai */ @media all and (min-width: 600px) ( /* Mes nurodome, kad abi šoninės juostos būtų toje pačioje eilutėje */ .aside ( flex: 1 auto; ) ) /* Dideli ekranai */ @media all and (min-width: 800px) ( /* Apverčiame pirmą šoninę juostą ir pagrindinę ir pasakykite pagrindiniam elementui, kad jis užimtų dvigubai didesnį plotį nei kitos dvi šoninės juostos */ .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order : 2; ) .šalyje-2 ( tvarka : 3; ) .footer ( eilė: 4; ) )
@mixin flexbox() ( ekranas: -webkit-box; ekranas: -moz-box; ekranas: -ms-flexbox; ekranas: -webkit-flex; ekranas: flex; ) @mixin flex($values) ( -webkit- box-flex: $values -moz-box-flex: $values -webkit-flex: $values ) @mixin order($val) ( -webkit- box-ordinal-group: $val; -moz-box; -ordinal-group: $val; -webkit-order: $val
Klaidos
Žinoma, „Flexbox“ nėra be klaidų. Geriausia mano matyta kolekcija yra Philipo Waltono ir Grego Whitwortho „Flexbugs“. Tai yra atvira saugykla pirminis kodas kad galėtumėte juos visus stebėti, todėl manau, kad geriausia tiesiog susieti su ja.
Naršyklės palaikymas
Suskirstyta pagal „flexbox“ „versiją“:- (nauja) reiškia naujausią sintaksę iš specifikacijos (pavyzdžiui ekranas: lankstus;)
- (tweener) reiškia keistą neoficialią sintaksę nuo 2011 m ekranas: flexbox;)
- (senas) reiškia seną sintaksę nuo 2009 m. (pvz., ekranas: dėžutė;)
„Blackberry Browser 10+“ palaiko naują sintaksę.
Už gavimą Papildoma informacija Kaip maišyti sintakses, kad gautumėte geresnį naršyklės palaikymą, žr
„Flexbox“ pagrįstai gali būti vadinamas sėkmingu bandymu išspręsti daugybę problemų kuriant maketus CSS. Tačiau prieš pereidami prie jo aprašymo, išsiaiškinkime, kas negerai su dabar naudojamais išdėstymo metodais?
Bet kuris maketuotojas žino kelis būdus, kaip ką nors išlyginti vertikaliai arba padaryti 3 stulpelių išdėstymą su guminiu viduriniu stulpeliu. Tačiau pripažinkime, kad visi šie metodai yra gana keisti, atrodo kaip įsilaužimas, ne visais atvejais tinkami, sunkiai suvokiami ir neveikia, jei nesilaikoma tam tikrų istoriškai susiklosčiusių magiškų sąlygų.
Taip atsitiko, nes html ir css vystėsi evoliuciškai. Iš pradžių tinklalapiai buvo tarsi vienos gijos tekstinius dokumentus, kiek vėliau, puslapio dalijimas į blokus buvo atliktas su lentelėmis, tada tapo madinga rinkti plūdėmis, o oficialiai mirus ie6, atsirado ir technikos su inline-block. Dėl to paveldėjome sprogstamąjį visų šių metodų derinį, naudojamą kuriant 99,9 % visų esamų tinklalapių maketus.
Kelių eilučių blokų organizavimas lankstaus konteinerio viduje.
lankstus įvyniojimas
Visi aukščiau pateikti pavyzdžiai buvo sukurti atsižvelgiant į vienos eilės (vieno stulpelio) blokų išdėstymą. Reikia pasakyti, kad pagal nutylėjimą lankstus konteineris blokus savo viduje visada išdėstys vienoje eilutėje. Tačiau specifikacija taip pat palaiko kelių eilučių režimą. „flex-wrap“ CSS ypatybė yra atsakinga už kelių eilučių turinį lanksčiame konteineryje.
Galimos vertės lankstus įvyniojimas:
- nowrap (Numatytoji reikšmė): blokai išdėstyti vienoje eilutėje iš kairės į dešinę (rtl iš dešinės į kairę)
- apvyniojimas: kaladėlės išdėstomos keliomis horizontaliomis eilėmis (jei netelpa į vieną eilę). Jie seka vienas kitą iš kairės į dešinę (rtl iš dešinės į kairę)
- wrap-reverse: tas pats kaip apvynioti, tačiau blokai išdėstyti atvirkštine tvarka.
flex-flow yra patogus sutrumpinimas, reiškiantis flex-direction + flex-wrap
Iš esmės flex-flow suteikia galimybę apibūdinti pagrindinės ir kelių eilučių skersinės ašies kryptį vienoje savybėje. Numatytasis lankstus srautas: eilutė be įvyniojimo .
lankstus srautas:<‘flex-direction’> || <‘flex-wrap’>
CSS
/* t.y. ... */ .my-flex-block( flex-direcrion:column; flex-wrap: wrap; ) /* tai tas pats kaip... */ .my-flex-block( flex-flow: stulpelio apvyniojimas )suderinti turinį
Taip pat yra align-content ypatybė, kuri nustato, kaip gautos blokų eilutės bus išlygiuotos vertikaliai ir kaip jos padalins visą lankstaus konteinerio erdvę.
Svarbu: align-content veikia tik kelių eilučių režimu (t. y. esant lanksčiam įvyniojimui: įvyniojimui arba lanksčiam apvyniojimui: apvyniojimui atvirkščiai;)
Galimos vertės suderinti turinį:
- flex-start: blokų eilės prispaudžiamos prie lankstaus konteinerio pradžios.
- flex-end: blokų eilės prispaudžiamos prie lankstaus konteinerio galo
- centras: blokų eilės yra lanksčiojo konteinerio centre
- tarpas tarp: pirmoji blokų eilė yra lanksčiojo konteinerio pradžioje, paskutinė blokų eilė yra gale, visos kitos eilės yra tolygiai paskirstytos likusioje erdvėje.
- erdvė aplink: blokų eilės yra tolygiai paskirstytos nuo lankstaus konteinerio pradžios iki galo, vienodai padalijant visą turimą erdvę.
- ištempti (Numatytoji reikšmė): blokų eilės ištemptos, kad užimtų visą turimą erdvę.
CSS ypatybės flex-wrap ir align-content turėtų būti taikomos tiesiai lanksčiam konteineriui, o ne antriniams.
„Flex“ kelių eilučių savybių demonstracija
CSS taisyklės antriniams lanksčiojo sudėtinio rodinio elementams (flex blocks)
flex-basis – pagrindinis vieno lankstaus bloko dydis
Nustato pradinį lanksčiojo bloko pagrindinės ašies dydį, prieš jam pritaikant transformacijas, pagrįstas kitais lankstumo veiksniais. Galima nurodyti bet kokiais ilgio vienetais (px, em, %, ...) arba automatiniu (numatytasis). Jei nustatytas kaip automatinis, bloko matmenys (plotis, aukštis) imami kaip pagrindas, o tai, savo ruožtu, gali priklausyti nuo turinio dydžio, jei nėra aiškiai nurodyta.
flex-grow – vieno flex bloko „godumas“.
Jei reikia, nustatoma, kiek didesnis atskiras lankstus blokas gali būti už gretimus elementus. flex-grow priima bedimensinę reikšmę (numatytasis 0)
1 pavyzdys:
- Jei visos lanksčios dėžutės, esančios lanksčiame konteineryje, turi flex-grow:1, jos bus tokio pat dydžio
- Jei vienas iš jų turi flex-grow:2, tada jis bus 2 kartus didesnis nei visi kiti
2 pavyzdys:
- Jei visos lanksčios dėžutės, esančios lanksčiame konteineryje, turi flex-grow:3, jos bus tokio pat dydžio
- Jei vienas iš jų turi flex-grow:12, tada jis bus 4 kartus didesnis nei visi kiti
Tai yra, absoliuti flex-grow vertė nenustato tikslaus pločio. Tai lemia jo „godumo“ laipsnį kitų to paties lygio lankstumo blokų atžvilgiu.
flex-shrink – vieno lankstaus bloko „suspaudžiamumo“ faktorius
Nustato, kiek lankstus blokas susitrauks, palyginti su gretimais lanksčiojo konteinerio elementais, jei nėra pakankamai laisvos vietos. Pagal numatytuosius nustatymus 1.
flex – lankstaus augimo, lankstaus susitraukimo ir lankstumo pagrindo savybių santrumpa
lankstus: nėra | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
CSS
/* t.y. ... */ .my-flex-block( flex-grow:12; flex-shrink:3; flex basic: 30em; ) /* tai tas pats, kas... */ .my-flex-block( flex : 12 3 30 em )Lankstus augimas, lankstus susitraukimas ir lankstumo pagrindo demonstracinė versija
align-self – vieno lankstaus bloko išlyginimas išilgai skersinės ašies.
Suteikia galimybę nepaisyti lankstaus konteinerio sulygiuotų elementų savybę atskiram lanksčiam blokui.
Galimos lygiavimo vertės (tos pačios 5 parinktys kaip ir elementų lygiavimo)
- flex-start: lankstus blokas prispaudžiamas prie skersinės ašies pradžios
- lankstus galas: lankstus blokas prispaudžiamas prie skersinės ašies galo
- centras: lankstus blokas yra skersinės ašies centre
- bazinė linija: lankstus blokas sulygiuotas su bazine linija
- ištempti (Numatytoji reikšmė): Lankstus blokas ištemptas, kad užimtų visą turimą erdvę išilgai skersinės ašies, atsižvelgiant į minimalų / maksimalų plotį, jei nustatytas.
užsakymas – vieno lankstaus bloko lankstaus konteinerio viduje tvarka.
Pagal numatytuosius nustatymus visi blokai seks vienas po kito html nurodyta tvarka. Tačiau šį užsakymą galima pakeisti naudojant užsakymo ypatybę. Jis nurodomas kaip sveikasis skaičius ir numatytasis 0.
Užsakymo reikšmė nenurodo absoliučios elemento padėties sekoje. Jis nustato elemento padėties svorį.
HTML
Tokiu atveju blokai seks vienas po kito pagrindine ašimi tokia tvarka: 5 punktas, 1 punktas, 3 punktas, 4 punktas, 2 punktas
Sulyginimo ir tvarkos demonstracija
paraštė: auto vertikaliai. Svajonės pildosi!
Galite mylėti „Flexbox“ bent jau todėl, kad pažįstamas horizontalus lygiavimas per paraštę:auto tinka ir vertikaliems elementams!
My-flex-container ( ekranas: lankstus; aukštis: 300 tšk.; /* Arba bet koks */ ) .my-flex-block ( plotis: 100 tšk.; /* Arba bet koks */ aukštis: 100 taškų; /* Ar bet koks * / paraštė: auto /* Magic Blokas yra centre vertikaliai ir horizontaliai */ )
Ką reikia atsiminti
- Neturėtumėte naudoti „flexbox“, kur tai nėra būtina.
- Apibrėžti regionus ir keisti turinio tvarką daugeliu atvejų vis tiek naudinga padaryti priklausomą nuo puslapio struktūros. Pagalvok gerai.
- Supraskite „flexbox“ ir žinokite pagrindus. Taip daug lengviau pasiekti laukiamą rezultatą.
- Nepamirškite apie paraštes. Į juos atsižvelgiama nustatant ašių išlygiavimą. Taip pat svarbu atsiminti, kad „flexbox“ paraštės „nesugriūna“, kaip įprastu srautu.
- Į lanksčių blokų slankiąją vertę neatsižvelgiama ir ji neturi reikšmės. Tai tikriausiai gali būti kažkaip panaudota grakščiai degradacijai pereinant prie „flexbox“.
- „Flexbox“ puikiai tinka tinklalapio komponentų ir atskirų tinklalapių dalių išdėstymui, tačiau dėl pagrindinių maketų (straipsnio padėtis, antraštė, poraštė, naršymo juosta ir kt.) jis nepasirodė geriausios pusės. Tai vis dar ginčytinas klausimas, tačiau šiame straipsnyje gana įtikinamai parodomi trūkumai xanthir.com/blog/b4580
Pagaliau
Manau, kad „flexbox“, žinoma, neišstums visų kitų išdėstymo metodų, tačiau, žinoma, artimiausiu metu jis užims vertą nišą sprendžiant daugybę užduočių. Ir, žinoma, dabar reikia pabandyti dirbti su juo. Vienas iš šių straipsnių bus skirtas konkretiems darbo su lanksčiu išdėstymu pavyzdžiams. Prenumeruokite naujienas ;)
Trumpai tariant, išdėstymas su „Flexbox“ mums suteikia paprasti sprendimai kadaise sunkių užduočių. Pavyzdžiui, kai reikia išlygiuoti elementą vertikaliai arba prispausti poraštę į ekrano apačią arba tiesiog įterpti kelis blokus į vieną eilutę, kad jie užimtų visą laisvą vietą. Panašios problemos gali būti išspręstos be lankstumo. Tačiau paprastai šie sprendimai labiau primena „ramentus“ – būdus, kaip naudoti CSS ne pagal paskirtį. Tuo tarpu naudojant „flexbox“ tokios užduotys išsprendžiamos tiksliai taip, kaip numatyta „flex“ modelyje.
CSS Flexible Box Layout Module (CSS modulis maketams su lanksčiais blokais), sutrumpintai flexbox, buvo sukurtas siekiant pašalinti trūkumus kuriant įvairiausius HTML dizainus, įskaitant pritaikytus įvairiems pločiams ir aukščiams, o maketą padaryti logišką ir paprastą. . Ir logiškas požiūris, kaip taisyklė, veikia netikėtose vietose, kur rezultatas nebuvo patikrintas - logika yra viskas!
Flexbox leidžia elegantiškai valdyti įvairius konteinerio viduje esančių elementų parametrus: kryptį, tvarką, plotį, aukštį, išlyginimą išilgai ir skersai, laisvos erdvės paskirstymą, elementų tempimą ir suspaudimą.
Pagrindinės žinios
„FlexBox“ susideda iš konteinerio ir jo elementų (lanksčių elementų).
Jei norite įjungti „flexbox“, bet kas HTML elementas tiesiog priskirkite CSS ypatybę display:flex; arba ekranas: inline-flex; .
Įjungus flex savybę, konteinerio viduje sukuriamos dvi ašys: pagrindinė ir skersinė (statmena (⊥), skersinė ašis). Visi įdėtieji elementai (pirmojo lygio) yra išdėstyti išilgai pagrindinės ašies. Pagal numatytuosius nustatymus pagrindinė ašis yra horizontali ir nukreipta iš kairės į dešinę (→), o skersinė – atitinkamai vertikali ir nukreipta iš viršaus į apačią (↓).
Pagrindinės ir kryžminės ašys gali būti sukeistos, tada elementai bus išdėstyti iš viršaus į apačią (↓), o kai nebetilps į aukštį, jie judės iš kairės į dešinę (→) - tai yra, ašys tiesiog apsikeitė vietomis. . Šiuo atveju elementų išdėstymo pradžia ir pabaiga nesikeičia – keičiasi tik kryptys (ašys)! Štai kodėl reikia įsivaizduoti ašis konteinerio viduje. Tačiau nereikėtų manyti, kad yra kažkokios „fizinės“ ašys ir jos kažką įtakoja. Ašis čia yra tik elementų judėjimo kryptis konteinerio viduje. Pavyzdžiui, jei nurodytume elementų išlygiavimą į pagrindinės ašies centrą, o vėliau pakeistume šios pagrindinės ašies kryptį, tada lygiavimas pasikeis: elementai buvo viduryje horizontaliai, bet tapo viduryje vertikaliai... Žiūrėkite pavyzdį.
Kitas svarbus „Flexbox“ bruožas yra eilučių buvimas skersine kryptimi. Norėdami suprasti, apie ką kalbame, įsivaizduokime, kad yra pagrindinė horizontali ašis, yra daug elementų ir jie „netelpa“ į konteinerį, todėl pereina į kitą eilutę. Tie. konteineris atrodo taip: konteineris, kurio viduje yra dvi eilutės, kurių kiekvienoje yra keli elementai. Pristatė? Dabar atminkite, kad galime vertikaliai išlyginti ne tik elementus, bet ir eilutes! Kaip tai veikia, aiškiai matyti nuosavybės pavyzdyje. O schematiškai atrodo taip:
CSS savybės, kuris gali turėti įtakos išdėstymo modeliui: plūduriuojantis, skaidrus, vertikaliai sulygiuotas, stulpeliai neveikia lanksčioje konstrukcijoje. Čia naudojamas kitoks maketo kūrimo modelis ir šios CSS savybės tiesiog ignoruojamos.
„Flexbox“ CSS ypatybės
„Flexbox“ turi skirtingas CSS taisykles, skirtas valdyti visą „flex“ dizainą. Kai kuriuos reikia pritaikyti prie pagrindinio konteinerio, o kitus - prie šio konteinerio elementų.
Dėl konteinerio
ekranas:Įgalina elemento lankstumo savybę. Ši savybė apima patį elementą ir jo įdėtus elementus: paveikiami tik pirmojo lygio palikuonys – jie taps lankstaus konteinerio elementais.
- lankstus- elementas ištempia visą savo plotį ir turi visą erdvę tarp aplinkinių blokų. Eilučių lūžiai atsiranda bloko pradžioje ir pabaigoje.
- inline-flex- elementas apvyniotas aplink kitus elementus. Šiuo atveju jo vidinė dalis suformatuojama kaip bloko elementas, o pats elementas – kaip eilutinis.
flex ir inline-flex skiriasi tuo, kad jie skirtingai sąveikauja su aplinkiniais elementais, panašiai kaip display:block ir display:inline-block .
lankstumo kryptis:Keičia pagrindinės talpyklos ašies kryptį. Atitinkamai keičiasi skersinė ašis.
- eilutė (numatytasis)- elementų kryptis iš kairės į dešinę (→)
- stulpelyje- elementų kryptis iš viršaus į apačią (↓)
- eilė-atvirkštinė- elementų kryptis iš dešinės į kairę (←)
- stulpelis-reversas- elementų kryptis iš apačios į viršų ()
Valdo elementų, kurie netelpa į konteinerį, perkėlimą.
- nowrap (numatytasis)- įdėtieji elementai dedami į vieną eilutę (su kryptis=eilutė) arba į vieną stulpelį (su kryptimi=stulpelis), neatsižvelgiant į tai, ar jie telpa į konteinerį, ar ne.
- apvynioti- apima perkeliamus elementus į kitą eilutę, jei jie netelpa į konteinerį. Tai leidžia elementams judėti išilgai skersinės ašies.
- apvyniojimas-reversas- tas pats kaip vyniojimas, tik perkėlimas bus ne žemyn, o aukštyn (priešinga kryptimi).
Sujungia lanksčios krypties ir lanksčios apvyniojimo savybes. Jie dažnai naudojami kartu, todėl norint parašyti mažiau kodo, buvo sukurta flex-flow ypatybė.
„flex-flow“ priima šių dviejų savybių reikšmes, atskirtas tarpu. Arba galite nurodyti vieną bet kurios nuosavybės vertę.
/* tik flex-direction */ flex-flow: eilutė; lankstus srautas: eilė atgal; lankstus srautas: kolonėlė; lankstus srautas: stulpelis atgal; /* tik flex-wrap */ flex-flow: nowrap; flex-flow: įvyniojimas; flex-flow: wrap-reverse; /* abi reikšmės vienu metu: flex-direction ir flex-wrap */ flex-flow: row nowrap; flex-flow: kolonėlės apvyniojimas; flex-flow: stulpelis-atvirkštinis apvyniojimas-atvirkštas; pateisinti turinį:
Lygiuoja elementus pagal pagrindinę ašį: jei kryptis = eilutė, tada horizontaliai, o jei kryptis = stulpelis, tada vertikaliai.
- lankstus paleidimas (numatytasis)- elementai eis nuo pradžios (pabaigoje gali likti vietos).
- lankstus galas- elementai išlygiuoti pabaigoje (tarpas išliks pradžioje)
- centras- centre (kairėje ir dešinėje liks vietos)
- tarpas-tarp- atokiausi elementai prispaudžiami prie kraštų (tarpas tarp elementų paskirstomas tolygiai)
- erdvė aplink- laisva erdvė tolygiai paskirstoma tarp elementų (toliau esantys elementai neprispaudžiami prie kraštų). Tarpas tarp konteinerio krašto ir išorinių elementų bus perpus mažesnis nei tarpas tarp elementų eilutės viduryje.
- erdvė-tolygiai
Sulygiuoja eilutes, kuriose yra elementų, išilgai skersinės ašies. Tas pats, kas pagrindimo turinys tik priešingoje ašyje.
Pastaba: Veikia, kai yra bent 2 eilutės, t.y. Jei yra tik 1 eilutė, nieko nebus.
Tie. jei flex-direction: row , tada ši savybė išlygiuos nematomas eilutes vertikaliai. Čia svarbu pažymėti, kad bloko aukštis turi būti nustatytas standžiai ir turi būti didesnis nei eilučių aukštis, kitaip pačios eilutės ištemps konteinerį ir bet koks jų lygiavimas neteks prasmės, nes tarp jų nėra laisvos vietos. juos... Bet kai flex-direction: stulpelis , tada eilutės juda horizontaliai → ir konteinerio plotis beveik visada yra didesnis nei eilučių plotis ir eilučių lygiavimas iš karto turi prasmę...
- tempimas (numatytasis)- eilutės ištemptos, kad pilnai užpildytų eilutę
- lankstus startas- eilutės sugrupuotos konteinerio viršuje (gal gale gali likti vietos).
- lankstus galas- eilutės sugrupuotos konteinerio apačioje (pradžioje liks vietos)
- centras- eilutės sugrupuotos konteinerio centre (kraštuose liks vietos)
- tarpas-tarp- išorinės eilės prispaudžiamos prie kraštų (tarpas tarp eilių paskirstomas tolygiai)
- erdvė aplink- laisva erdvė tolygiai paskirstoma tarp eilučių (išoriniai elementai neprispausti prie kraštų). Tarpas tarp konteinerio krašto ir išorinių elementų bus perpus mažesnis nei tarpas tarp elementų eilutės viduryje.
- erdvė-tolygiai- tas pats kaip tarpas aplink , tik atstumas tarp išorinių elementų ir konteinerio kraštų yra toks pat kaip tarp elementų.
Sulygiuoja elementus išilgai skersinės ašies eilutėje (nematoma eilutė). Tie. Pačios eilutės yra sulygiuotos naudojant align-content , o šiose eilutėse (eilutėse) esantys elementai yra lygiuojami naudojant lygiavimo elementus ir visoje skersinėje ašyje. Nėra tokio padalijimo išilgai pagrindinės ašies, nėra eilučių sampratos, o elementai lygiuojami per pagrindinį turinį .
- tempimas (numatytasis)- elementai ištempti, kad visiškai užpildytų liniją
- lankstus startas- elementai prispaudžiami iki eilutės pradžios
- lankstus galas- elementai prispaudžiami iki eilutės pabaigos
- centras- elementai sulygiuoti su eilutės centru
- pradinė linija- elementai sulygiuoti su pagrindine teksto linija
Konteinerių elementams
lankstus augimas:Nustatomas elemento padidinimo koeficientas, kai talpykloje yra laisvos vietos. Numatytasis lankstus augimas: 0 t.y. nė vienas elementas neturėtų augti ir užpildyti laisvą vietą konteineryje.
Numatytasis lankstus augimas: 0
- Jei visiems elementams nurodysite flex-grow:1, jie visi vienodai ištemps ir užpildys visą laisvą vietą konteineryje.
- Jei vienam iš elementų nurodysite flex-grow:1, jis užpildys visą laisvą vietą konteineryje ir lygiavimas per justify-content nebeveiks: nėra laisvos vietos lygiuoti...
- Su lanksčiu augimu:1. Jei vienas iš jų turi flex-grow:2, tada jis bus 2 kartus didesnis nei visi kiti
- Jei visos lanksčios dėžutės, esančios lanksčiame konteineryje, turi flex-grow:3, jos bus tokio pat dydžio
- Su lanksčiu augimu:3. Jei vienas iš jų turi flex-grow:12, tada jis bus 4 kartus didesnis nei visi kiti
Kaip tai veikia? Tarkime, kad sudėtinis rodinys yra 500 pikselių pločio ir jame yra du elementai, kurių kiekvieno pagrindo plotis yra 100 pikselių. Tai reiškia, kad konteineryje liko 300 laisvų pikselių. Dabar, jei nurodysime flex-grow:2; , o antrasis lankstus augimas: 1; , tada blokai užims visą galimą konteinerio plotį ir pirmojo bloko plotis bus 300 pikselių, o antrojo 200 pikselių. Tai paaiškinama tuo, kad turima 300px laisvos vietos konteineryje buvo paskirstyta tarp elementų santykiu 2:1, +200px pirmam ir +100px antrajam.
Pastaba: vertėje galite nurodyti trupmeninius skaičius, pavyzdžiui: 0,5 - flex-grow:0,5
lankstus susitraukimas:Nustatomas elemento mažinimo koeficientas. Savybė yra priešinga flex-grow ir nustato, kaip elementas turėtų susitraukti, jei konteineryje nelieka laisvos vietos. Tie. savybė pradeda veikti, kai visų elementų dydžių suma yra didesnė už konteinerio dydį.
Numatytasis lankstus susitraukimas:1
Tarkime, sudėtinis rodinys yra 600 pikselių pločio ir jame yra du elementai, kurių kiekvienas yra 300 pikselių pločio – lankstus pagrindas: 300 pikselių; . Tie. du elementai visiškai užpildo konteinerį. Pirmajam elementui suteikite lankstumą-susitraukimą: 2; , o antrasis lankstus susitraukiantis: 1; . Dabar sumažinkime konteinerio plotį 300px, t.y. elementai turi susitraukti 300 pikselių, kad tilptų į konteinerį. Jie susitrauks santykiu 2:1, t.y. pirmasis blokas sumažės 200px, o antrasis 100px ir nauji elementų dydžiai taps 100px ir 200px.
Pastaba: vertėje galite nurodyti trupmeninius skaičius, pvz.: 0,5 – lankstus susitraukimas:0,5
lankstus pagrindas:Nustatomas elemento pagrindo plotis – plotis prieš apskaičiuojant kitas elemento pločiui įtakos turinčias sąlygas. Reikšmė gali būti nurodyta px, em, rem, %, vw, vh ir kt. Gautas plotis priklausys nuo pagrindo pločio ir lankstaus augimo, lankstaus susitraukimo reikšmių ir turinio bloko viduje. Naudojant automatinį elementą, jo plotis yra lygus jame esančiam turiniui.
Numatytasis: automatinis
Kartais geriau nustatyti elemento plotį naudojant įprastą pločio savybę. Pavyzdžiui, plotis: 50%; reikš, kad elementas konteinerio viduje bus lygiai 50%, tačiau lankstaus augimo ir lankstumo susitraukimo savybės vis tiek veiks. Tai gali prireikti, kai elementas yra ištemptas dėl jo viduje esančio turinio daugiau nei nurodyta lankstumo pagrindu. Pavyzdys.
flex-basis bus "standartas", jei tempimas ir susitraukimas yra nustatyti į nulį: flex-basis: 200px; lankstus augimas:0; lankstus-susitraukiantis:0; . Visa tai galima parašyti taip: flex:0 0 200px; .
lankstumas: (augimo susitraukimo pagrindas)Trumpa trijų savybių santrauka: flex-grow flex-shrink flex-basis .
Numatytasis: lankstus: 0 1 auto
Tačiau galite nurodyti vieną ar dvi reikšmes:
Lankstus: nėra; /* 0 0 auto */ /* skaičius */ flex: 2; /* flex-grow (flex-basis eina į 0) */ /* ne skaičius */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* lankstus pagrindas: turinys */ lankstus: 1 30 piks.; /* flex-grow ir flex-basis */ flex: 2 2; /* lanksti-augti ir lanksti-sutraukti (lankstumo pagrindas eina į 0) */ lankstus: 2 2 10%; /* lankstus augimas, lankstus susitraukimas ir lankstumas */ sulygiuoti:
Leidžia keisti tik vieno elemento ypatybę align-items.
Numatytasis: iš lygiavimo elementų konteinerio
- ištempti- elementas ištemptas, kad visiškai užpildytų liniją
- lankstus startas- elementas prispaudžiamas iki eilutės pradžios
- lankstus galas- elementas prispaustas iki eilutės pabaigos
- centras- elementas sulygiuotas su linijos viduriu
pradinė linija- elementas sulygiuotas su pagrindine teksto linija
Leidžia keisti elemento tvarką (poziciją, padėtį) bendrojoje eilutėje.
Numatytasis: tvarka: 0
Pagal numatytuosius nustatymus elementų tvarka yra 0 ir yra išdėstyti pagal jų atsiradimo HTML kode ir eilutės krypties tvarka. Bet jei pakeisite užsakymo ypatybės reikšmę, tada elementai bus išdėstyti reikšmių tvarka: -1 0 1 2 3 ... . Pavyzdžiui, jei vienam iš elementų nurodysite tvarką: 1, tada pirmiausia bus visi nuliai, o tada elementas su 1.
Tokiu būdu, pavyzdžiui, galite perkelti pirmąjį elementą į pabaigą, nekeisdami likusių elementų judėjimo krypties ar HTML kodo.
Pastabos
Kuo skiriasi lankstus pagrindas ir plotis?
Žemiau pateikiami svarbūs skirtumai tarp lankstaus pagrindo ir pločio / aukščio:
- Naudojant flex savybę, 3 reikšmes (flex-grow/flex-shrink/flex-basis) galima sujungti ir parašyti trumpai, tačiau norint padidinti arba susitraukti, reikia rašyti atskirai. Pavyzdžiui: lankstus:0 0 50% == plotis:50%; lankstus-susitraukiantis:0; . Kartais tai tiesiog nepatogu.
flex-basis veikia tik pagrindinei ašiai. Tai reiškia, kad naudojant flex-direction:row flex-basis valdo plotį, o flex-direction:column - aukštį. .
flex-basis taikomas tik lankstiems elementams. Tai reiškia, kad jei išjungsite „flex“ sudėtiniame rodinyje, ši savybė neturės jokios įtakos.
Absoliutūs konteinerio elementai lanksčioje konstrukcijoje nedalyvauja... Tai reiškia, kad flex-basis neturi įtakos konteinerio lankstiems elementams, jei jie yra absoliuti padėtis:absoliutus . Jie turės nurodyti plotį / aukštį.
Jei įmanoma, vis tiek pirmenybę teikite lanksčiam pagrindui. Naudokite plotį tik tada, kai lankstus pagrindas nėra tinkamas.
Skirtumas tarp lankstaus pagrindo ir pločio – klaida ar savybė?
Lanksčiojo elemento turinys jį stumia ir negali peržengti jo ribų. Tačiau, jei nustatysite plotį naudodami plotį arba maksimalų plotį, o ne flex-basis , elementas lankstaus sudėtinio rodinio viduje galės išsiplėsti už to sudėtinio rodinio ribų (kartais būtent taip ir norite). Pavyzdys:
Flex išdėstymo pavyzdžiai
Pavyzdžiuose niekur nenaudojami priešdėliai, užtikrinantys suderinamumą tarp naršyklių. Aš tai padariau dėl lengvas skaitymas css. Todėl žiūrėkite pavyzdžius naujausios versijos Chrome arba Firefox.
#1 Paprastas pavyzdys su vertikaliu ir horizontaliu lygiavimu
Pradėkime nuo paprasčiausio pavyzdžio – vertikalus ir horizontalus lygiavimas vienu metu ir bet kokiame bloko aukštyje, net ir gumos.
Arba taip, be bloko viduje:
#1.2 Atskyrimas (pertrauka) tarp lankstaus bloko elementų
Norėdami sudėti konteinerio elementus išilgai kraštų ir atsitiktinai pasirinkti elementą, po kurio bus pertrauka, turite naudoti ypatybę margin-left:auto arba margin-right:auto.
#2 Pritaikomas lankstumo meniu
Pačiame puslapio viršuje sukurkime meniu. Plačiame ekrane jis turėtų būti dešinėje. Vidutiniškai išlygiuokite viduryje. O mažame – kiekvienas elementas turi būti naujoje eilutėje.
#3 Adaptyvūs 3 stulpeliai
Šiame pavyzdyje parodyta, kaip greitai ir patogiai padaryti 3 stulpelius, kuriuos susiaurinus pavirs 2, o paskui 1.
Atkreipkite dėmesį, kad tai galima padaryti nenaudojant žiniasklaidos taisyklių, viskas yra lanksti.
Eikite į jsfiddle.net ir pakeiskite skilties „rezultatas“ plotį
#4 Prisitaikantys blokai ant lankstumo
Tarkime, kad reikia išvesti 3 blokus, vieną didelį ir du mažus. Tuo pačiu metu būtina, kad blokeliai prisitaikytų prie mažų ekranų. Mes darome:
Eikite į jsfiddle.net ir pakeiskite skilties „rezultatas“ plotį
#5 Galerija su lankstumu ir perėjimu
Šiame pavyzdyje parodyta, kaip greitai galite sukurti mielą akordeoną su paveikslėliais naudodami „flex“. Atkreipkite dėmesį į lankstumo perėjimo savybę.
#6 „Flex to Flex“ (tik pavyzdys)
Užduotis yra padaryti lanksčią bloką. Kad kiekvieno bloko teksto pradžia būtų toje pačioje eilutėje horizontaliai. Tie. Kai plotis siaurėja, blokai auga į aukštį. Būtina, kad vaizdas būtų viršuje, mygtukas visada būtų apačioje, o tekstas viduryje prasidėtų išilgai vienos horizontalios linijos...
Norėdami išspręsti šią problemą, patys blokai ištempiami lankstu ir nustatomi iki didžiausio galimo pločio. kas vidinis blokas taip pat yra lanksti konstrukcija su pasukta ašimi lenkimo kryptis:stulpelis; o elementas viduryje (kur yra tekstas) ištemptas flex-grow:1; užpildyti visą laisvą vietą, taip pasiekiamas rezultatas - tekstas prasidėjo viena eilute...
Daugiau pavyzdžių
Naršyklės palaikymas – 98,3 proc.
Žinoma, visiško palaikymo nėra, tačiau visos šiuolaikinės naršyklės palaiko „flexbox“ dizainą. Kai kuriems vis dar reikia priešdėlių. Norėdami gauti tikrą vaizdą, pažiūrėkime į caniuse.com ir pamatysime, kad 96,3% šiandien naudojamų naršyklių veiks be priešdėlių, o 98,3% naudos priešdėlius. Tai puikus rodiklis, leidžiantis užtikrintai naudotis „flexbox“.
Norėdami sužinoti, kurie priešdėliai yra aktualūs šiandien (2019 m. birželio mėn.), pateiksiu visų lankstumo taisyklių pavyzdį su reikiamais priešdėliais:
/* Konteineris */ .flex ( display:-webkit-box; display:-ms-flexbox; display:flex; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; -webkit-box-orient: -ms-flex-wrap: wrap; -webkit-box-pack; :justify; align-content:space-around ) /* Elementai */ .flex-item ( -webkit-box-flex:1; -ms-flex-pozityvas:1; -flex- negatyvas:2 - ms-flex-size:1 2 100px - webkit-ordinal-group; :3; -ms-flex-order:2);
Geriau, jei savybės su priešdėliais būtų prieš pradinę nuosavybę.
Šiame sąraše nėra šiandien nereikalingų priešdėlių (pagal caniuse), bet apskritai priešdėlių yra daugiau.
| Chrome | Safari | Firefox | Opera | T.Y. | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (senas) | 3.1+ (senas) | 2-21 (senas) | 10 (tviteris) | 2.1+ (senas) | 3.2+ (senas) | |
| 21+ (nauja) | 6.1+ (nauja) | 22+ (nauja) | 12.1+ (nauja) | 11+ (nauja) | 4.4+ (nauja) | 7.1+ (nauja) |
- (nauja) - nauja sintaksė: ekranas: flex; .
- (tweener) - sena neoficiali sintaksė nuo 2011 m.: ekranas: flexbox; .
- (senas) - sena sintaksė nuo 2009 m.: ekranas: langelis;
Vaizdo įrašas
Na, nepamirškite apie vaizdo įrašą, kartais jis taip pat įdomus ir suprantamas. Štai keletas populiarių:
Naudingos nuorodos „Flex“.
flexboxfroggy.com – flexbox mokomasis žaidimas.
„Flexplorer“ yra vizualinio lankstaus kodo kūrėjas.
lankstumo kryptis: stulpelis;
Pamatysite, kad tai sugrąžins elementus į stulpelių išdėstymą, panašiai kaip prieš pridedant CSS. Prieš tęsdami ištrinkite šią deklaraciją iš savo pavyzdžio.
Pastaba: taip pat galite išdėstyti lanksčiuosius elementus atvirkštine kryptimi, naudodami eilutės atvirkštinės ir stulpelio atvirkštinės reikšmes. Eksperimentuokite ir su šiomis vertybėmis!
Įvyniojimas
Viena iš problemų, kylančių, kai išdėstyme yra fiksuotas plotis arba aukštis, yra ta, kad ilgainiui jūsų „flexbox“ vaikai perpildys konteinerį ir sugadins išdėstymą. Peržiūrėkite mūsų flexbox-wrap0.html pavyzdį ir pabandykite jį peržiūrėti tiesiogiai (jei norite sekti šiuo pavyzdžiu, dabar pasiimkite vietinę šio failo kopiją):
Čia matome, kad vaikai tikrai veržiasi iš savo konteinerio. Vienas iš būdų, kaip tai išspręsti, yra pridėti šią deklaraciją prie elemento, kuris reiškia atskirą sekciją, kuri neturi konkretesnio semantinio elemento, kuris jį atvaizduotų HTML dokumente.>
Flex-wrap: įvyniojimas; lankstus: 200 taškų;
Išbandykite tai dabar; pamatysite, kad išdėstymas atrodo daug geriau, kai įtraukta:
Dabar turime kelias eilutes – kiekvienoje eilutėje pritaikoma tiek „flexbox“ vaikų, kiek prasminga, ir bet koks perpildymas perkeliamas į kitą eilutę. Straipsniuose nustatyta lanksti: 200 pikselių deklaracija reiškia, kad kiekvienas iš jų bus bent 200 pikselių pločio; mes išsamiau aptarsime šią savybę vėliau. Taip pat galite pastebėti, kad keli paskutiniai paskutinės eilutės vaikai yra platesni, kad visa eilutė vis dar būtų užpildyta.
Tačiau čia galime padaryti daugiau. Pirmiausia pabandykite pakeisti lanksčios krypties ypatybės reikšmę į eilutę atvirkščiai – dabar pamatysite, kad vis dar turite kelių eilučių išdėstymą, bet jis prasideda priešingame naršyklės langą ir vyksta atvirkščiai.
lankstaus srauto stenografija
Šiuo metu verta paminėti, kad yra flex-direction ir flex-wrap - flex-flow trumpinys. Taigi, pavyzdžiui, galite pakeisti
Lanksti kryptis: eilė; flex-wrap: įvyniojimas;
Flex-flow: eilučių apvyniojimas;
Lankstus lanksčių daiktų dydis
Dabar grįžkime prie pirmojo pavyzdžio ir pažiūrėkime, kaip galime valdyti, kokią dalį vietos lanksčių elementų užima flexbox0.html arba paimkite flexbox1.html kopiją kaip naują pradinį tašką (žr. gyvai).
Pirmiausia CSS apačioje pridėkite šią taisyklę:
Straipsnis (lankstus: 1; )
Tai yra be vieneto proporcijos vertė, kuri nurodo, kiek laisvos vietos išilgai pagrindinės ašies užims kiekvienas lankstus elementas. Šiuo atveju mes suteikiame kiekvieną element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}
Dabar po ankstesne pridėkite šią taisyklę:
Straipsnis:n-to tipo(3) ( lankstus: 2; )
Skyrius - straipsnis straipsnis straipsnis - div - mygtukas div mygtukas div mygtuko mygtukas
Pažiūrėkime į kodą, kurį naudojome išdėstydami.
Santrauka
Tuo baigiame mūsų „flexbox“ pagrindus. Tikimės, kad jums buvo smagu ir smagiai pažaisite, kai mokysitės toliau. Toliau apžvelgsime kitą svarbų CSS išdėstymo aspektą – CSS tinklelius.
Pradėti
