Praktinis FlexBox pritaikymas. Flexbox elementų pozicionavimo metodas Kas yra css lankstieji

07.12.2023 -

Sveiki, habr!

Vieną gražų vakarą, nieko įdomaus nenumatant, mūsų pokalbyje sulaukėme 2012 m. pavasarį parašytos publikacijos autoriaus pasiūlymo parašyti perdarinį straipsnį, bet naudojant FlexBox ir pridedamą paaiškinimą, kas ir kaip veikia. Po tam tikrų abejonių susidomėjimas giliau suprasti specifikaciją vis tiek nugalėjo, ir aš su džiaugsmu sėdau rinkti tuos pačius pavyzdžius. Kai pasinėrėme į šią sritį, ėmė ryškėti daug niuansų, kurie išaugo į kažką daugiau nei tik maketų pertvarkymą. Apskritai, šiame straipsnyje noriu pakalbėti apie tokią nuostabią specifikaciją, pavadintą „CSS lanksčios dėžutės išdėstymo modulis“, ir parodyti kai kurias įdomias jos funkcijas bei taikymo pavyzdžius. Maloniai kviečiu visus besidominčius prisijungti prie įsilaužimo.

Norėčiau atkreipti jūsų dėmesį į tai, kad norint sukurti „FlexBox“ išdėstymą, kūrėjui reikės tam tikro pritaikymo. Iš savo pavyzdžio pajutau, kad ilgametė patirtis vaidina žiaurų pokštą. „FlexBox“ reikalauja šiek tiek kitokio mąstymo apie elementų išdėstymą sraute.

Techninė dalis

Prieš pereinant prie bet kokių pavyzdžių, verta suprasti, kokios savybės yra įtrauktos į šią specifikaciją ir kaip jos veikia. Kadangi kai kurie iš jų iš pradžių nėra labai aiškūs, o kai kurie yra apipinti mitais, kurie neturi nieko bendra su tikrove.

Taigi. „FlexBox“ yra du pagrindiniai elementų tipai: „Flex Container“ ir jo vaikai – „Flex Items“. Norėdami inicijuoti konteinerį, tiesiog per css priskirkite elementą ekranas: lankstus; arba ekranas: inline-flex;. Skirtumas tarp flex ir inline-flex yra tik sąveikos su konteinerį supančiais elementais principas, panašus į ekraną: blokas; ir ekranas: inline-block;, atitinkamai.

Lanksčiame konteineryje sukuriamos dvi ašys: pagrindinė ašis ir statmena arba skersinė ašis. Dažniausiai lankstūs elementai išlygiuojami išilgai pagrindinės ašies, o paskui išilgai skersinės ašies. Pagal numatytuosius nustatymus pagrindinė ašis yra horizontali ir nukreipta iš kairės į dešinę, o skersinė ašis yra vertikali ir nukreipta iš viršaus į apačią.

Ašių kryptį galima valdyti naudojant css savybę lankstumo kryptis. Ši savybė turi keletą reikšmių:
eilė(numatytasis): lanksčiojo konteinerio pagrindinės ašies orientacija yra tokia pati, kaip ir dabartinio eilutės krypties režimo tiesioginės ašies. Pagrindinės ašies krypties pradžia (pagrindinė pradžia) ir pabaiga (pagrindinė pabaiga) atitinka įterptinės ašies pradžią (inline-start) ir pabaigą (inline-end).
eilė-atvirkštinė: Viskas taip pat kaip ir eilėje, tik main-start ir main-end yra sukeisti.
stulpelyje: tas pats kaip eilutė, tik dabar pagrindinė ašis nukreipta iš viršaus į apačią.
stulpelis-reversas: tas pats, kas eilutę atgal, tik pagrindinė ašis nukreipta iš apačios į viršų.
Kaip tai veikia, galite pamatyti jsfiddle pavyzdyje.

Pagal numatytuosius nustatymus visi lankstūs konteinerio elementai dedami į vieną eilutę, net jei jie netelpa į konteinerį, jie išeina už jo ribų. Šis elgesys perjungiamas naudojant nuosavybę lankstus įvyniojimas. Ši nuosavybė turi tris būsenas:
nowrap(numatytasis): lankstūs elementai yra išdėstyti vienoje eilutėje iš kairės į dešinę.
apvynioti: lankstūs elementai statomi kelių eilučių režimu, perkėlimas vykdomas skersinės ašies kryptimi, iš viršaus į apačią.
apvyniojimas-reversas: toks pat kaip ir apvyniojimas, bet apvyniojamas iš apačios į viršų.
Pažiūrėkime į pavyzdį.

Patogumui yra papildomas turtas lankstus srautas, kuriame vienu metu galite nurodyti lankstumo kryptis Ir lankstus įvyniojimas. Tai atrodo taip: lankstus srautas:

Sudėtinio rodinio elementus galima sulygiuoti naudojant nuosavybę pateisinti-turinys palei pagrindinę ašį. Ši nuosavybė priima net penkias skirtingas vertes.
lankstus startas(numatytasis): lankstieji elementai išlygiuojami pagal pagrindinės ašies pradžią.
lankstus galas: elementai sulygiuoti su pagrindinės ašies pabaiga
centras: elementai sulygiuoti su pagrindinės ašies centru
tarpas-tarp: elementai talpoje užima visą turimą plotį, atokiausi elementai tvirtai prispaudžiami prie konteinerio kraštų, o laisva erdvė tolygiai paskirstoma tarp elementų.
erdvė aplink: Lankstūs elementai išlygiuoti taip, kad laisva erdvė būtų tolygiai paskirstyta tarp elementų. Tačiau verta paminėti, kad tarpas tarp konteinerio krašto ir išorinių elementų bus perpus mažesnis nei tarpas tarp elementų eilutės viduryje.
Žinoma, galite spustelėti šios nuosavybės veikimo pavyzdį.

Tai dar ne viskas, mes taip pat turime galimybę išlygiuoti elementus išilgai skersinės ašies. Taikant turtą išlyginti elementus, kuri taip pat apima penkias skirtingas vertybes, galite pasiekti įdomų elgesį. Ši savybė leidžia lygiuoti elementus iš eilės vienas kito atžvilgiu.
lankstus startas: visi elementai nustumiami į eilutės pradžią
lankstus galas: elementai nustumiami į eilutės pabaigą
centras: elementai sulygiuoti su eilutės centru
pradinė linija: elementai sulygiuoti su pagrindine teksto linija
ištempti(numatytasis): elementai ištempti, kad užpildytų visą eilutę.

