Vaikeväärtus: 0 1 AUTO.

W3C soovitab individuaalsete omaduste asemel kasutada lühendatud flex vara, kuna Flex taastab õigesti määratlemata komponente tüüpiliseks kasutamiseks.

align-ise.

Align-Self omadus võimaldab teil tühistada vaikimisi joondamine (või määratud väärtuse läbi viisakeeled) üksikute flex elemente. Olemasolevate väärtuste mõistmiseks vaadake Flex konteineri joondamispunktide kirjeldust.

Väärtused

Kolmandate ja neljanda paindumise elemendi jaoks tühistatakse joondamise-ise omandi kaudu joondamine.

Moodul Flexbox-Leuauta (Paindlik kast - "Paindlik plokk", ON sel hetkel W3C kandidaadi soovitus) paneb ülesande pakkuma tõhusamat viisi vaba ruumi paigaldamiseks, tasandamiseks ja levitamiseks elementide vahel konteineris, isegi kui nende suurus ei ole teada ja / või dünaamiline (seega sõna "paindlik").

Flex-valvuri peamine idee konteineris, mis on varustatud võimega muuta selle elementide laiuse / kõrgust (ja järjekorda) ruumi parimate ruumide täitmiseks (enamikul juhtudel - toetada igat liiki kuvarit ja ekraanide suurust ). Flex konteiner venib elemendid, et täita vaba ruumi või surub neid, et vältida piiri välja.

Kõige olulisem, Flexbox-Leiaut ei sõltu suunas, erinevalt tavalistest leiantidest (vertikaalselt asuvad plokid ja inline elemendid on horisontaalselt). Kuigi tavaline Leiaut on veebilehtede jaoks suur, puudub see paindlikkus (no canalybur) suurte või keeruliste rakenduste toetamiseks (eriti kui tegemist on ekraani orientatsiooni muutmisega, suuruse muutmise, venitamise, kokkusurumise jne muutmisega).

Kommentaar: Flexbox-Leuaout sobib kõige paremini rakenduse ja väikesemahuliste leuauticsi komposiitide osade jaoks, samas kui grid on laialaste jaoks rohkem kasulikum.

Põhitõed

Sest Flexbox on kogu moodul ja mitte ainult üks vara, see ühendab palju omadusi. Mõned neist tuleks konteinerile rakendada (vanemaelement, nn flex konteiner), samas kui teised omadused kehtivad lastelementide suhtes või flex elemendid.

Kui tavaline Leuaout põhineb ploki ja inline elementide suundadel, põhineb Flex-Liaut "Flex-voolu suundades". Kontrollige seda skeemi spetsifikatsioonist, mis selgitab Flex-Leuaiovi põhiidee.

Enamik elemente levitatakse kas mööda peamine telg (alates põhiline algus. enne lõppu.) või mööda põrketelje (alates ristkäivitus. enne ristlõike.).

• peatelg - peamine telg mööda, mis painduvad elemendid asuvad. Märkus, see ei pruugi olla horisontaalne, see kõik sõltub flex-suuna varast (vt allpool).
• põhiline algus. | lõppu. - Flex elemendid paigutatakse mahutisse põhiasendisse põhiasendisse.
• peamine suurus. - painde elemendi laius või kõrgus sõltuvalt valitud primaarsest väärtusest. Peamine väärtus võib olla kas laiuse või elemendi kõrgus.
• risttelg. - Põrandateljega risti pendur. Selle suunas sõltub peamise telje suunas.
• ristkäivitus. | ristlõike. - Flexi read on täis elemente ja asuvad konteineris rist-algusesse asendisse risti asendisse.
• ristsuurus - Painde elemendi laius või kõrgus sõltuvalt mõõtme suurusest on võrdne selle suurusega. See vara langeb kokku selle laius või kõrgusega sõltuvalt mõõtme suurusest.

Omadused

ekraan: Flex | Inline-Flex;

See kehtib:

Määrab flex konteineri (inline või plokk sõltuvalt valitud väärtusest), ühendab flex konteksti kõigi oma vahetu järeltulijad.

Pea meeles:

• CSS veerud ei tööta Flex Containeriga
• float, selge ja vertikaalne align ei tööta Flex Elements

flex-suunas.

