Kõik Flexboxi omaduste kohta

Flexboxi atribuutide idee on pakkuda konteinerile võimalust muuta oma esemete laiust, kõrgust ja järjekorda automaatselt, et saadaolevat ruumi kõige paremini täita. See võib olla väga kasulik, et mahutada üksusi erineva ekraanisuuruse ja seadme piires. Üksusi laiendatakse, et täita vaba ruumi, või kahandatakse, et vältida ülevoolu.

CSS Flexboxi ruudustik algajatele

CSS on üks esimesi ja lihtsamaid asju, mida veebiarenduse ja -kujunduse juures õppida tuleb, kuid ärge eksitage selle lihtsuses funktsioonide puudumise tõttu. Sellel on mitmeid hämmastavaid funktsioone ja võimalusi, mida saab kasutada, millest üks on suhteliselt uus paigutusmoodul: Flexboxi atribuudid.

Flexboxi atribuudid on CSS3 jaoks üks uuemaid paigutusi ja selle kohta on palju õppida. Siit saame teada, kuidas paigutust ja kuidas seda kasutada. Enne alustamist on siin siiski väike taust Flexboxi omaduste kohta:

Mis on paigutusrežiimid?

Kõige lihtsamalt öeldes on CSS Flexboxi ruudustik paigutusrežiim. CSS-l on mitmeid olemasolevaid paigutusrežiime. Ploki paigutuse režiim (nagu kuvamine: plokk) on olnud pikka aega olemas. Plokkide paigutused on hea valik täisdokumentide stiilimiseks. Tegelikult käsitseb veebibrauser vaikimisi mitmeid elemente, näiteks divs ja lõiku, plokkide tasemel.

Teine levinum paigutusrežiim on tekstisisene. Tugev silt, sisestussilt ja ankrusilt on näited sisetasemel elementidest. Google Chrome'i arendaja tööriistad võimaldavad teil isegi vaadata elemendi arvutatud stiili, et määrata kindlaks CSS-i omadused ja väärtused, mida on rakendatud elementidele, mida arendaja pole otseselt määranud.

Suhteliselt uuemad Flexboxi omadused (Flexible box) on kavandatud tõhusamaks meetodiks konteinerite vahel ruumi paigutamiseks, joondamiseks ja jaotamiseks, isegi kui nende üksuste suurus on dünaamiline või tundmatu. Siit ka mõiste „paindlik”.

Flexbox Properties kontseptsioon

Flexboxi omaduste juures on kõige olulisem, et see oleks suuna-agnostiline. Kuigi ploki paigutus on vertikaalne ja tekstisisene paigutus on horisontaalne, pole Flexbox kumbagi. Blokeerimine ja rivistus toimivad hästi õiges olukorras, kuid puuduvad paindlikkusest keerukate või suurte rakenduste toetamiseks, eriti kui on vaja muuta orientatsiooni, venitada, kahandada, muuta elementide suurust ja muul viisil neid muuta.

Kus kasutatakse Flexboxi atribuute?

Nagu iga teist CSS-i paigutust, on Flexboxi teatud olukordades kõige parem kasutada. Eriti sobib see rakenduse väikesemahuliste paigutuste ja komponentide jaoks. Suuremahuliste paigutuste korral oleks targem valik ruudustiku paigutus.

Miks eelistatakse Flexboxi?

Paljud arendajad ja disainerid eelistavad Flexboxi atribuute igal võimalusel (mõnikord liiga sageli!). Selle põhjuseks on asjaolu, et Flexboxi omadusi on lihtsam kasutada; elementide positsioneerimine on palju lihtsam, nii et saate keerukamaid paigutusi saada väiksema kodeerimisega. Teisisõnu, see muudab arendusprotsessi lihtsamaks.

Flexboxi omaduste juhend

Nüüd, kui teate natuke Flexboxi omadustest ning kuidas ja miks see töötab, on siin üksikasjalik juhend paigutuse kohta. Paigutuse mudel koosneb põhikonteinerist, mida nimetatakse ka paindlikuks konteineriks. Selle konteineri vahetuid lapsi kutsutakse elastseteks esemeteks.