Kita savybė, panaši į ankstesnę, yra suderinti turinį. Jis vienintelis atsakingas už visų linijų sulygiavimą su lanksčia talpa. Tai neturės jokio poveikio, jei lankstūs elementai užims vieną eilutę. Turtas įgyja šešias skirtingas vertes.
lankstus startas: visos linijos prispaudžiamos iki kryžminės ašies pradžios
lankstus galas: visos linijos prispaudžiamos iki skersinės ašies galo
centras: visos pakuotės linijos sulygiuotos su skersinės ašies centru
tarpas-tarp: linijos paskirstomos nuo viršutinio krašto iki apačios, paliekant laisvą tarpą tarp linijų, o tolimiausios linijos prispaudžiamos prie konteinerio kraštų.
erdvė aplink: Linijos yra tolygiai paskirstytos visame konteineryje.
ištempti(numatytasis): linijos ištemptos, kad užimtų visą laisvą vietą.
Šiame pavyzdyje galite pabandyti, kaip lygiuoti elementus ir suderinti turinį. Šias dvi savybes konkrečiai pateikiau viename pavyzdyje, nes jos gana glaudžiai sąveikauja ir kiekviena atlieka savo užduotį. Atkreipkite dėmesį, kas atsitinka, kai elementai dedami vienoje eilutėje arba keliose eilutėse.

Sutvarkėme lankstaus konteinerio parametrus, belieka išsiaiškinti lanksčių elementų savybes.
Pirmas turtas, su kuriuo susipažinsime, yra įsakymas. Ši savybė leidžia pakeisti konkretaus elemento padėtį sraute. Pagal numatytuosius nustatymus visi lankstieji elementai turi tvarka: 0; ir yra pastatyti natūralaus srauto tvarka. Pavyzdyje galite pamatyti, kaip elementai keičiami, jei jiems taikomos skirtingos eilės reikšmės.

Viena iš pagrindinių savybių yra lankstus pagrindas. Su šia savybe galime nurodyti lankstaus elemento pagrindo plotį. Numatytoji reikšmė yra automatinis. Ši nuosavybė yra glaudžiai susijusi su lankstus augimas Ir lankstus-susitraukiantis, apie kurį pakalbėsiu šiek tiek vėliau. Priima pločio reikšmę px, %, em ir kitais vienetais. Iš esmės tai nėra griežtai lankstaus elemento plotis, tai tam tikras atskaitos taškas. Palyginti su tuo, kuriuo elementas išsitempia arba susitraukia. Automatiniu režimu elementas gauna pagrindo plotį, palyginti su jame esančiu turiniu.

lankstus augimas keliuose šaltiniuose yra visiškai neteisingas aprašymas. Jame rašoma, kad jis tariamai nustato konteinerio elementų dydžių santykį. Tiesą sakant, tai netiesa. Ši savybė nurodo elemento padidinimo koeficientą, kai konteineryje yra laisvos vietos. Pagal numatytuosius nustatymus šios savybės vertė yra 0. Įsivaizduokime, kad turime lankstų konteinerį, kurio plotis yra 500 pikselių. Jo viduje yra du lankstūs elementai, kurių kiekvieno pagrindo plotis yra 100 pikselių. Taip konteineryje lieka dar 300 pikselių laisvos vietos. Jei nurodome flex-grow: 2, o flex-grow - 1; Dėl to šie blokai užims visą galimą konteinerio plotį, tik pirmojo bloko plotis bus 300px, o antrojo tik 200px. Kas nutiko? Atsitiko tai, kad turima 300 pikselių laisvos vietos konteineryje buvo paskirstyta tarp elementų santykiu 2:1, +200 pikselių pirmajam ir +100 pikselių antrajam. Tai iš tikrųjų veikia.

Čia sklandžiai pereiname prie kito panašaus turto, būtent lankstus-susitraukiantis. Numatytoji reikšmė yra 1. Ji taip pat nustato elementų pločio keitimo koeficientą, tik priešinga kryptimi. Jei konteineris yra pločio mažiau nei elementų bazinio pločio suma, tada ši savybė įsigalioja. Pavyzdžiui, konteinerio plotis yra 600 pikselių, o elementų lankstus pagrindas yra 300 pikselių. Suteikite pirmajam elementui lankstus susitraukimas: 2;, o antrasis elementas lankstus susitraukimas: 1;. Dabar sumažinkime konteinerį 300 pikselių. Todėl elementų pločio suma yra 300 pikselių didesnė nei konteinerio. Šis skirtumas paskirstomas santykiu 2:1, todėl iš pirmojo bloko atimame 200 pikselių, o iš antrojo – 100 pikselių. Naujas elementų dydis yra 100 pikselių ir 200 pikselių atitinkamai pirmam ir antram elementui. Jei nustatysime lanksčią susitraukimą į 0, neleisime elementui susitraukti iki mažesnio dydžio nei jo pagrindo plotis.

Tiesą sakant, tai labai supaprastintas aprašymas, kaip visa tai veikia, kad būtų aiškus bendras principas. Išsamiau, jei kam įdomu, algoritmas aprašytas specifikacijoje.

Visos trys savybės gali būti parašytos sutrumpintai naudojant išraišką lankstus. Tai atrodo taip:
lankstus: ;
Taip pat galime parašyti dar dvi sutrumpintas versijas, flex:auto; Ir lankstus: nėra;, tai reiškia lankstus: 1 1 auto; Ir lankstus: 0 0 auto; atitinkamai.

Išlieka paskutinė lanksčių elementų savybė lygiuotis-savaime. Čia viskas paprasta, tai tas pats, kas konteinerio elementų lygiavimas, leidžiantis nepaisyti konkretaus elemento lygiavimo.

Tai štai, aš pavargau! Duok mums pavyzdžių!

Sutvarkėme techninę dalį, ji pasirodė gana ilga, bet reikia į ją įsigilinti. Dabar galime pereiti prie praktinio taikymo.
Kurdami tuos „penkis tikrai naudingus reaguojančius išdėstymo šablonus“ turėjome išspręsti tipines situacijas, su kuriomis kūrėjai susiduria gana dažnai. Naudojant „flexbox“, šių sprendimų įgyvendinimas tampa lengvesnis ir lankstesnis.
Paimkime tą patį 4-ąjį išdėstymą, nes... jame yra įdomiausių elementų.