See kehtib: Vanemlik element Flex-konteiner.

Määrab põhiteade põhitelje, määrates seeläbi konteinerisse paigutatud painde elementide suund.

• rida (vaikimisi): vasakult paremale LTR-ile, paremale RTL-i vasakule;
• rida-tagurpidi: paremale vasakule LTR-le, vasakult paremale RTL-le;
• veerg: sarnane reaga, ülevalt alla;
• kolonn-tagurpidi: sarnane rida-tagurpidi, alt üles.

flex-Wrap.

See kehtib: Vanemlik element Flex-konteiner.

Määrab kindlaks, kas mahuti on üheliin või mitmeliiniline, samuti ristilje suund, millega määratakse kindlaks uued jooned.

• nowrap (vaikimisi): üheliin / vasakult paremale LTR-ile, paremale vasakule RTL-le;
• wrap: Multi-line / vasakult paremale LTRile, õigus RTL-i vasakule vasakule;
• wrap-Reverse: Multi-line / paremale vasakule LTR-le, vasakult paremale RTL-le.

flex-voolu.

See kehtib: Vanemlik element Flex-konteiner.

See vähendab paindlikkuse ja flex-wrap'i omaduste omaduste, mis koos määratlevad pea- ja põiksahe telje. Vaikimisi võtab nüüd rida väärtuse nüüd.

See kehtib: Vanemlik element Flex-konteiner.

Määrab joonduse peamise telje suhtes. Aitab levitada ülejäänud vaba ruumi juhul, kui liini elemendid ei ole "venitamine" või venitada, vaid on juba saavutanud oma maksimaalse suurusega. Samuti võimaldab mingil viisil kontrollida elementide joondamist, kui string vabastatakse.

• flex-start: elemendid nihutatakse joone algusesse;
• flex-End: elemendid nihutatakse stringi otsaga;
• keskus: elemendid on joone keskel joondatud;
• space-vahel: elemendid jagatakse ühtlaselt (esimene element joone alguses, viimane - lõpus);
• kosmose-ümber: elemendid jaotatakse ühtlaselt võrdse vahemaa omavahel ja stringi piiride vahel.

See kehtib: Vanemlik element Flex-konteiner.

Määrab vaikimisi käitumise flex elemendid on võrreldes ristlõikese praeguse joone. Mõtle selle versiooni Põhjenduse sisu ristlõikele (risti peamine).

• flex-Start: esemete rist-alustava piiri asuv piiripunkt asub rist-alguses;
• flex-End: ristlõike piiripunktide piiripunkt asub ristlõike asendis;
• keskus: elemendid on joondatud ristilje keskel;
• baasjoone: elemendid on nende algtaseme jaoks joondatud;
• stretch (vaikimisi): elemendid on venitatud, konteineri täitmine (võttes arvesse min-laius / max-laius).

See kehtib: Vanemlik element Flex-konteiner.

Joondab flex konteineri liinide juuresolekul vaba ruumi põikteljel, samal viisil nagu põhjendatud sisu teeb põhiteljel.

Kommentaar: See vara ei tööta ühe-Line Flexboxiga.

• flex-start: read on joondatud konteineri alguse suhtes;
• flex-end: read on joondatud konteineri otsa suhtes võrreldes;
• keskus: read on joondatud konteineri keskel;
• space-vahel: read jaotatakse ühtlaselt (esimene rida alguses rida, viimane on lõpus);
• space-ümber: read jaotatakse ühtlaselt võrdse vahemaaga;
• stretch (vaikimisi): rida on venitatud, vaba ruumi täitmine.

tellimus

See kehtib:

Vaikimisi painad elemendid asuvad algses järjekorras. Siiski võib tellimuse vara kontrollida oma asukoha järjekorda konteineris.

Tellimus:<täisarv\u003e

painduva.

See kehtib: Tütar element / flex element.

Määrab Flex Element võime "kasvada" vajadusel. Võtab indekseeritud väärtuse, mis toimib osana. See määrab, milline osa vaba ruumi konteineris sees võib element hõivata.

Kui kõik elemendid on flex-kasvava vara nagu 1, siis iga järeltulija saab sama suurusega konteinerisse. Kui seate ühe järeltulijateni 2, siis kulub see kaks korda rohkem ruumi kui teised.

