Kaikkea tietoa flexbox-ominaisuuksista

Flexbox-ominaisuuksien taustalla on tarjota mahdollisuus säiliölle muuttaa automaattisesti esineiden leveyttä, korkeutta ja järjestystä, jotta käytettävissä oleva tila voidaan parhaiten täyttää. Tästä voi olla todella hyötyä kohteiden sijoittamiseksi erikokoisiin näytöihin ja laitteisiin. Tuotteet laajennetaan täyttääksesi kaiken vapaan tilan, tai kutistuvat ylivuodon välttämiseksi.

CSS Flexbox-ruudukko aloittelijoille

CSS on yksi ensimmäisistä ja helpoimmista asioista, jotka opitaan verkkosivujen kehittämisessä ja suunnittelussa, mutta älä erehty sen yksinkertaisuuteen ominaisuuksien puutteen vuoksi. Siinä on joukko uskomattomia ominaisuuksia ja ominaisuuksia, jotka ovat valmiita hyödyntämään. Yksi niistä on suhteellisen uusi asetteluyksikkö: Flexbox-ominaisuudet.

Flexbox-ominaisuudet ovat yksi CSS3: n uusimmista asetteluista, ja siitä on paljon opittavaa. Täältä saamme käytännön ohjeet asettelusta ja käytöstä. Ennen kuin aloitamme, tässä on kuitenkin pieni tausta Flexbox-ominaisuuksista:

Mitkä ovat asettelutilat?

Yksinkertaisesti sanottuna CSS Flexbox-ruudukko on asettelutila. CSS: llä on useita olemassa olevia asettelutiloja. Lohkon asettelutila (kuten näyttö: lohko) on ollut olemassa jo kauan. Lohkoasettelut ovat hyvä valinta muotoilla kokonaisia ​​asiakirjoja. Itse asiassa selain käsittelee useita elementtejä, kuten divs ja kappaleet, lohkotasona oletuksena.

Toinen yleinen asettelutila on inline. Vahva tunniste, syöttötunniste ja ankkuritunniste ovat esimerkkejä rivitasossa olevista elementeistä. Google Chromen kehittäjätyökalujen avulla voit jopa tarkastella elementin 'laskettua tyyliä' määrittääksesi CSS-ominaisuudet ja arvot, joita on sovellettu elementteihin, joita kehittäjä ei ole nimenomaisesti asettanut.

Suhteellisen uudemmat Flexbox-ominaisuudet (joustava laatikko) on suunniteltu tehokkaammaksi menetelmäksi levittää, kohdistaa ja jakaa tilaa konttiyksiköiden kesken, vaikka näiden esineiden koko olisi dynaaminen tai tuntematon. Tästä syystä termi "joustava".

Flexbox-ominaisuudet -konsepti

Tärkein asia Flexbox-ominaisuuksissa on, että se on suunnatongnostinen. Vaikka lohkoasettelu on pystysuoraan perustuva ja inline-asettelu on vaakasuuntaista, Flexbox ei ole kumpikaan. Lohkot ja rivit toimivat hyvin oikeissa tilanteissa, mutta niiltä puuttuu joustavuus tukea monimutkaisia ​​tai suuria sovelluksia, etenkin kun on kyse suuntauksen muuttamisesta, venyttämisestä, kutistumisesta, koon muuttamisesta ja muuten elementtien mittojen muuttamisesta.

Missä Flexbox-ominaisuuksia käytetään?

Kuten mitä tahansa muuta CSS-asettelua, Flexboxia käytetään parhaiten tietyissä tilanteissa. Erityisesti se on tarkoituksenmukaista sovelluksen pienimuotoisissa asetteluissa ja komponenteissa. Suuremman mittakaavan asetteluissa ruudukkoasettelu olisi viisain valinta.

Miksi Flexbox on suositeltavampi?

Monet kehittäjät ja suunnittelijat antavat etusijan Flexbox-ominaisuuksille aina kun vain voivat (joskus liian usein!). Tämä johtuu siitä, että Flexbox-ominaisuuksia on helpompi käyttää; elementtien sijainti on paljon yksinkertaisempaa, joten saat monimutkaisempia asetteluja vähemmän koodaamalla. Toisin sanoen se yksinkertaistaa kehitysprosessia.

Opas Flexbox-ominaisuuksiin

Nyt kun tiedät vähän Flexbox-ominaisuuksista ja miten ja miksi se toimii, tässä on yksityiskohtainen opas asetteluun. Asettelun malli koostuu emosäiliöstä, jota kutsutaan myös 'flex-säiliöksi'. Tämän astian välittömiä lapsia kutsutaan 'flex-esineiksi'.