Pirmiausia nurodykime pagrindinį puslapio plotį, sulygiuokime jį su centru ir paspauskite poraštę iki puslapio apačios. Kaip visada apskritai.

HTML (fonas: #ccc; minimalus aukštis: 100%; šriftų šeima: sans-serif; ekranas: -webkit-flex; ekranas: lankstus; lanksti kryptis: stulpelis; ) tekstas ( paraštė: 0; užpildymas: 0 15 pikselių ekranas: flex-direction: 30px 10px: wrap-box; : 960px: 430px.

Dėl to, kad nurodėme flex-grow: 1 už .main; jis išsitempia iki viso galimo aukščio ir taip prispaudžia poraštę į apačią. Šio sprendimo pranašumas yra tas, kad poraštė gali būti nefiksuoto aukščio.

Dabar įdėkite logotipą ir meniu antraštėje.
.logo ( šrifto dydis: 0; paraštė: -10 piks. 10 piks. 10 piks. 0; ekranas: lankstus; lankstus: nėra; lygiuoti elementus: centre; ) .logo:prieš, .logo:after ( turinys: ""; ekranas: blokuoti ; ) .logo: prieš : 30 taškų 50px: teksto dekoravimas: nėra;

Kadangi antraštėje yra flex-wrap: wrap; ir pateisinti-turinys: tarpas-tarp; Logotipas ir meniu yra išsibarstę skirtingose antraštės pusėse, o jei meniu neužteks vietos, jis elegantiškai persikels po logotipu.

Toliau matome didelį įrašą ar reklamjuostę, sunku pasakyti, kas tai konkrečiai, bet ne tai. Mes turime vaizdą dešinėje, o tekstą su pavadinimu kairėje. Aš asmeniškai laikausi minties, kad bet kokie elementai turi būti kuo lankstesni, nepriklausomai nuo to, ar išdėstymas adaptyvus, ar statinis. Taigi šiame įraše turime šoninę juostą, kurioje yra paveikslėlis, griežtai tariant, negalime tiksliai pasakyti, kokio pločio mums reikia, nes šiandien turime didelį paveikslėlį, rytoj mažą ir nenorime perdaryti elemento; kiekvieną kartą nuo nulio. Tai reiškia, kad mums reikia, kad šoninė juosta užimtų jai reikalingą vietą, o likusi erdvė bus skirta turiniui. Padarykime tai:

Dėžutė ( šrifto dydis: 1,25 atm.; eilutės aukštis: 1,5; šrifto stilius: kursyvas; paraštė: 0 0 40 piks. -50 piks.; ekranas: -webkit-flex; ekranas: lankstus; lankstus apvyniojimas: apvyniojimas; pagrindimo turinys: centre; .box-base ( paraštė kairėje: 50 tšk.; lankstus: 1 0 430 tšk.; ) .dėžutės pusė ( paraštė kairėje: 50 pikselių; lankstus: nėra; ) .box-img ( maksimalus plotis: 100 %; aukštis : automatinis)

Kaip matote .box-base, kur turime pavadinimą ir tekstą, aš nurodžiau pagrindo plotį lankstus pagrindas: 430 pikselių;, taip pat draudžiama naudoti bloko susitraukimą lankstus susitraukimas: 0;. Šia manipuliacija sakėme, kad turinys negali būti mažesnis nei 430 pikselių. Ir atsižvelgiant į tai, kad .dėžutei aš nurodysiu flex-wrap: įvyniojimas; Kai šoninė juosta ir turinys netelpa į konteinerį.box, šoninė juosta automatiškai pateks po turiniu. Ir visa tai be pritaikymo @media! Manau, kad tai tikrai labai šaunu.

Mums belieka trijų stulpelių turinys. Yra keletas šios problemos sprendimų, vieną iš jų parodysiu kituose išdėstymuose.
Sukurkime konteinerį, pavadinkime jį .content ir sukonfigūruokime.
.content ( paraštės apačia: 30 tšk.; ekranas: -webkit-flex; ekranas: lankstus; flex-wrap: wrap; )

Konteineris turi tris stulpelius: .banners, .posts, .comments
.baneriai (lankstus: 1 1 200 tšk.; ) .posts ( paraštė: 0 0 30 tšk. 30 tšk.; lankstus: 1 1 200 tšk.; ) .comments ( paraštė: 0 0 30 tšk. 30 piks.; lankstus: 1 1 200 tšk.;)

Stulpeliams daviau 200px pagrindo plotį, kad stulpeliai per daug nesusiaurėtų, bet geriau pagal poreikį jas perstumdytų viena po kita.

Pagal išdėstymą neapsieisime be @media su turiniu, todėl dar šiek tiek pakoreguosime stulpelių elgseną pagal plotį<800px и <600px.
@medijos ekranas ir (maks. plotis: 800 piks.) ( .reklamjuostės ( paraštės kairėje: -30 pikselių; ekranas: -webkit-flex; ekranas: lankstus; lankstus pagrindas: 100%; ) .posts ( paraštės kairėje: 0; ) ) @medijos ekranas ir (maks. plotis: 600 piks.) ( .turinys ( ekranas: blokuoti; ) .baneriai ( paraštė: 0; ekranas: blokuoti; ) .komentarai ( paraštė: 0; ) )

Tai yra visa magija kuriant „FlexBox“ maketą. Dar viena man patikusi užduotis yra 5 makete, konkrečiai tai susiję su turinio pritaikymu.

Matome, kaip darbalaukio raiška įrašai statomi tinklelyje iš trijų iš eilės. Kai peržiūros srities plotis tampa mažesnis nei 800 pikselių, tinklelis virsta stulpeliu su įrašais, kur įrašo nuotrauka išrikiuojama pakaitomis kairėje ir dešinėje įrašo turinio pusėse. O jei plotis mažesnis nei 600px, įrašo nuotrauka visiškai paslėpta.
.grid ( ekranas: -webkit-flex; ekranas: flex; flex-wrap: wrap; justify-content: tarpas tarp; ) .grid-itm ( paraštė-apačia: 30 pikselių; lankstus pagrindas: calc(33,33% - 30px * 2/3); 100% grid-img ( flex: 0 0 auto; ) .grid-itm:nth-child (lyginis) .grid-img ( paraštė: 0 0 0 30 pikselių; tvarka: 2; ) .grid-itm:nth-child (nelyginis) .grid-img ( paraštė: 0 30 piks. 0 0; ) .grid-cont ( lankstus: 1 1 automatinis; ) .grid-title ( teksto lygiavimas: kairėje; ) ) @medijos ekranas ir (maks. plotis: 600 piks.) ( .grid-img (rodymas: nėra; ) )

Tiesą sakant, tai tik maža dalis to, ką galima įgyvendinti naudojant „FlexBox“. Specifikacija leidžia sukurti labai sudėtingus puslapių maketus naudojant paprastą kodą.

„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, tinka ne visais atvejais, 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. Pradžioje tinklalapiai atrodė kaip vienos gijos tekstiniai dokumentai, kiek vėliau, suskirstant puslapį į blokus buvo daromos lentelės, vėliau tapo madinga maketuoti flotacijomis, o oficialiai mirus ie6, atsirado inline-block technika. taip pat pridėjo. 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 eilutės (vieno stulpelio) blokų išdėstymą. Reikia pasakyti, kad pagal numatytuosius nustatymus lankstus konteineris blokus savo viduje visada išdėstys į vieną eilutę. 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 savybė, kuri nustato, kaip gautos blokų eilutės bus vertikaliai išlygiuotos ir kaip jos padalins visą lanksčiojo konteinerio erdvę.

Svarbu: align-content veikia tik kelių eilučių režimu (t. y. esant lanksčiam apvyniojimui: į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ą laisvą vietą.

CSS ypatybės flex-wrap ir align-content turėtų būti taikomos tiesiai lanksčiam konteineriui, o ne jo 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 reiškia, kad absoliuti flex-grow vertė nenustato tikslaus pločio. Jis nustato jo „godumo“ laipsnį, palyginti su kitais to paties lygio lankstumo blokais.

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 kaip... */ .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

elementas1

2 punktas

3 elementas

4 punktas

5 punktas

Šiuo 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 dėl to, kad pažįstamas horizontalus lygiavimas per paraštę:auto tinka ir vertikaliai!

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“ labai tinka tinklalapio komponentų ir atskirų tinklalapių dalių išdėstymui, tačiau neparodė savo geriausios pusės dėl pagrindinių maketų (straipsnio, antraštės, poraštės, naršymo juostos ir kt.) išdėstymo. 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 ;)

Turinys:

Flexbox yra naujas būdas tvarkyti blokus puslapyje. Tai technologija, sukurta specialiai elementų išdėstymui, skirtingai nei plūdės. Naudojant Flexbox Galite lengvai išlygiuoti elementus horizontaliai ir vertikaliai, pakeisti elementų rodymo kryptį ir tvarką, ištempti blokus iki viso pagrindinio aukščio arba prikalti juos prie apatinio krašto.

UPD nuo 2017-02-02:„Flexbox“ sukūriau patogų „cheat sheet“ su tiesioginėmis demonstracinėmis versijomis ir aprašymais iš specifikacijos: „Flexbox“ cheatsheet.

Pavyzdžiuose naudojama tik nauja sintaksė. Rašymo metu jie rodomi teisingiausiai Chrome. Jie iš dalies veikia „Firefox“, bet visiškai ne „Safari“.

Pasak caniuse.com, Flexbox nepalaiko IE 8 ir 9 bei Opera Mini, o kitose naršyklėse palaikomos ne visos ypatybės ir (arba) reikalingi priešdėliai.

Tai reiškia, kad šiuo metu ši technologija negali būti plačiai naudojama, tačiau dabar pats laikas jas geriau pažinti.

Pirmiausia turite žinoti, kad lankstieji elementai yra išdėstyti išilgai ašių. Pagal numatytuosius nustatymus elementai yra išdėstyti horizontaliai – išilgai pagrindinė ašis- pagrindinė ašis.

Taip pat reikia nepamiršti, kad naudojant Flexbox float , Clear ir Vertikalus lygiavimas neveikia vidiniams blokams, taip pat ypatybėms, kurios apibrėžia stulpelius tekste.

Paruoškime bandymų poligoną eksperimentams:

Vienas pirminis blokas (geltonas) ir 5 antriniai blokai.

Ekranas: lankstus

O dabar prie pagrindinio elemento pridedame display: flex; . Vidiniai divai yra išdėstyti (išilgai pagrindinės ašies) vienodo aukščio stulpeliais, neatsižvelgiant į turinį.

ekranas: lankstus; Visi antriniai elementai tampa lankstūs, o ne eilutiniai arba blokiniai, kaip buvo iš pradžių.

Jei pirminiame bloke yra vaizdų arba teksto be paketų, jie tampa anoniminiais lanksčiais elementais.

Rodyti nuosavybę Flexbox gali turėti dvi reikšmes:

flex – elgiasi kaip blokinis elementas. Skaičiuojant blokų plotį pirmenybė teikiama išdėstymui (jei blokai nėra pakankamai platūs, turinys gali peržengti ribas).

inline-flex – elgiasi kaip inline blokas. Turinys turi pirmenybę (turinys išskleidžia blokus iki reikiamo pločio, kad linijos tilptų, jei įmanoma).

Lanksti kryptis

Bloko išdėstymo kryptis valdoma lankstumo krypties savybe.

Galimos reikšmės:

eilutė - eilutė (numatytoji reikšmė); row-reverse - eilutė su elementais atvirkštine tvarka; stulpelis - stulpelis; stulpelis-reversas – stulpelis su elementais atvirkštine tvarka.

eilutę ir eilutę atvirkščiai

stulpelis ir stulpelis-reversas

Flex-wrap

Vienoje eilutėje gali būti daug blokų. Ar jie apvyniojami, ar ne, priklauso nuo lankstaus vyniojimo savybių.

Galimos reikšmės:

nowrap - blokai neperkeliami (numatytoji reikšmė); apvyniojimas - blokai perkeliami; wrap-reverse - blokeliai apvyniojami ir išdėstomi atvirkštine tvarka.

Sutrumpinti flex-direction ir flex-wrap ypatybes, yra savybė: flex-flow .

Galimos reikšmės: galite nustatyti abi ypatybes arba tik vieną. Pavyzdžiui:

lankstus srautas: kolonėlė; flex-flow: wrap-reverse; flex-flow: stulpelis-atvirkštinis apvyniojimas;

Eilučių atvirkštinio apvyniojimo demonstracinė versija:

Įsakymas

Norėdami valdyti blokų tvarką, naudokite užsakymo ypatybę.

Galimos reikšmės: skaičiai. Norėdami pirmiausia įdėti bloką, suteikite jam tvarką: -1:

Pagrįskite-turinys

Yra keletas elementų lygiavimo ypatybių: justify-content , align-items ir align-self .

pagrindiniam sudėtiniam rodiniui taikomas justify-content ir align-elements, antriniams sudėtiniams rodiniams taikomas sulygiuoti save.

Justify-content yra atsakingas už pagrindinės ašies išlygiavimą.

Galimos pagrindimo turinio reikšmės:

flex-start – elementai lygiuojami nuo pagrindinės ašies pradžios (numatytoji reikšmė); lankstus galas - elementai išlygiuoti nuo pagrindinės ašies galo; centras - elementai sulygiuoti su pagrindinės ašies centru; erdvė tarp - elementai yra išlyginti išilgai pagrindinės ašies, paskirstydami laisvą erdvę tarpusavyje; erdvė aplink – elementai išlygiuoti išilgai pagrindinės ašies, aplink juos paskirstant laisvą erdvę.

lanksti pradžia ir lanksti pabaiga

erdvė-tarp, erdvė-aplink

Sulygiuoti elementus

align-items yra atsakingas už išlyginimą išilgai statmenos ašies.

Galimos lygiavimo elementų vertės:

flex-start - elementai išlygiuoti nuo statmenos ašies pradžios; flex-end - elementai išlygiuoti nuo statmenos ašies galo; centras - elementai išlygiuoti centre; bazinė linija – elementai išlygiuoti išilgai bazinės linijos; ruožas - elementai ištempti, užimantys visą erdvę išilgai statmenos ašies (numatytoji vertė).

lanksti pradžia, lanksti pabaiga

pradinė linija, ruožas

Išlyginti-savęs

align-self taip pat yra atsakingas už statmenos ašies išlygiavimą, tačiau yra nustatytas atskiriems lankstiesiems elementams.

Galimos lygiavimo vertės:

auto yra numatytoji reikšmė. Nurodo, kad elementas naudoja pirminio elemento lygiavimo elementus; flex-start - elementas išlygiuotas nuo statmenos ašies pradžios; flex-end - elementas išlygiuotas nuo statmenos ašies galo; centras - elementas išlygiuotas centre; bazinė linija – elementas išlygiuotas išilgai bazinės linijos; ruožas - elementas ištemptas, užimantis visą aukščio erdvę.

Sulygiuoti turinį

Norint valdyti kelių eilučių lankstaus konteinerio lygiavimą, yra ypatybė align-content.

Galimos reikšmės:

flex-start - elementai išlygiuoti nuo pagrindinės ašies pradžios; lankstus galas - elementai išlygiuoti nuo pagrindinės ašies galo; centras - elementai sulygiuoti su pagrindinės ašies centru; erdvė tarp - elementai yra išlyginti išilgai pagrindinės ašies, paskirstydami laisvą erdvę tarpusavyje; erdvė aplink - elementai išlygiuoti išilgai pagrindinės ašies, aplink juos paskirstant laisvą erdvę; ruožas – elementai ištempiami, kad užpildytų visą aukštį (numatytoji vertė).

lanksti pradžia, lanksti pabaiga

centras, ruožas

erdvė-tarp, erdvė-aplink

Ps: Niekada negalėjau matyti kai kurių dalykų veikiant, pavyzdžiui, linijos lankstus srautas: stulpelio apvyniojimas arba pilnas tos pačios lanksčios krypties įvedimas: stulpelis; flex-wrap: įvyniojimas; .

Elementai stovi stulpelyje, bet neperkeliami:

apvyniojimas neveikia su lanksčia kryptimi: stulpelis; , nors specifikacijoje tai atrodo taip:

Manau, kad laikui bėgant pavyks.

UPD nuo 2014-06-21: viskas veikia, jei nustatote bloko aukštį. Ačiū už arbatpinigius

Šiame straipsnyje pristatysime CSS Flexbox technologiją, skirtą sukurti lanksčius tinklalapių maketus.

CSS Flexbox technologijos palaikymas naršyklėje

„Flexbox“ technologiją jau palaiko beveik visos šiuo metu naudojamos naršyklės (naudojant priešdėlius: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+ ) .

„Flexbox“ pagrindai (tinklelis)

„Flexbox“ yra pagrįsta tinkleliu. Jį sudaro tik 2 elementai. Pirmasis elementas yra lankstus konteineris. Lankstus konteineris sukuriamas prie reikiamo HTML elemento pridedant CSS rodymo ypatybę su reikšme flex arba flex-inline.

Po to visi tiesioginiai lanksčiojo konteinerio vaikai(vaikai) automatiškai tampa lankstieji elementai(2-asis „flexbox“ tinklelio elementas).

HTML žymėjimas:

Flex-container ( ekranas: lankstus; /* flex || inline-flex */ ) Flexbox tinklelio struktūra

Lankstūs elementai pagal numatytuosius nustatymus užima visą lankstaus konteinerio aukštį.

Flex arba flex-inline reikšmė lemia, kaip lankstus konteineris bus pristatytas puslapyje. Jei reikia pavaizduoti kaip blokas, tada naudokite lankstumo reikšmę. Jei elementą reikia pavaizduoti kaip mažosios raidės, tada naudokite flex-inline reikšmę. Tokiu atveju jis užims tiek vietos puslapyje, kiek reikia jo elementams rodyti.

Lanksčiojo elemento išlyginimo kryptis

Lanksčiųjų elementų išlygiavimo kryptis lankstaus konteinerio viduje nurodoma naudojant kirvius.

„Flexbox“ jie skiria 2 ašys. Pirmoji ašis vadinama pagrindinis arba pagrindinis(pagal nutylėjimą nukreipta į dešinę). Antra - skersinis(pagal numatytuosius nustatymus žemyn).

Elementai lanksčiame konteineryje yra išdėstyti vienoje eilutėje (pagal numatytuosius nustatymus) net tada, kai joms neužtenka vietos. Flex elementai yra išdėstyti lanksčiame konteineryje išilgai pagrindinės ašies.

Numatytasis elementų išdėstymas konteineryje (lankstūs daiktai, kuriems nepakanka vietos lanksčiame konteineryje, iškrenta už jo ribų)

Naudojant CSS Flexbox, lankstieji elementai gali būti perkelti į naujas eilutes (jei jiems nepakanka vietos dabartinėje eilutėje) nustačius CSS flex konteinerio flex-wrap ypatybę į wrap arba wrap-reverse .

Flex-wrap: įvyniojimas; /* nowrap (vienoje eilutėje – numatytasis) wrap (leisti apvynioti lanksčius elementus į naujas eilutes) wrap-reverse (apvynioti lanksčiuosius elementus atvirkštine tvarka) */

„Flex-wrap“ CSS savybės apvyniojimo ir apvyniojimo-atvirkštinės reikšmės nustato skersinės ašies kryptį.

„Flexbox“ pagrindinės ašies kryptis nustatoma naudojant CSS ypatybę „flex-direction“.

Lanksti kryptis: eilė; /* eilutė (dešinėn) – numatytoji eilutė – atvirkštinė (kairėje) stulpelis (žemyn) stulpelis – atvirkštinė (aukštyn) */

Naudodami šią savybę galite įsitikinti, kad lankstieji elementai yra išdėstyti ne horizontaliai (eilutėse), o vertikaliai (stulpeliais).

„Flex-direction“ ir „flex-wrap“ ypatybes galima nurodyti naudojant bendrąją CSS ypatybę „flex-flow“:

Flex-flow: eilė be apvyniojimo; /* 1 reikšmė – lankstumo kryptis, 2 reikšmė – lankstymo kryptis */

Lanksčių elementų lygiavimas

„Flexbox“ elementų lygiavimas konteineryje atliekamas dviem kryptimis (ašimis).

Lanksčių elementų išlygiavimas išilgai pagrindinės ašies

Elementų lygiavimas išilgai pagrindinės ašies atliekamas naudojant Justify-content CSS ypatybę:

pateisinti-turinys: flex-start; /* flex-start (lankstūs elementai išlygiuoti ašies pradžios atžvilgiu) – pagal numatytuosius nustatymus lankstus galas (lankstūs elementai išlygiuoti ašies galo atžvilgiu) centras (lanksčiojo konteinerio centre) tarpas tarp (tolygiai, t. y. esant vienodam atstumui tarp lanksčiųjų elementų) tarpas aplink (tolygiai, bet pridedant pusę tarpo prieš pirmąjį lanksčią elementą ir po paskutinio) */ Lanksčių elementų išlygiavimo pagal pagrindinę ašį parinktys

Lanksčių elementų išlygiavimas išilgai skersinės ašies

Lanksčių elementų lygiavimas lanksčiame konteineryje išilgai skersinės ašies atliekamas naudojant CSS ypatybę align-items:

Išlyginti elementus: ištempti; /* tempimas (tempimas per visą skersinės ašies ilgį) - pagal numatytuosius nustatymus flex-start (skersinės ašies pradžios atžvilgiu) flex-end (skersinės ašies galo atžvilgiu) bazinė linija (palyginti su bazine linija) ) centras */ Lanksčių elementų išlyginimo išilgai skersinės ašies parinktys

Lanksčių konteinerių linijų išlygiavimas

CSS Flexbox leidžia sulygiuoti ne tik pačius lanksčius elementus, bet ir linijas, ant kurių jie yra.

Išlygiuoti turinį: ruožas /* ruožas (ištemptas per visą skersinės ašies ilgį) – pagal numatytuosius nustatymus flex-start (skersinės ašies pradžios atžvilgiu) flex-end (skersinės ašies galo atžvilgiu) centras ( centre) tarpas-tarp (tolygiai, t.y. su vienodu atstumu tarp eilučių) tarpas-aplink (tolygiai, bet pridedant pusę tarpo prieš pirmą eilutę ir po paskutinės) */ Lanksčiojo konteinerio linijų lygiavimo parinktys

Turinio suderinimo ypatybę prasminga naudoti tik tada, kai lankstūs elementai lanksčiame konteineryje yra keliose eilutėse. Kad tai įvyktų, visų pirma būtina, kad visų lanksčiųjų elementų plotis būtų didesnis nei lanksčiojo sudėtinio rodinio plotis, ir, antra, lanksčiojo sudėtinio rodinio flex-wrap CSS ypatybė turi būti nustatyta į wrap arba wrap-reverse .

align-self CSS nuosavybė

Savybė align-self, skirtingai nei ankstesnės (justify-content , align-items ir align-content), yra skirta lankstiesiems elementams. Tai leidžia keistis lankstaus elemento išlyginimas išilgai skersinės ašies krypties. Savybės align-self vertės gali būti tokios pat kaip ir sulygiuoti elementai.

Išlyginti elementus: ištempti; /* automatinis (numatytasis) || ruožas || lankstus startas || lankstus galas || bazinė linija || centras */

Lankstus sudėtinis rodinys ( ekranas: lankstus; plotis: 300 tšk.; aukštis: 150 tšk.; lygiuoti elementus: centre; užpildymas: 10 taškų; fono spalva: #efefef; ) .flex-container_element-1, .flex-container_element-2, .flex -container_element-3, .flex-container_element-4 ( flex-basis: 70px; text-align: center; padding: 15px; šrifto dydis: 30px; ) .flex-container_element-1 ( align-self: flex-start; background: #fe4; ) .flex-container_element-2 ( align-self: flex-end; background: pink; ) .flex-container_element-3 ( align-self: stretch; background: lime; ) .flex-container_element-4 ( align-self: auto; background: cyan; ) Kaip veikia CSS align-self ypatybė

Lanksčių elementų tvarkos keitimas

Pagal numatytuosius nustatymus lankstieji elementai rodomi lanksčiojo sudėtinio rodinio tokia tvarka, kokia jie rodomi HTML kode. Norėdami pakeisti kai kurių lanksčiųjų elementų tvarką, palyginti su kitais CSS Flexbox, galite naudoti užsakymo ypatybę. Ši CSS ypatybė lanksčiuosius elementus išdėsto lanksčiame konteineryje jų skaičiaus didėjimo tvarka.

Užsakymas: 0; /* 0 (numatytasis) teigiamas arba neigiamas sveikasis skaičius */

Pavyzdžiui:

...

CSS: .flex-container ( ekranas: flex; ) /* perkelti 2-ąjį flex elementą į pabaigą */ .flex-container_element-2 (tvarka: 2; ) /* perkelti 3-ią elementą į 2 */ .flex-container_element-3 ( tvarka: 1; ) /* 4 lankstumo elementų padėtis prieš 1 */ .flex-container_element-4 ( tvarka: -1; ) Kaip veikia CSS užsakymo ypatybė

Lanksčiojo elemento pločio valdymas

„Flexbox“ turi keletą CSS savybių, kurios lemia, koks gali būti „flex“ elemento plotis.

CSS nuosavybės lankstumo pagrindas

Šis turtas skirtas pradinio lankstaus elemento pločio nustatymas. Galite nustatyti pločio reikšmę naudodami įvairius matavimo vienetus, pvz., px, %, em ir kt. Pagal numatytuosius nustatymus ši savybė nustatyta kaip automatinė (šiuo atveju elemento plotis bus apskaičiuojamas automatiškai, atsižvelgiant į jo turinį) .

Galutinį lanksčios prekės plotį lems priklausomai nuo flex-grow ir flex-shrink CSS savybių verčių, kurios nustatytos ne tik šiam elementui, bet ir kitiems šio lankstaus konteinerio lankstiems elementams.

flex-grow CSS nuosavybė

Ši savybė lemia, ar pradinis lankstaus elemento plotis didėja (auga). Lanksčiojo elemento plotis padidinamas laisvos vietos eilutėje. CSS ypatybės „flex-grow“ vertė yra sveikasis skaičius. Būtent ši reikšmė lemia (jei ji didesnė arba lygi 1), kokią laisvos vietos dalį užims lankstus elementas.

Pavyzdžiui:

...

CSS: .flex-container ( ekranas: lankstus; plotis: 600 tšk.; ) .flex-container_element-1 ( flex-basis: 40%; flex-grow: 1; ) .flex-container_element-2 ( flex-basis: 40% flex-grow: 4) Kaip veikia CSS savybė flex-grow

Šiame pavyzdyje, jei lankstieji elementai yra toje pačioje eilutėje ir yra laisvos vietos (600 × (1–0,8) = 120 pikselių):

1/5 šios vietos bus pridėta prie elemento.flex-container_element-1 pločio (120×1/5=24px);
4/5 šios vietos bus pridėta prie elemento pločio.flex-container_element-2 (120×4/5=96px).

Kitaip tariant, flex-grow CSS ypatybė leidžia ne tik nurodyti, kad lanksčiojo elemento plotis gali augti, bet ir nurodyti, kiek ši reikšmė gali augti kitų elementų atžvilgiu.

Pagal numatytuosius nustatymus CSS ypatybė flex-grow nustatyta į 0. Tai reiškia, kad flex elementas negali augti (padidinti jo pločio).

flex-shrink CSS savybė

Ši savybė lemia, ar galima sumažinti lankstaus elemento plotį. Lanksčiojo elemento plotis bus sumažintas tik tuo atveju, jei linijos pločio nepakaks, kad būtų rodomi visi lankstūs elementai esantis joje. Reikiamas plotis apskaičiuojamas pagal pradinį plotį, kuriame yra visi lankstieji elementai.

Pavyzdžiui:

...

CSS: .flex-container ( ekranas: lankstus; plotis: 500 pikselių; ) .flex-container_element-1 ( flex-basis: 300px; flex-shrink: 1; ) .flex-container_element-2 ( flex-basis: 300px; lankstus -sutraukti: 3; ) Kaip veikia CSS savybė flex-shrink

Lanksčiojo konteinerio plotis yra 500 pikselių. „Flex“ elementams rodyti reikia 600 piks. Dėl to trūksta 100 pikselių. Šiame pavyzdyje 2 lankstieji elementai (.flex-container_element-1 ir .flex-container_element-2) gali būti sumažinti. Pirmojo lankstaus elemento plotis.flex-container_element-1 šiuo atveju bus 300 – 1/4*100= 275px. Antrojo lankstaus elemento plotis.flex-container_element-2 šiuo atveju bus 300 – 3/4*100= 225px.

Numatytoji reikšmė:

Lankstus susitraukiantis: 1;

Jei tau reikia neleisti lanksčiojo elemento pločiui mažėti, tada kaip lankstaus susitraukimo savybės reikšmę turite nurodyti skaičių 0.

CSS flex savybė

Norėdami lengvai nustatyti lanksčiojo augimo, lankstumo susitraukimo ir lankstumo pagrindą, galite naudoti flex CSS ypatybę.

Numatytoji reikšmė:

Flex: 0 1 auto; /* 0 – lankstus augimas (1-oji vertė) 1 – lankstus susitraukimas (2-oji vertė) automatinis – lankstumo pagrindas (3-oji vertė) */

Puslapio išdėstymas naudojant CSS Flexbox

Šiame skyriuje mes sukursime paprastą interaktyvų išdėstymą naudodami „Flexbox“.

Išdėstymo struktūrą sudarys 3 skyriai:

antraštė (kad būtų rodoma antraštė ir pagrindinis meniu);
pagrindinis (pagrindinei daliai rodyti);
poraštė (poraštei).

Pagrindinė dalis, savo ruožtu, bus padalinta į dar 2 skyrius (juos pozicionuosime naudodami CSS Flexbox). Dideliuose ekranuose (>=992 pikseliai) šios sekcijos bus išdėstytos horizontaliai, o kituose ekranuose – vertikaliai (<992px).

[Puslapio antraštė...]

[Pagrindinė dalis...]

CSS: /* konteineris (nustato bloko plotį, priklausomai nuo peržiūros srities pločio) */ .container ( padėtis: santykinė; paraštė kairėje: automatinė; paraštė dešinėje: automatinė; užpildymas dešinėje: 15 pikselių; užpildymas kairėje: 15 pikselių; ) @ medija (min. plotis: 576 piks.) ( .container ( plotis: 540 tšk.; maks. plotis: 100 %; ) ) @medija (min. plotis: 768 piks.) ( .container ( plotis: 720 piks.; maks. plotis: 100 %; ) ) @medija (min. plotis: 992 tšk.) ( .container ( plotis: 960 tšk.; maks. plotis: 100 %; ) ) @media (min. plotis: 1200 piks.) ( .container ( plotis: 1140 tšk.; maks. plotis: 100 % ; ) ) /* lankstus konteineris */ .row-flex ( ekranas: -webkit-box; ekranas: -webkit-flex; ekranas: -ms-flexbox; ekranas: flex; -webkit-flex-wrap: wrap; - ms-flex-wrap: wrap margin-right: -15px ) /* CSS flex elementų nustatymai */ .col-flex ( pozicija: santykinis; plotis; 100 %; min aukštis: 1px; užpildymas dešinėje: 15px; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; lankstumas: 0 0 100 %; maksimalus plotis: 100%; ) /* straipsnio plotis ir šoniniai blokai dideliems ekranams */ @media (min-width: 992px) ( /* 2/3 konteinerio pločio */ .main_article ( -webkit-box-flex: 0; -webkit-flex : 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.66667% ) 0; -webkit-flex: 0 0 33,333333%; -ms-flex: 0 0 33,333333%;

Norėdami palaikyti išdėstymą daugelyje naršyklių, prie CSS pridėsime reikiamus priešdėlius ir maksimalų plotį.

Norėdami "paversti" bloką į lanksčią talpyklą, naudosime klasę row-flex. Mes nustatysime kiekvieno flex elemento (main_article ir main_aside) plotį flex konteineryje naudodami flex CSS ypatybę.

Pavyzdžiui, naudokite „Flexbox“, kad pažymėtume bloką „Poraštė“ ir pagrindinio straipsnio skyrių „Įdomūs dalykai svetainėje“.

Skiltį „Poraštė“ padalinsime į 4 lygias dalis (vienos dalies minimalus plotis 200px), o „Įdomūs dalykai svetainėje“ – į 3 dalis (minimalus vienos dalies plotis 300px).

[Puslapio antraštė...]

[Pagrindinė dalis...]

[1 dar...]

[dar 2...]

[Dar 3...]

Papildomas CSS:

Footer_block, .main_other_article ( -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; - ms-flex-pozityvus: 1; max-width: 100% )

Modulis Flexbox išdėstymas(lankstus langelis – šiuo metu W3C kandidato rekomendacija) siekiama užtikrinti efektyvesnį išdėstymo, išlygiavimo ir laisvos vietos tarp konteinerio elementų išdėstymo būdą, net kai jų dydis nežinomas ir (arba) dinamiškas (taigi žodis „lankstus“) .

Pagrindinė lankstaus išdėstymo idėja yra suteikti konteineriui galimybę keisti jo elementų plotį / aukštį (ir tvarką), kad ji geriausiai užpildytų erdvę (daugeliu atvejų, kad būtų palaikomi visų tipų ekranai ir ekrano dydžiai). Lankstus konteineris ištempia elementus, kad užpildytų erdvę, arba suspaudžia juos, kad jie neišsipiltų.

Svarbiausia, kad „flexbox“ išdėstymas nepriklauso nuo krypties, skirtingai nei įprasti maketai (vertikaliai išdėstyti langeliai, o horizontalūs – įterpti elementai). Nors įprastas išdėstymas puikiai tinka tinklalapiams, jam trūksta lankstumo (jokio žodžių būdo), kad būtų galima palaikyti dideles ar sudėtingas programas (ypač kai reikia keisti ekrano orientaciją, dydžio keitimą, ištempimą, susitraukimą ir pan.).

komentuoti: „Flexbox“ išdėstymas geriausiai tinka programos komponentams ir nedidelio masto maketams, o tinklelio išdėstymas labiau naudojamas didelio masto maketams.

Pagrindai

Nes „flexbox“ yra visas modulis, o ne tik viena nuosavybė, jis sujungia daugybę savybių. Kai kurie iš jų turi būti pritaikyti konteineriui (pagrindinis elementas, vadinamasis lankstus konteineris), o antriniams elementams taikomos kitos savybės, arba lankstieji elementai.

Jei įprastas išdėstymas pagrįstas blokų ir eilučių elementų srauto kryptimis, tada lankstus išdėstymas yra pagrįstas „lanksčiomis srauto kryptimis“. Peržiūrėkite šią diagramą iš specifikacijų, paaiškinančių pagrindinę lankstaus išdėstymo idėją.

Iš esmės elementai bus paskirstyti arba kartu pagrindinė ašis(nuo pagrindinis startas prieš pagrindinis galas), arba kartu skersinė ašis(nuo kryžminis startas prieš skersinis galas).

pagrindinė ašis- pagrindinė ašis, išilgai kurios yra lankstieji elementai. Atkreipkite dėmesį, kad jis neturi būti horizontalus, viskas priklauso nuo lankstumo krypties savybės (žr. toliau).
pagrindinis startas | pagrindinis galas- lankstieji elementai dedami į konteinerį nuo pagrindinės pradžios padėties iki pagrindinės pabaigos padėties.
pagrindinis dydis- lankstaus elemento plotis arba aukštis, priklausomai nuo pasirinktos pagrindinės vertės. Bazinis dydis gali būti elemento plotis arba aukštis.
skersine ašimi- skersinė ašis, statmena pagrindinei. Jo kryptis priklauso nuo pagrindinės ašies krypties.
kryžminis startas | skersinis galas- lanksčios linijos užpildomos elementais ir dedamos į konteinerį nuo kryžminės pradžios iki kryžminės pabaigos padėties.
kryžiaus dydis- lankstaus elemento plotis arba aukštis, priklausomai nuo pasirinkto matmens, yra lygus šiai reikšmei. Ši savybė yra tokia pati kaip elemento plotis arba aukštis, priklausomai nuo pasirinkto matmens.

Savybės

ekranas: flex | inline-flex;

Tai taikoma:

Apibrėžia lanksčią talpyklą (į eilutę arba bloką, priklausomai nuo pasirinktos reikšmės), sujungia lankstų kontekstą visiems jo tiesioginiams antriniams elementams.

ekranas: kitos reikšmės | lankstus | inline-flex;

Turėkite omenyje:

CSS stulpeliai neveikia su flex konteineriu
plūduriuoti , aiškiai ir vertikaliai išlygiuoti neveikia su lanksčiais elementais