Flex-kasvav:<number\u003e (Vaikimisi 0)

flex-kahanema

See kehtib: Tütar element / flex element.

Määrab flex elemendi jaoks võime vajadusel tihendada.

Flex-Shrink: (Vaikimisi 1)

Negatiivseid numbreid ei aktsepteerita.

flex-alus.

See kehtib: Tütar element / flex element.

Määrab elemendi vaikesuuruse enne ruumi jaotumist konteineris.

Flex-alus:<pikkus\u003e. | Automaatne (vaikimisi auto)

painduma

See kehtib: Tütar element / flex element.

See vähendab Flex-kasvama, Flex-Shrink ja Flex-aluse. Teine ja kolmas parameetrid (Flex-Shrink, Flex-alus) on vabatahtlikud. Vaikeväärtus on 0 1 auto.

align-ise.

See kehtib: Tütar element / flex element.

Võimaldab teil tühistada vaikimisi joondamine või align-esemed, individuaalsete flex elementide jaoks.

Vaadake kirjeldust align-esemeid vara parema arusaama olemasolevate väärtuste.

Näited

Alustame väga väga lihtsa näitega, mis esineb peaaegu iga päev: joondamine täpselt keskel. Flexboxi kasutamisel pole midagi lihtsamat.

See näide põhineb asjaolul, et marginaal flex konteineri määratud automaatse neelab tarbetu ruumi, nii et viiteülesanne seega joonistab element täpselt kesklinnas mõlemal telge.

Nüüd kasutame mõned omadused. Esitage 6 fikseeritud suurusega elementi (ilu jaoks), kuid võime muuta konteineri suurust. Me tahame neid horisontaalselt ühtlaselt jaotada, nii et kui brauseri aken on muudetud, tundus kõik hea (ilma @ Media-Recorder!).

Valmis. Kõik muu on registreerimise küsimus. Allpool asub Codepen, mis näitab seda näidet. Kindlasti proovige venitada / pigistada brauseri aken ja vaata, mis juhtub.

Proovime midagi muud. Kujutage ette, et me vajame navigeerimist meie saidi ülaosas paremale servale, kuid me tahame, et see oleks keskmise suurusega ekraanide keskuses joondama ja üheks veergiks. Kõik on piisavalt lihtne.

Proovime midagi paremat ja mängida paindlikkust Flex-elementide! Kuidas on suunatud mobiilseadmed Kolmekella paigutus koos täieliku korgiga ja keldriga? Ja teine \u200b\u200basukoha järjekord.

Kui sa ütled lühikese, siis paigutus Flexboxiga annab meile lihtsaid lahendusi pärast keerulisi ülesandeid. Näiteks, kui vajate vertikaalset elementi joondamist või vajutage keldrit ekraani allosas või lihtsalt sisestage mitu plokki ühte rida, nii et nad hõivata kõik vaba ruumi. Sellised ülesanded lahendatakse ilma paindumiseta. Kuid reeglina on need lahendused sarnasemad "kargustega" - CSS-i kasutamiseks mõeldud vastuvõtuga ei ole mõeldud. Arvestades, et Flexboxiga lahendatakse sellised ülesanded täpselt nii, nagu Flex mudel mõtleb.

CSS paindlik kasti paigutusmoodul (CSS-mooduli moodulite jaoks painduvate plokkidega), lühike flexbox, mis on loodud vigade eemaldamiseks mitmesuguste HTML-konstruktsioonide loomisel, sealhulgas kohandatud erinevate laiustega ja kõrguse all ning tehke loogilise ja lihtne paigutus. Ja loogiline lähenemine, reeglina töötab ootamatutes kohtades, kus tulemust ei kontrollita - meie loogika!

Flexbox võimaldab teil elegantselt kontrollida konteineri sees olevate elementide kõige erinevamaid parameetreid: suund, tellimus, laius, kõrgus, joondamine mööda ja kogu, vaba ruumi jaotamine, elementide venitamine ja kokkusurumine.

Põhiteadmised

Flexbox koosneb konteinerist ja selle lapse elemente (elemendid) (paindlikud elemendid).

Flexboxi lisamiseks Html element Piisav CSS-i vara kuvamise määramine: Flex; või ekraan: Inline-Flex; .