Asettelu on käynyt läpi useita iteraatioita ja syntaksimuutoksia vuosien kuluessa sen ensimmäisen luonnoksen luomisesta vuonna 2009. Uusinta Flexbox-eritelmää tuetaan seuraavilla selaimilla:

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

Flexbox-ominaisuuksissa käytetty terminologia

Tässä on katsaus joihinkin Flexbox-ominaisuuksien asettelussa käytettyihin terminologioihin:

  • Näyttö: Tätä komentoa käytetään flex-säiliön määrittämiseen. Se voi olla suoraviivainen tai lohkoinen, riippuen siitä. Se myös määrittää joustavuuden sisällön kaikille säiliön kohteille. Esimerkki:

.container (

näyttö: flex; / * tai inline-flex * /

)

  • Järjestys: Flex-tuotteet on asetettu oletusarvoisesti lähdejärjestyksen mukaan, mutta 'order' -ominaisuus voi hallita järjestystä, jossa tuotteet näkyvät säilössä. Esimerkki:

.item (

Tilaus: ;

)

  • Taivutussuunta: Tämä järjestys asettaa pääakselin, joka määrittelee suunnan, jolla taipuisat esineet sijoitetaan säiliöön. Joustavat esineet voidaan ensisijaisesti asettaa pysty- tai vaakasuunnassa. Esimerkki:

.container (

taivutussuunta: rivi | rivi taaksepäin | sarake | sarake taaksepäin;

)

  • Flex-kasvava: Tämä järjestys määrittelee flex-esineen kyvyn skaalata automaattisesti, jos siinä on tilaa. Se voi hyväksyä yksikköarvon, jota voidaan käyttää suhteena. Tämä arvo sanelee, kuinka paljon tilaa tuotteen tulisi viedä taipuisan säilytysastiaan. Esimerkiksi, jos kaikissa tuotteissa on joustava kasvu asetettu arvoon 1, säilytysastian jäljellä oleva tila jaetaan tasaisesti kaikille lapsille. Jos arvo on 2, jäljellä oleva tila vie kaksi kertaa niin paljon tilaa kuin loput. Esimerkki:

.item (

flex-kasvavat:; / * oletus 0 * /

)

  • Flex-kutistuminen: Tämä tekee aivan päinvastoin kuin flex-kasvava, koska se kutistuu flex-esineitä tarvittaessa. Esimerkki:

.item (

joustavasti kutistuva:; / * oletus 1 * /

)

  • Flex-base: Tämä järjestys määrittelee elementtien oletuskoko ennen loput tilan jakamista. Se voi olla pituus, kuten 5rem tai 20%, tai avainsana. 'Automaattinen' avainsana tarkoittaa, että esineen leveys ja korkeus mitataan, ja 'sisältö' avainsana tarkoittaa, että esine on mitoitettu sen sisällön perusteella. Esimerkki:

.item (

flex-pohja: | auto; / * oletusautomaatti * /

)

  • Flex: Tämä on yhdistetty pikamerkki kaikille edellä mainituille kolmelle ominaisuudelle: flex-grow, flex-base ja flex-shrink. Oletusasetus on '0 1 auto'.

.item (

flex: ei mitään | (||)

)

  • Perustele sisältö: Tämä järjestys määrittelee pääakselin kohdistuksen ja auttaa jakamaan ylimääräisen vapaan tilan, jos esineitä on jäljellä, kun esineet ovat joustamattomia tai ovat saavuttaneet maksimikokojensa. Tämä auttaa myös hallitsemaan tuotteen kohdistusta ylivuodon yhteydessä.

.container (

perustele sisältö: flex-start | taipuisa pää | keskusta | välilyönti | tilaa ympärillä;

)

  • Kohdista kohteet: Tätä käytetään määrittämään joustavien kohteiden asettelun oletuskäyttäytyminen nykyisen rivin poikkiakselilla. Se on lähinnä versio "perustele sisältöä" poikittaisakselilla, joka on kohtisuora pääakseliin nähden. Esimerkki:

.container (

kohdista kohdat: flex-start | joustava pää | keskusta | perustaso | venyttää;

)

  • Kohdista sisältö: Tämä järjestys kohdistaa säiliön linjat siinä tapauksessa, että poikkiakselilla on ylimääräistä tilaa. Se on samanlainen kuin 'perustella sisältö', mutta poikittaisakselilla pääakselin sijasta. Jos flex-kohteita on vain yksi rivi, tällä ominaisuudella ei ole vaikutusta. Esimerkki:

.container (

kohdista sisältö: flex-start | joustava pää | keskusta | välilyönti | tilaa ympärillä | venyttää;

)

Flexbox-ominaisuuksien käyttäminen