Paigutus on läbi teinud mitu iteratsiooni ja süntaksimuutused on aastate jooksul alates selle esimese mustandi loomisest 2009. aastal. Viimast Flexboxi spetsifikatsiooni toetatakse järgmistes veebibrauserites:

  • Ooper 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Flexboxi atribuutides kasutatud terminoloogia

Siin on mõned põhiterminid, mida Flexboxi atribuutide paigutuses kasutatakse:

  • Ekraan: seda käsku kasutatakse flex-konteineri määratlemiseks. See võib olla tekstisisene või blokeeritud, sõltuvalt sellest, kas see määratleb kõigi mahutis olevate üksuste paindliku sisu. Näide:

.konteiner (

kuva: flex; / * või inline-flex * /

)

  • Järjekord: Flex-üksused on vaikimisi paigutatud vastavalt lähtejärjestusele, kuid atribuudiga „tellimus” saab juhtida üksuste konteineris kuvamise järjekorda. Näide:

.item (

järjekord:;

)

  • Paindlik suund: see järjekord seab põhitelje, määrates suuna, kuhu painduvad esemed asetatakse konteinerisse. Flex-esemeid saab peamiselt asetada vertikaalsesse või horisontaalsuunas. Näide:

.konteiner (

paindumissuund: rida | rida tagurpidi | veerg | veerg tagurpidi;

)

  • Paindlik suurendamine: see järjekord määratleb painduva üksuse võime automaatselt suureneda, kui sellel on ruumi. See võib aktsepteerida ühikut väärtust, mida saaks kasutada proportsioonina. See väärtus määrab, kui palju ruumi peaks elastne konteineris võtma. Näiteks kui kõigi esemete paindlikuks kasvamiseks on seatud 1, jaotatakse mahutis olev ülejäänud ruum võrdselt kõigile lastele. Kui väärtus on 2, võtab ülejäänud ruum kaks korda nii palju ruumi kui ülejäänud. Näide:

.item (

flex-kasvama:; / * vaikimisi 0 * /

)

  • Paindlik kokkutõmbumine: see toimib vastupidiselt paindliku kasvu korral, kuna see kahandab vajadusel painduvaid esemeid. Näide:

.item (

painduv kahanemine:; / * vaikimisi 1 * /

)

  • Paindlik alus: see järjekord määratleb elementide vaikesuuruse enne ülejäänud ruumi jaotamist. See võib olla pikkus, näiteks 5rem või 20%, või märksõna. Märksõna 'auto' näitab, et üksuse laiust ja kõrgust mõõdetakse, ja märksõna 'sisu' tähistab, et üksuse suurus põhineb selle sisul. Näide:

.item (

paindlik alus: | auto; / * vaikeseade *

)

  • Flex: See on kõigi kolme eelnimetatud omaduse kombineeritud otsetee: paindlik kasv, paindlik alus ja painduv kahanemine. Vaikeväärtus on '0 1 auto'.

.item (

flex: puudub | (||)

)

  • Põhjendage sisu: see järjekord määratleb põhitelje joondamise ja aitab jaotada täiendavat vaba ruumi, kui mõni element on jäänud, kui esemed on elastsed või on saavutanud maksimaalse suuruse. See aitab kontrollida üksuse joondamist ka siis, kui on ülevoolu.

.konteiner (

õigusta sisu: flex-start | painduv ots | keskus | tühikute vahe | ruumi ümber;

)

  • Joonda elemendid: seda kasutatakse praeguse rea ristteel asuvate painduvate elementide paigutuse vaikekäitumise määratlemiseks. Sisuliselt on see põhiteljega risti asetseva risttelje 'õigusta sisu' versioon. Näide:

.konteiner (

joonda üksused: flex-start | painduv ots | keskus | algtase | venitada;

)

  • Sisu joondamine: see järjekord joondab konteineri read juhuks, kui ristteljel on lisaruumi. See sarnaneb õigustatava sisuga, kuid põhitelje asemel risttelje jaoks. Kui flex-üksusi on ainult üks rida, ei oma see omadus mingit mõju. Näide:

.konteiner (

joonda sisu: flex-start | painduv ots | keskus | tühikute vahe | ruumi ümber | venitada;

)

Flexboxi omaduste kasutamine