Pärast paindumisomaduste sisselülitamist luuakse konteineri sees kaks telge: pea- ja põiksuunas (risti (⊥), risttelg). Kõik pesastatud elemendid (esimene tase) on üles ehitatud põhitelisse. Vaikimisi on peamine telg horisontaalne ja tal on suund vasakult paremale (→) ja risttelg vastavalt vertikaalsele ja on suunatud ülalt alla (↓).

Peamine ja ristilje saab muuta kohtades, siis elemendid asuvad peal (↓) ja kui nad lõpetavad paigaldamise kõrguseni, liiguvad nad vasakult paremale (→) - see tähendab, et teljed muutuvad lihtsalt kohtades . Samal ajal ei muutu elementide asukoha algus ja lõpus - ainult juhised (telje) Muuda! Sellepärast peate ette kujutama telje konteineri sees. Siiski ei ole vaja mõelda, et seal on mõned "füüsilised" teljed ja nad mõjutavad midagi. Axis on siin ainult konteineri sees olevate elementide liikumise suund. Näiteks kui me märkisime peamise telje keskelementide elementide joondamist ja seejärel muutis selle peamise telje suunda, muutub see ja joondamine: elemendid olid keskel horisontaalselt ja terasest vertikaalselt. . Vt näide.

Flex Boxi teine \u200b\u200boluline omadus on järjestikuse suuna kohalolek. Et mõista, mida me räägime, kujutan ette, et on olemas peamine horisontaalne telg, paljud elemendid ja nad ei "ronida" konteinerisse, nii et nad lähevad teise rea juurde. Need. Konteiner näeb välja selline: konteiner, sees kaks rida, igas reas mitu elementi. Esitatud? Nüüd mäletan, et saame reageerida vertikaalselt mitte ainult elemente, vaid ka rida! Kuidas see kinnisvara näites hästi tööb hästi nähtav. Ja nii tundub see skemaatiliselt:

CSS-i omadusedMis võib mõjutada paigutuse ehitusmudelit: float, selge, vertikaalne joondamine, veerud ei tööta Flex disainis. Ta kasutab teist mudeli paigutuse ehitamiseks ja need CSS-i omadused lihtsalt ignoreeritakse.

CSS Properties Flexbox

Flexbox sisaldab erinevaid CSS-reegleid kogu Flex Design'i juhtimiseks. Mõningaid tuleb rakendada peamisse konteinerile, samas kui teised selle konteineri elementidele.

Konteineri jaoks

Sisaldab elemendi flex vara. Selle põhjenduse all investeeritud element kuulub: ainult esimese taseme järeltulijad - nad muutuvad konteineri elemendiks.

• painduma - Element venitatakse kogu laiuseni ja selle kogu ruumi ümbritsevate plokkide seas. Sõudmine toimub alguses ja lõpus ploki.
• inline-flex - Element on sujuvamad teiste elementidega. Sellisel juhul on selle sisemine osa vormindatud ploki elemendina ja element ise on nagu sisseehitatud.

flex ja Inline-Flex erinevad asjaolust, et erinevalt suhelda ümbritseva elemendiga, nagu ekraan: plokk ja ekraan: Inline-plokk.

Muudab konteineri põhitelje suunda. Katkeste telje muutused vastavalt.

• rida (vaikimisi) - elementide suund vasakult paremale (→)
• veerg. - elementide suund ülevalt alla (↓)
• rida-tagurpidi. - paremal vasakul asuva elementide suund (←)
• kolonn-tagurpidi. - elementide suund alt üles top ()

Juhib konteinerile kompenseerimata elementide ülekandmist.

• nowrap (vaikimisi) - pesastatud elemendid asuvad ühes reas (suunas \u003d rida) või ühes veerus (suunas \u003d veerg), olenemata sellest, kas need paigutatakse konteinerisse või mitte.
• wrap. - Sisaldab kirjete üleandmist järgmisele reale, kui need ei ole konteinerisse paigutatud. See hõlmab põiktelje elementide liikumist.
• wrap-tagasi. - Ka see wrap ainult üleandmine ei ole alla, ja üles (vastupidises suunas).

Ühendab nii Flex-suund ja Flex-Wrap Properties. Neid kasutatakse sageli koos, nii et Flex-voolukoor on loodud selleks, et kirjutada vähem koodi.