Jotta voit käyttää Flexbox-asettelua, voit yksinkertaisesti asettaa näyttöominaisuuden HTML-yläelementissä, kuten alla:

.flex-container (

näyttö: -webkit-flex; / * Safari * /

näyttö: flex;

)

Jos haluat näyttää kuten rivielementti, voit kirjoittaa sisään:

.flex-container (

näyttö: -webkit-inline-flex; / * Safari * /

näyttö: inline-flex;

)

Tarvitset vain tämän ominaisuuden asettamisen vanhemman flex-säilöön ja sen välittömiin flex-kohteisiin. Konttien lapsista tulee automaattisesti flex-tuotteita.

Suositellut kurssit

  • Verkkokurssi ilmaisesta jQuerystä
  • Verkkokurssi ilmaisesta kulmasta JS
  • Online-koulutus Mudboxissa
  • Sertifiointikoulutus vapaa Ruby

Flexbox-ominaisuudet - Flex-säiliön ominaisuudet

Flexbox-ominaisuuksien ryhmittelyyn on monia tapoja, ja helpoin tapa oppia niistä on jakamalla ne Flex-säilö- ja esineominaisuuksiin. Olemme juuri kataneet joitain yllä olevista flex-konttiominaisuuksista. Katsotaanpa loput:

  • Taivutussuunta: rivi tai sarake

Taivutussuuntaominaisuus voidaan asettaa sarakkeiksi pystysuoraan tai riviin vaakasuoraan. Rivin suunnassa joustavat kohteet pinotaan oletuksena vasemmalta oikealle. Rivi taaksepäin muuttaa tämän suunnan oikealta vasemmalle. Sarakkeen suunta on oletusarvoisesti ylhäältä alas ja sarakkeen kääntötoiminto kääntää tämän alhaalta ylös-suuntaan.

  • Flex-wrap: nyt kääri tai kääri

Taipuistokääreominaisuus hallitsee, onko taipuisat säiliön lapset asetettu useampaan tai yhteen riviin, ja suuntaan, johon uudet rivit pinotaan. Nykyarvon arvo näkee yhdellä rivillä olevat flex-tuotteet, kutistettuna oletusarvoisesti säilön leveyteen. Käärintäarvo näkee joustavat kohteet, jotka näkyvät eri riveissä vasemmalta oikealle tai ylhäältä alas. Voit lisätä käärityksen kääntääksesi myös järjestyksen muuttamiseksi. Oletusarvo on nyt.

  • Flex-virtaus

Tämä ominaisuus on periaatteessa lyhenne joustavan suunnan ja taipuisan kääreominaisuuksien asettamiseksi toisiinsa. Oletusarvo on 'rivin nyt esitys'. Esimerkki:

.flex-container (

flex-flow: ||

)

  • Perustele-sisältöä

Perustele sisältö -ominaisuudella on neljä arvoa: joustava aloitus kohteiden kohdistamiseksi säilön vasemmalle puolelle; taipuisa pää kohdistaaksesi tuotteet oikealle puolelle; keskitä kohdistamaan keskukseen; välilyönti kohteiden kohdistamiseksi tasavälein niiden välillä siten, että ensimmäinen ja viimeinen esine kohdistetaan säiliön reunoihin; ja välilyönti taipuisan kappaleen kohdistamiseksi tasaiseen etäisyyteen niiden ympärillä, mukaan lukien ensimmäinen ja viimeinen kappale. Flex-start on oletusarvo.

  • Kohdista-eriä

Tällä ominaisuudella on viisi arvoa: venytä flex-tuotteiden skaalaamiseksi niin, että ne täyttävät koko leveyden tai korkeuden säiliön poikkipinnasta ristin päähän; flex-start-esineiden pinoaminen ristin alkaessa; taipuisa pää pinoamaan esineitä ristin päähän; keskitä kohdistamaan esineet poikkiakselin keskikohtaan; ja perustaso kohteiden kohdistamiseksi siten, että niiden perusviivat ovat yhdenmukaiset. Stretch on oletusarvo.

  • Kohdista-sisältöä

Tämä ominaisuus kohdistaa taipuisan säiliön linjat, kun poikkiakselilla on lisätilaa. Sen arvot ovat: venyttää jakamaan tilaa jokaisen rivin jälkeen; flex-start pinota esineitä kohti ristin alkua; taipuisa pää pinoamaan esineitä ristikkäitä kohti; keskitä esineiden pinoamiseksi poikkiakselin keskelle; Space-around jakaa tilaa tasaisesti flex-esineiden ympärillä. Oletusarvo on venytys.

Flexbox-ominaisuudet - Flex-kohteen ominaisuudet