Flexboxi paigutuse kasutamiseks saate HTML-i vanem-elemendil kuvamisomandi lihtsalt seada järgmiselt:

.flex-konteiner (

kuva: -webkit-flex; / * Safari * /

kuva: flex;

)

Kui eelistate kuvada nagu element, võiksite sisse kirjutada:

.flex-konteiner (

kuva: -webkit-inline-flex; / * Safari * /

kuva: inline-flex;

)

Teil on vaja, et see omadus oleks seatud ainult vanema flex-konteinerile ja selle kohesetele flex-üksustele. Konteinerilapsed muutuvad automaatselt elastseteks kaupadeks.

Soovitatavad kursused

  • Veebikursus tasuta jQuery kohta
  • Veebikursus vaba nurga all asuva JS-i kohta
  • Veebikoolitus Mudboxis
  • Sertifikaadikoolitus tasuta rubiinil

Flexboxi atribuudid - paindliku konteineri omadused

Flexboxi atribuutide rühmitamiseks on palju viise ja lihtsaim viis nende tundmaõppimiseks on jagada need Flexi konteineri ja üksuse atribuutideks. Me hõlmasime just mõnda ülaltoodud flex-konteineri omadust. Vaatame ülejäänu:

  • Paindumissuund: rida või veerg

Paindliku suuna omadusi saab paigutada veergudena vertikaalselt või ridadena horisontaalselt. Reasuuna korral on painduvad elemendid vaikimisi vasakule-paremale virnastatud. Rida tagurpidi muudab selle suuna paremalt vasakule. Veeru suund on vaikimisi ülalt alla ja veeru tagurdamise funktsioon pöörab selle suuna alt üles.

  • Flex-wrap: nüüd mähkida või mähkida

Painduva mähkimise omadus kontrollib, kas painduva konteineri lapsed on paigutatud mitme või üherealisena ja uute joonte virnastamise suund. Nüüdses väärtuses nähakse ühes reas kuvatavaid paindlikke üksusi, mis on vaikimisi mahuti laiuse jaoks kahandatud. Mähise väärtus näeb erinevates ridades vasakult paremale või ülalt alla suunduvaid paindlikke üksusi. Võite tellimuse muutmiseks lisada ka ümberpööramise. Vaikeväärtus on nüüd.

  • Flex-flow

See omadus on põhimõtteliselt lühend, mis võimaldab painde suuna ja painutuse omadusi kokku seada. Vaikeväärtus on 'rea nüüdimüük'. Näide:

.flex-konteiner (

painduvvool: ||

)

  • Põhjendage sisu

Põhjendatava sisu atribuudil on neli väärtust: paindlik käivitamine, et joondada üksused konteineri vasakule küljele; paindlik ots, et joondada esemeid paremale küljele; keskel joondada keskele; tühikute vahel, et joondada üksused nende vahel võrdse vahega, nii et esimene ja viimane üksus oleksid konteineri servadega joondatud; ja tühik ringi, et joondada painduv element, sealhulgas esimene ja viimane, võrdsete vahedega nende ümber. Flex-start on vaikimisi väärtus.

  • Joondage üksused

Sellel omadusel on viis väärtust: venitage, et suurendada elastsete esemete ulatust, et täita kogu laius või kõrgus konteineri riststardist risti; flex-start esemete virnastamiseks risttahvlil; flex-end esemete virnastamiseks ristotsa; keskel, et joondada esemeid risttelje keskpunktiga; ja lähtejoon, et objekte joondada nii, et nende lähtejooned oleksid joondatud. Venitus on vaikimisi väärtus.

  • Joondage sisu

See omadus joondab painduva konteineri read, kui ristteljel on lisaruumi. Selle väärtused on järgmised: venitage ruumi jaotamiseks iga rea ​​järel; flex-start esemete virnastamiseks riststarti suunas; elastne ots, et virnastada esemeid risttala poole; kese esemete virnastamiseks risttelje keskele; ruumi ümber, et jaotada ruum võrdselt paindlike esemete ümber. Vaikeväärtus on veniv.

Flexboxi atribuudid - elemendi Flex omadused

Nüüd, kui olete teada Flexboxi konteineri omadustest, vaatame üksuse atribuute:

  • Telli