flex-voolu aktsepteerib kahe omaduse väärtusi, mis on eraldatud ruumiga. Või saate määrata ühe vara väärtuse.

/ * Ainult flex-suunal * / flex-flow: rida; Flex-flow: rida-tagurpidi; Flex-voolu: kolonn; Flex-flow: kolonn-tagurpidi; / * Ainult Flex-Wrap * / Flex-Flow: nowrap; Flex-flow: wrap; Flex-flow: wrap-tagurpidi; / * Mõlemad nii tähendused: Flex-suund ja Flex-Wrap * / Flex-Flow: rida Nowrap; Flex-flow: veerg wrap; Flex-flow: kolonn-tagurpidi mähkimine; Põhjendage sisu:

Joondab elemendid põhiteljele: kui suund \u003d rida, seejärel horisontaalselt ja kui suund \u003d veerg, siis vertikaalselt.

• flex-Start (vaikimisi) - Elemendid lähevad algusest peale (lõpus võib olla koht).
• flex-end. - elemendid on lõppu võrdsustatud (koht jääb alguses)
• keskus - keskel (koht jääb vasakule ja paremale)
• ruumi vahel. - äärmuslikke elemente vajutatakse servadele (elementide vaheline koht jagatakse ühtlaselt)
• ruumi ümber. - Vaba ruum on elementide vahel ühtlaselt jaotunud (äärmuslikke elemente ei vajuta servadele). Konteineri serva ja äärmuslike elementide vaheline ruum on kaks korda väiksem kui rea keskel elementide vaheline ruum.
• ruumi-ühtlaselt

Joondab auastmed, kus asub põiktelje elemendid. Sama mis õigustab sisu ainult vastupidise telje jaoks.

Märkus: töötab, kui on vähemalt 2 rida, st. Kui on ainult 1 rida midagi juhtub.

Need. Kui Flex-suunas: rida, see omadus joondada nähtamatu rida vertikaalselt |. Oluline on märkida, et ploki kõrguse tuleb seadistada jäigalt ja see peaks olema suurem kui seeria kõrgus, muidu ridad ise venitavad konteineri ja nende joondamine kaotab selle tähenduse, sest nende vahel ei ole vaba ruumi. . Aga kui Flex-suunas: veerg, siis read liiguvad horisontaalselt → ja konteineri laius on peaaegu alati suurem kui seeria laius ja ridade joondamine omandab kohe ...

• venitada (vaikimisi) - rida venitada täites string täielikult
• flex-algus. - Ridade rühmitatakse konteineri ülaosas (lõpus võib olla koht).
• flex-end. - Ridade rühmitatakse konteineri põhjas (koht jääb alguses)
• keskus - read rühmitatakse konteineri keskele (koht jääb servadele)
• ruumi vahel. - äärmuslikud read pressitakse servade suunas (ridade vaheline koht jagatakse ühtlaselt)
• ruumi ümber. - Vaba ruum on ridade vahel ühtlaselt jaotunud (äärmuslikud elemendid ei ole servade suunas alla vajutatud). Konteineri serva ja äärmuslike elementide vaheline ruum on kaks korda väiksem kui rea keskel elementide vaheline ruum.
• ruumi-ühtlaselt - Ka see kosmose-ümber, ainult kaugus äärmuslike elementide kaugusel konteineri servadele on samad elementide vahel.

Joondab elemendid rida (nähtamatu joon) põiktelje elemendid. Need. Ridade ise on joondatud sisalduse ja nende ridade elemendid (stringid) align-esemete ja kogu selle põiktelje kaudu. Peamisest teljest ei ole sellist eraldamist, ei ole seeria ja elementide kontseptsioone joondatud põhjendatud sisuga.

• venitada (vaikimisi) - elemendid Stringi täitmine täielikult
• flex-algus. - elemente vajutatakse rea algusesse
• flex-end. - elemendid vajutatakse rea lõpu vastu
• keskus - elemendid on rida keskel tasandamine
• algtaseme - elemendid on joondatud algtekstiga

Konteinerielementide jaoks