Nyt kun tiedät Flexbox-säilön ominaisuuksista, tarkastellaan tuotteen ominaisuuksia:

  • Tilaus

Tämä ominaisuus hallitsee flex-säiliön lasten ulkonäköjärjestystä. Ne on oletuksena tilattu flex-konttiin.

.flex-esine (

Tilaus: ;

)

Voit järjestää flex-kohteita uudelleen joutumatta muuttamaan HTML-koodia uudelleen. Oletusarvo on nolla.

  • Kohdista-itse

Tämä ominaisuus mahdollistaa tietyn flex-kohteen oletuskohdistuksen ohittamisen. Voit käyttää tämän ominaisuuden kohdistuskohteiden arvoja.

.flex-esine (

kohdista itse: auto | flex-start | joustava pää | keskusta | perustaso | venyttää;

)

Automaattinen arvo tasaus-itse lasketaan elementtivanhempien kohdistuskohteiden arvolla. Jos elementillä ei ole vanhempaa, jousta käytetään sen sijaan.

Perus esimerkkejä

Se on kaikki mitä sinun tarvitsee tietää CSS Flexbox -ruudukon asettelun käyttämiseksi. Nyt on aika harjoittaa oppia. Tässä on joitain esimerkkejä, jotka osoittavat, kuinka kaikki nämä ominaisuudet tulevat yhteen. Aloitetaan jotain aivan yksinkertaista:

.näkyvä (

näyttö: flex;

korkeus: 300px;

)

.child (

leveys: 100px;

korkeus: 100px;

marginaali: auto;

)

Tämä on esimerkki täydellisestä keskittämisestä. Korkeus- ja leveysarvoja voidaan muuttaa haluamallasi tavalla. Tärkeintä on asettaa marginaali 'auto' -tilaan, jotta taipuisäiliö imee automaattisesti ylimääräisen tilan. Tarpeeksi yksinkertainen!

Siirrymme nyt lisäämään lisää ominaisuuksia: luettelo, jossa on kuusi kiinteämittaisista kohteita, jotka voivat olla automaattisesti koon mukaisia. Ne on jaettava tasaisesti vaaka-akselille.

.flex-container (

näyttö: flex;

perustele sisältö: avaruus ympärillä;

)

Yritetään seuraavaksi keskittää oikealle suuntautunut navigointi keskikokoisille näytöille ja tehdä siitä yhden sarakkeen pienissä laitteissa.

/ * Iso * /

.navigation (

näyttö: flex;

joustava virtaus: rivikääre;

perustele sisältö: flex-end;

)

/ * Keskikokoiset näytöt * /

@media kaikki ja (enimmäisleveys: 800 kuvapistettä) (

.navigation (

perustele sisältö: avaruus ympärillä;

)

)

/ * Pienet näytöt * /

@media kaikki ja (enimmäisleveys: 500 kuvapistettä) (

.navigation (

taipuisa suunta: sarake;

)

)

Aika ottaa tämä askel eteenpäin! Kokeillaan mobiililaitteiden ensimmäistä asettelua, jossa on kolme saraketta, täysleveä alatunniste ja otsikko ja riippumattomat lähdejärjestyksestä.

.wrapper (

näyttö: flex;

joustava virtaus: rivikääre;

)

/ * Sanomme, että kaikkien tuotteiden on oltava 100% leveitä * /

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

taipu: 1 100%;

)

/ * Luotamme lähdetilaukseen mobiili-ensimmäinen lähestymistapa * /

/ * Keskikokoiset näytöt * /

@media kaikki ja (min-leveys: 600 kuvapistettä) (

.side (flex: 1 auto; )

)

/ * Suuret näytöt * /

@media kaikki ja (min-leveys: 800 kuvapistettä) (

.main (flex: 2 0px; )

.side-1 (järjestys: 1; )

.main (järjestys: 2; )

.side-2 (järjestys: 3; )

.jalka (järjestys: 4; )

)

johtopäätös

Nämä ovat vain muutamia perus esimerkkejä. Voit pelata paljon enemmän CSS Flexbox -ruudukkoasetteluilla, ja ne ovat ehdottoman arvokkaita, jos haluat luoda reagoivan verkkosivun.

Suositellut artikkelit

Joten tässä on artikkeleita, jotka auttavat saamaan lisätietoja flexbox-ominaisuuksista, flexbox-koodista ja myös css-flexbox-ruudusta, joten käy vain alla olevan linkin läpi.

  1. HTML vs. XML - tärkeimmät erot
  2. CSS3 vs CSS - Kuinka ne eroavat? (Infograph)
  3. HTML vs CSS: n tärkeimmät erot
  4. HTML5 vs. Flash

Luokka:

Web-kehitystyökalut