See omadus kontrollib flex-konteineri laste välimuse järjekorda. Vaikimisi tellitakse need flex-konteinerisse.

.flex-element (

järjekord:;

)

Paindlikke üksusi saate ümber korraldada ilma HTML-koodi ümber korraldamata. Vaikeväärtus on null.

  • Joondage ise

See atribuut võimaldab konkreetse flex-elemendi vaikimisi joondamise tühistada. Selle omaduse jaoks saate joondatavate üksuste väärtusi kasutada.

.flex-element (

joonda ise: auto | flex-start | painduv ots | keskus | algtase | venitada;

)

Automaatne väärtus joondamisel ise arvutatakse elemendi vanemal joondatavate üksuste väärtuse järgi. Kui elemendil pole vanemat, kasutatakse selle asemel venitust.

Põhinäited

See on kõik, mida peate teadma CSS Flexboxi ruudustiku kasutamiseks. Nüüd on aeg õpitut harjutada. Siin on mõned näited, mis näitavad teile, kuidas kõik need omadused kokku tulevad. Alustame millegi täiesti lihtsaga:

. läbipaistev (

kuva: flex;

kõrgus: 300 pikslit;

)

.laps (

laius: 100 pikslit;

kõrgus: 100 pikslit;

veeris: auto;

)

See on näide täiuslikust tsentreerimisest. Kõrguse ja laiuse väärtusi saab vastavalt soovile muuta. Siinkohal on oluline seada marginaaliks 'auto', nii et paindmahuti imab automaatselt lisaruumi. Piisavalt lihtne!

Liikugem nüüd veel mõne atribuudi lisamisele: loend koos kuue fikseeritud mõõtmetega üksusega, mis võivad olla automaatselt mõõdetavad. Need peavad olema horisontaaltelje suhtes ühtlaselt jaotunud.

.flex-konteiner (

kuva: flex;

õigusta sisu: ruumi ümber;

)

Järgmisena proovime keskmise suurusega ekraanide jaoks paremale joondatud navigeerimise tsentreerida ja muuta see väikestes seadmetes ühevärviliseks.

/ * Suur * /

.navigation (

kuva: flex;

flex-flow: rea mähis;

õigusta sisu: flex-end;

)

/ * Keskmised ekraanid * /

@media kõik ja (maksimaalne laius: 800 pikslit) (

.navigation (

õigusta sisu: ruumi ümber;

)

)

/ * Väikesed ekraanid * /

@media kõik ja (maksimaalne laius: 500 pikslit) (

.navigation (

paindumissuund: kolonn;

)

)

Aeg astuda see üks samm edasi! Proovime kolmest sambast koosnevat esimest paigutust, mis koosneb täislaiusest jalusest ja päisest ning on lähteallikate järjekorrast sõltumatu.

.wrapper (

kuva: flex;

flex-flow: rea mähis;

)

/ * Me ütleme, et kõik tooted peavad olema 100% laiad * /

.header, .main, .nav, .aside, .footer (

paind: 1 100%;

)

/ * Me tugineme mobiili-esimese lähenemisviisi allikatellimusele * /

/ * Keskmised ekraanid * /

@media kõik ja (minimaalne laius: 600 pikslit) (

.ide (flex: 1 auto; )

)

/ * Suured ekraanid * /

@media kõik ja (minimaalne laius: 800 pikslit) (

.main (flex: 2 0px; )

.aside-1 (järjekord: 1; )

.main (järjekord: 2; )

.ide-2 (järjekord: 3; )

.jalg (järjekord: 4; )

)

Järeldus

Need on vaid mõned põhinäited. CSS Flexboxi ruudustiku paigutustega saate mängida palju rohkem ja need on absoluutselt hindamatud, kui soovite luua tundliku veebisaidi.

Soovitatavad artiklid

Siin on mõned artiklid, mis aitavad saada rohkem üksikasju flexboxi omaduste, flexboxi koodi ja ka css flexbox ruudustiku kohta, nii et lihtsalt minge läbi allpool toodud lingi.

  1. HTML vs XML - peamised erinevused
  2. CSS3 vs CSS - kuidas nad erinevad? (Infograafik)
  3. HTML vs CSS peamised erinevused
  4. HTML5 vs Flash

Kategooria:

Veebiarenduse tööriistad