Määrab elemendi suureneva teguri konteineri vaba ruumi juuresolekul. Vaikimisi Flex-kasvav: 0 s.t. Ei, elemendid peaksid suurendama ja täitma vaba ruumi konteinerisse.

Vaikimisi Flex-kasvav: 0

• Kui kõik elemendid näitavad flex-kasvavat: 1, siis nad kõik venitavad võrdselt ja täita kõik vaba ruumi konteineris.
• Kui üks elemente näitavad flex-kasvavat: 1, siis täidab see kogu vaba ruumi konteineris ja joondamise kaudu põhjendatud sisu töö ei saa töötada: ei ole midagi vaba ruumi ...
• Kui Flex-Grow kasvab: 1. Kui ühel neist on paindlik kasvav: 2, on see 2 korda rohkem kui keegi teine
• Kui kõik Flexi plokid Flexi konteineril on Flex-Grow: 3, siis nad on sama suurusega
• Flex-Grow'iga: 3. Kui üks neist on flex-kasvav: 12, see on 4 korda rohkem kui keegi teine

Kuidas see töötab? Oletame, et mahutil on 500PX laius ja sisaldab kahte elementi, millest igaühel on põhiline laius 100PX. Seetõttu jäävad konteinerisse 300 vaba pikslit. Nüüd, kui määrate Flex-Grow: 2 esimene element; ja teine \u200b\u200bflex-kasvav: 1; Plokid võtavad kogu olemasoleva konteineri laius ja esimese ploki laius on 300px ja teine \u200b\u200b200PX. See on seletatav asjaoluga, et saadaval 300px vaba ruumi konteineris jaotati elementide vahel 2: 1, + 200PX suhe esimese ja + 100px teine.

Märkus: väärtuses saate määrata murdosaNäiteks: 0.5 - Flex-Grow: 0,5

Määrab elemendi vähendamise tegur. Funktsioon on vastupidine Flex-kasvav ja määrab, kuidas element peab olema kokkusurutud, kui konteineris ei ole vaba ruumi. Need. Vara hakkab töötama, kui kõigi elementide suuruste summa on suurem kui konteineri suurus.

Vaikimisi Flex-Shrink: 1

Oletame, et konteineril on 600px laius ja sisaldab kahte elementi, millest igaühel on 300px laius - flex-alus: 300px; . Need. Kaks elementi täidavad konteineri täielikult. Esimene element näitab Flex-Shrink: 2; ja teine \u200b\u200bflex-kahanemine: 1; . Nüüd vähendades konteineri laius 300px, s.o. Elemendid peavad olema 300px paiknema konteineri sees. Need surutakse 2: 1 suhtega, s.o. Esimene üksus liitub 200PX-iga ja teine \u200b\u200bkuni 100px ja elementide uued mõõtmed on 100PX ja 200PX.

Märkus: väärtuses saate määrata murdosa numbreid, näiteks: 0,5 - Flex-Shrink: 0,5

Määrab elemendi põhilaiust - arvutatakse elemendi laius mõjutavate ülejäänud tingimused. Väärtust saab määrata PX, EM, REM,%, VW, VH jne Lõplik laius sõltub flex-kasvava, flex-shrink ja sisu baaslaiusest ja väärtustest ploki sees. Auto abil saab element selle sisu sisu suhtes põhilise laiuse.

Vaikimisi: Auto

Mõnikord on parem paigaldada elemendi laius jäigalt läbi tavalise laiuse vara. Näiteks laius: 50%; See tähendab, et konteineri sees olev element on täpselt 50%, kuid töötavad ka Flex-Grow ja Flex-Shrink Properties. See võib olla vajalik, kui element venitatakse selle sees sisaldusega, mis on kinnitatud flex-baasil. Näide.

flex-alus on "karm", kui reset tõmbe- ja kokkusurumist: Flex-alus: 200PX; Flex-kasvav: 0; Flex-Shrink: 0; . Kõik see saab kirjutada nagu Flex: 0 0 200px; .

Lühikese salvestamise kolme omadused: Flex-Grow Flex-Shrink Flerk-Based.

Vaikimisi: Flex: 0 1 Auto

Siiski saate määrata ühe ja kaks väärtust:

Flex: Puudub; / * 0 0 Auto * / / * number * / Flex: 2; / * Flex-kasvav (Flex-bass läheb 0-le) * / / * Ei ole number * / Flex: 10em; / * Flex-alus: 10em * / Flex: 30PX; / * Flex-alus: 30PX * / Flex: Auto; / * Flex-alus: Auto * / Flex: sisu; / * Flex-alus: sisu * / Flex: 1 30PX; / * Flex-kasvav ja flex-baas * / Flex: 2 2; / * Flex-Grow ja Flex-Shrink (Flex-bassis 0) * / Flex: 2 2 10%; / * Flex-Grow ja Flex-Shrink ja Flex-Alusel * / Align-Self:

Võimaldab teil muuta align-esemeid vara ainult eraldi elemendi jaoks.

Vaikimisi: Align-esemete konteinerist

• venitada. - element on venitatud stringi täitmine täielikult
• flex-algus. - elementi vajutatakse rea algusesse
• flex-end. - elementi vajutatakse stringi otsa suunas
• keskus - element on liini keskel tasandatud

algtaseme - element on joondatud teksti põhjendusega

Võimaldab muuta üldises reas elemendi järjekorda (positsiooni, asukohta).

Vaikimisi: tellimus: 0

Vaikimisi on elemendid tellida: 0 ja panna oma välimuse järjekorras HTML-koodi ja rea \u200b\u200bsuunas. Aga kui muudate tellimuse vara väärtust, ehitatakse üksused väärtuste järjekorda: -1 0 1 2 3. Näiteks, kui üks elementidest näitavad järjekorras: 1, siis lähete kõigepealt kõik null ja seejärel element 1-st.

Seega on võimalik, näiteks esimene element lõpuni lõpuni, muutes teiste elementide või HTML-koodi liikumise suunas muutmata.

Märkused

Mis vahe on flex-aluse laiuse vahel?

Allpool olulisi erinevusi flex-aluse ja laiuse / kõrguse vahel:

flex-baas toimib ainult peamise telje jaoks. See tähendab, et kui Flex-suunas: rida Flex-baas kontrollib laiust (laius) ja kui Flex-suunas: veerg kontrollib kõrgust (kõrgus). .

flex-alus kehtib ainult paindlike elementide suhtes. Nii et kui te keelate konteineris Flexi, ei mõjuta see vara.

Absoluutsed elemendid konteineri ei osale Flex Design ... ja seetõttu Flex-bassein ei mõjuta elemente Flex konteineri, kui need on absoluutselt. Nad peavad täpsustama laiuse / kõrguse.

• Kui kasutate Flexi omadusi 3 väärtust (Flex-Grow / Flex-Flex-Shrink / Flex-Alus), saate ühendada ja kirjutada lühikeseks ning laiuseks kasvada või kahaneb, peate eraldi kirjutama. Näiteks: Flex: 0 0 50% \u003d\u003d laius: 50%; Flex-Shrink: 0; . Mõnikord on see lihtsalt ebamugav.

Võimaluse korral eelistavad veel flex-aluseid. Kasutage laiust ainult siis, kui Flex-alus ei sobi.

Erinevused Flex-alus laius - Bug või Fich?

Flex elemendi sees olev sisu lõikab ja ei saa minna kaugemale selle piiridest. Siiski, kui seadistate laius laiuse või max-laius ja mitte flex-basseini, suudab Flexi konteineri sees olev element minna kaugemale sellest konteinerist (mõnikord vajate seda käitumist). Näide:

Näited Flex Layout

Näidetes kasutab kõikjal rist-brauseri eesliiteid. Ma tegin seda mugava lugemise CSS-i jaoks. Seetõttu vaadake viimaseid näiteid. chrome'i versioonid või Firefox.

# 1 lihtne näide vertikaalse joondamise ja horisontaalsete

Alustame kõige lihtsamast näitest - vertikaalselt ja horisontaalselt samaaegselt ja ploki kõrgusel, isegi kummi kõrgusel.

Või nii, ilma plokkideta:

# 1.2 eraldamine (lõhe) elementide vahel flex plokk

Et paigutada konteineri elemendid servad ja valige meelevaldselt element, mille järel on pausi, peate kasutama marginaal-vasakut vara: auto või marginaal-paremal: auto.

# 2 adaptiivne menüü Flex

Tehke menüü lehe ülaosas. Lai ekraanil peab see olema õige. Keskmiselt joondatud keskel. Ja väikese elemendi puhul peaks olema uus rida.

# 3 Adaptive 3 veergu

See näide näitab, kui kiiresti ja mugavalt 3 veergu, mis ahenemisel muutuvad 2 ja seejärel 1.

Pange tähele, et seda saab teha ilma meediareeglite kasutamata jätmiseta.

Mine JSFIDDLE.NETisse ja muutke sektsiooni "tulemus" laiust

# 4 adaptiivne plokk flex

Oletame, et peame tühistama 3 plokki, üks suur ja kaks väikest. Samal ajal on vaja, et plokid sobiksid väikesteks ekraanideks. Tegema:

Mine JSFIDDLE.NETisse ja muutke sektsiooni "tulemus" laiust

# 5 Galerii Flexi ja ülemineku kohta

See näide näitab, kui kiiresti saate teha päris silma akordioni painduvate piltidega. Pöörake tähelepanu Flexi üleminekuomandile.

# 6 Flex Flex (vaid näide)

Ülesanne teha paindliku ploki. Nii et teksti algus igas plokis oli samal horisontaalsel liinil. Need. Laiuse laiusega kasvavad plokid kõrgusel. On vaja, et pilt on ülaosas, nupp on alati allkorrusel ja tekst keset algas ühe horisontaalse reaga ...

Selle probleemi lahendamiseks on plokid ise venitatud Flexi poolt ja paigaldatakse maksimaalne võimalik laius. Iga sisemine üksus on ka disainiga paindumine paindliku suunaga: veerg; ja element keset (kus tekst asub) on venitatud Flex-kasvav: 1; Täitmiseks kogu vaba ruumi, tulemus saavutatakse - tekst algas ühe reaga ...

Rohkem näiteid

Brauseri toetus - 98,3%

Loomulikult ei ole täielikku toetust, vaid kõiki kaasaegsed brauserid Toetage Flexboxi kujundeid. Mõnede jaoks peate siiski määrama eesliiteid. Reaalse pildi jaoks vaadake Caniuuse.com ja vaadake, et 96,3% täna kasutatava brauserist töötab ilma prefiksideta ilma prefiksideta, mille eesliited on 98,3%. See on suurepärane näitaja, et paindlikult kasutada Flexboxi.

Et teada saada, millised eesliited on tänapäeval asjakohased (juuni 2019), annan ma näide kõigi paindlikest eeskirjadest vajalikud eesliited:

/ * Konteiner * /. -Mebkit-box-orienteeritud: vertikaalne; -Webkit-box-suund: normaalne; -MS-flex-suund: veerg; flex-suund: veerg; -MS-flex-wrap: mähkis; -Flex-flow: veerg wrap; flex-flow: veerg wrap; -webkit-box-pap: põhjendage; -MS-flex-pap: põhjendage; õigusi sisu: ruumi-flex-line-pakend: Levitada; Align-sisu: kosmose-ümber;) / * elemendid * / .flex-ese (-webkit-box-flex: 1; -MS-flex-positiivne: 1; flex-kasvav: 1; -M-flex- Negatiivne: 2; Flex-Shrink: 2; -MS-Flex-eelistatud suurus: 100px; Flex-alus: 100px; -MS-Flex: 1 2 100px; Flex: 1 2 100px; -MS-Flex-elemendi-Align : Keskus; Align-ise: keskus; -Mebkit-box-ordinaalne grupp: 3; -MS-flex-order: 2; järjekorras: 2;)

See on parem, kui eesliidete omadused lähevad algse vara juurde.
Täna ei ole tänapäeva (Caniude) eesliiteid täna (Caniuuse poolt), kuid üldiselt eesliidetes rohkem.

• (Uus) - Uus süntaks: kuva: Flex; .
• (Tweener) - vana mitteametlik süntaks 2011: Display: Flexbox; .
• (Vana) - vana süntaks 2009: ekraan: kast;

Videot

Noh, ärge unustage video kohta, mõnikord on ka huvitav ja arusaadav. Siin on paar populaarset:

Kasulikud lingid Flexi jaoks

flexboxfroggy.com - Flexboxi haridusmäng.

Flexplorer on visuaalne flex-koodi disainer.