Kumipöytä flex javascript css. FlexBoxin käytännöllinen sovellus. Pääakselin kohdistus: tasaus-sisältö
Danny Markov
Suunnittelu on melko yksinkertainen - se koostuu keskelle kohdistetusta säiliöstä, jonka sisällä meillä on otsikko, pääosio, sivupalkki ja alatunniste. Tässä ovat tärkeimmät "testit", jotka meidän tulisi suorittaa pitäen CSS ja HTML mahdollisimman puhtaina:
- Sijoita asettelun neljä pääosaa.
- Tee sivusta responsiivinen (sivupalkki jää pääsisällön alapuolelle pienillä näytöillä).
- Tasaa otsikon sisältö - vasen navigointi, oikea painike.
Kuten näette, vertailun vuoksi pidimme kaiken mahdollisimman yksinkertaisena. Aloitetaan ensimmäisestä testistä.
Testi 1: Sivuosien asettaminen
Flexbox ratkaisu
Lisää näyttö: taivuta säilöön ja aseta alatason elementtien pystysuunta. Tämä asettaa kaikki osat toistensa alle.
Säiliö ( näyttö: flex; flex-direction: sarake; )
Nyt meidän on varmistettava, että pääosa ja sivupalkki sijaitsevat vierekkäin. Koska flex-säiliöt ovat yleensä yksisuuntaisia, meidän on lisättävä ylimääräinen elementti.
Asetamme sitten tämän elementin näytön: flex ja flex-direction vastakkaiseen suuntaan.
Pää- ja sivupalkin kääre ( näyttö: flex; flex-suunta: rivi; )
Viimeinen vaihe on pääosan ja sivupalkin mitat. Haluamme pääsisällön olevan kolme kertaa sivupalkin leveys, mikä on helppo tehdä flexillä tai prosenteilla.
Kuten näette, Flexbox teki kaiken hyvin, mutta tarvitsimme myös melko paljon CSS-ominaisuuksia sekä ylimääräisen HTML-elementin. Katsotaan kuinka CSS Grid toimii.
CSS Grid -ratkaisu
CSS-ruudukon käyttämiseen on useita vaihtoehtoja, mutta käytämme grid-template-areas -syntaksia tarkoituksiin sopivimpana.
Ensin määritetään neljä ruudukkoaluetta, yksi kullekin sivun osalle:
Nyt voimme asettaa verkkomme ja määrittää kunkin alueen sijainnin. Koodi saattaa aluksi tuntua melko monimutkaiselta, mutta kun ruudukkojärjestelmään tutustuu, se on helpompi ymmärtää.
Container ( näyttö: grid; /* Määritä ruudukkomme sarakkeiden koko ja lukumäärä. fr-yksikkö toimii kuten Flexbox: sarakkeet jakavat rivillä olevan tilan arvojensa mukaan. Meillä on kaksi saraketta - ensimmäinen on kolminkertainen toisen */ grid-template -sarakkeen koko: 3fr 1fr /* Yhdistä aiemmin tehdyt alueet ruudukon toiseen riviin sivupalkki */ grid-template-areas: "header header" pääsivupalkki" "alatunnisteen alatunniste"; /* Ruudukon solujen välinen etäisyys on 60 pikseliä */ grid-gap: 60px; )
Siinä kaikki! Asettelumme noudattaa nyt yllä olevaa rakennetta ja olemme määrittäneet sen niin, että meidän ei tarvitse käsitellä marginaaleja tai pehmusteita.
Testi 2. Tee sivusta responsiivinen
Flexbox ratkaisu
Tämä vaihe liittyy tiukasti edelliseen. Flexbox-ratkaisussa meidän on muutettava flex-suuntaa ja säädettävä marginaalia.
@media (max-width: 600px) ( .main-and-sidebar-wrapper ( flex-direction: sarake; ) .main ( margin-right: 0; margin-bottom: 60px; ) )
Sivumme on melko yksinkertainen, joten mediakyselyssä ei ole paljon työtä, mutta monimutkaisempi ulkoasu vaatisi paljon uudelleenkäsittelyä.
CSS Grid -ratkaisu
Koska olemme jo määrittäneet ruudukkoalueet , meidän on vain määritettävä niiden järjestys uudelleen mediakyselyssä. Voimme käyttää samaa kaiutinasetusta.
@media (max-width: 600px) ( .container ( /* Tasaa mobiiliasettelun ruudukkoalueet */ grid-template-areas: "header header" "main main" "sivupalkin sivupalkki" "alatunnisteen alatunniste"; ) )
Tai voimme määrittää koko asettelun uudelleen tyhjästä, jos tämä ratkaisu on mielestämme puhtaampi.
@media (max-width: 600px) ( .container ( /* Muunna ruudukko yhden sarakkeen asetteluksi */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sivupalkki" " alatunniste"; ) )
Testi 3: Otsikkokomponenttien kohdistaminen
Flexbox ratkaisu
Olemme jo tehneet samanlaisen asettelun Flexboxin kanssa yhdessä vanhoista artikkeleistamme -. Tekniikka on melko yksinkertainen:
Otsikko ( näyttö: flex; tasaus-sisältö: välilyönti; )
Navigointiluettelo ja -painike on nyt kohdistettu oikein. Jäljelle jää vain tavaroiden sijoittaminen sisään
Otsikkonavigointi (näyttö: flex; tasauskohteet: perusviiva; )
Vain kaksi riviä! Ei huonommin. Katsotaanpa kuinka käsitellä tätä CSS-ruudukko.
CSS Grid -ratkaisu
Navigoinnin ja painikkeen erottamiseksi meidän on lisättävä otsikkoon display: grid ja asetettava kaksisarakkeinen ruudukko. Tarvitsemme myös kaksi ylimääräistä CSS-riviä sijoittaaksemme kaiken asianmukaisille reunuksille.
Otsikko(näyttö: ruudukko; grid-template-columns: 1fr 1fr; ) header nav (justify-self: start; ) header-painike (justify-self: end; )
Yksirivisten linkkien osalta emme pystyneet tekemään tätä oikein CSS Gridillä. Paras yrityksemme näyttää tältä:
Otsikkonavigointi (näyttö: ruudukko; grid-template-columns: auto 1fr 1fr; align-items: end; )
On selvää, että CSS Grid ei käsittele tätä asettelun osaa hyvin, mutta se ei ole yllättävää - painopiste on säiliöiden kohdistamisessa, ei niiden sisällä. Tämä järjestelmä ei ole tarkoitettu viimeistelyyn.
johtopäätöksiä
Jos luet koko artikkelin (ja se on hienoa työtä!), johtopäätösten ei pitäisi yllättää sinua. Itseasiassa ei parempi järjestelmä- Sekä Flexbox että CSS Grid ovat omalla tavallaan hyviä ja niitä tulee käyttää yhdessä, ei vaihtoehtona toisilleen.
Niille teistä, jotka hyppäsivät suoraan tämän artikkelin johtopäätöksiin (älä huoli, teemme niin myös), tässä on nopea yhteenveto vertailusta:
- CSS Grid on loistava ison kuvan luomiseen. Tämä järjestelmä helpottaa sivun asettelun hallintaa ja pystyy käsittelemään jopa epäsäännöllisiä ja epäsymmetrisiä malleja.
- Flexbox sopii erinomaisesti sisällön kohdistamiseen elementtien sisällä. Käytä tätä järjestelmää pienten suunnitteluyksityiskohtien sijoittamiseen.
- Käytä CSS-ruudukkoa 2D-asetteluissa (rivit JA sarakkeet).
- Flexbox toimii paremmin vain yhdessä ulottuvuudessa (rivit TAI sarakkeet).
- Ei ole mitään syytä käyttää vain CSS Gridiä tai vain Flexboxia. Tutki niitä ja käytä niitä yhdessä.
Hei, habr!
Eräänä kauniina iltana, ennakoimatta mitään mielenkiintoista, keskustelumme sai keväällä 2012 kirjoittamansa julkaisun "Translating 5 Really Useful Responsive Markup Templates in Code" kirjoittajalta ehdotuksen kirjoittaa uusintaversio, mutta käyttämällä FlexBoxia. ja siihen liittyvä selitys siitä, mikä ja miten toimii. Joidenkin epäilyjen jälkeen kiinnostus ymmärtää määrittelyä syvemmälle voitti silti, ja minä istuin iloisena kirjoittamaan samoja esimerkkejä. Kun uppouduimme tähän alueeseen, monet vivahteet alkoivat selkiytyä, mikä kasvoi joksikin muuksi kuin vain asettelujen uudelleensuunnitteluksi. Yleisesti ottaen tässä artikkelissa haluan puhua niin upeasta spesifikaatiosta nimeltä "CSS Flexible Box Layout Module" ja näyttää joitain sen mielenkiintoisia ominaisuuksia ja esimerkkejä sovelluksista. Kutsun ystävällisesti kaikki kiinnostuneet mukaan hakkerointiin.
Haluaisin kiinnittää huomiosi siihen, että kehittäjä tarvitsee jonkin verran mukauttamista luodakseen asettelun FlexBoxissa. Omasta esimerkistäni koin, että monen vuoden kokemus leikki julmaa vitsiä. FlexBox vaatii hieman erilaista ajattelua elementtien rivittämisestä kulkuun.
Tekninen osa
Ennen kuin siirryt joihinkin esimerkkeihin, on syytä ymmärtää, mitä ominaisuuksia se sisältää tämä eritelmä ja miten ne toimivat. Koska jotkut niistä eivät ole aluksi kovin selkeitä, ja jotkut ovat myyttien ympäröimiä, joilla ei ole mitään tekemistä todellisuuden kanssa.Niin. FlexBoxissa on kahta päätyyppiä elementtejä: Flex Container ja sen alat - Flex Items. Alusta säilö määrittämällä elementti css:n kautta näyttö: flex; tai näyttö: inline-flex;. Ero flexin ja inline-flexin välillä on vain periaatteessa vuorovaikutus säiliötä ympäröivien elementtien kanssa, samanlainen kuin näyttö: block; ja näyttö: inline-block;, vastaavasti.
Joustavan säiliön sisään luodaan kaksi akselia, pääakseli ja kohtisuora tai poikkiakseli. Useimmiten joustavat elementit kohdistetaan pääakselia pitkin ja sitten poikkiakselia pitkin. Oletuksena pääakseli on vaakasuora ja suunnattu vasemmalta oikealle, ja poikkiakseli on pystysuora ja suunnattu ylhäältä alas.
Akseleiden suuntaa voidaan ohjata css-ominaisuuden avulla flex-suunta. Tämä ominaisuus ottaa useita arvoja:
rivi(oletus): Joustavan säiliön pääakselilla on sama suunta kuin nykyisen rivin suuntatilan sisäakselilla. Pääakselin suunnan alku (main-alku) ja loppu (main-end) vastaavat sisäakselin alkua (inline-alku) ja loppua (inline-end).
rivi-käänteinen: Kaikki on sama kuin rivissä, vain pääaloitus ja pääpää vaihdetaan.
sarakkeessa: sama kuin rivi, vain nyt pääakseli on suunnattu ylhäältä alas.
sarake-käänteinen: sama kuin rivinvaihto, vain pääakseli on suunnattu alhaalta ylös.
Voit nähdä, kuinka tämä toimii jsfiddlen esimerkissä.
Oletuksena kaikki säilön joustavat kohteet sijoitetaan yhdelle riville, vaikka ne eivät mahdukaan säiliöön, ne ulottuvat sen rajojen ulkopuolelle. Tämä toiminta on vaihdettu ominaisuuden avulla flex-wrap. Tällä omaisuudella on kolme tilaa:
nowrap(oletus): Flex-kohteet ovat rivissä yhdelle riville vasemmalta oikealle.
kääri: joustavat elementit rakennetaan monirivisessä tilassa, siirto tapahtuu poikkiakselin suunnassa, ylhäältä alas.
kääri-käänteinen: sama kuin kääre, mutta kietoutuu alhaalta ylöspäin.
Katsotaanpa esimerkkiä.
Mukavuussyistä on lisäkiinteistö flex-flow, jossa voit määrittää samanaikaisesti flex-suunta Ja flex-wrap. Se näyttää tältä: flex-flow:
Säilön elementit voidaan kohdistaa ominaisuuden avulla perustele-sisältö pääakselia pitkin. Tämä ominaisuus hyväksyy jopa viisi eri arvoa.
flex-start(oletus): Flex-elementit on kohdistettu pääakselin alkupisteeseen.
joustava pää: elementit on kohdistettu pääakselin päähän
keskusta: Elementit on kohdistettu pääakselin keskelle
välilyönti: elementit vievät koko säiliön käytettävissä olevan leveyden, uloimmat elementit painetaan tiiviisti säiliön reunoja vasten ja vapaa tila jakautuu tasaisesti elementtien välillä.
tilaa ympärillä: Joustavat elementit kohdistetaan siten, että vapaa tila jakautuu tasaisesti elementtien välillä. Mutta on syytä huomata, että säiliön reunan ja ulkoelementtien välinen tila on puolet niin paljon kuin rivin keskellä olevien elementtien välinen tila.
Voit tietysti napsauttaa esimerkkiä tämän ominaisuuden toiminnasta.
Siinä ei vielä kaikki, meillä on myös mahdollisuus kohdistaa elementtejä poikkiakselin suuntaisesti. Hakemalla omaisuutta kohdista kohteet, joka ottaa myös viisi eri arvoa, voit saavuttaa mielenkiintoisen käyttäytymisen. Tämän ominaisuuden avulla voit kohdistaa elementit riviin suhteessa toisiinsa.
flex-start: kaikki elementit työnnetään rivin alkuun
joustava pää: elementit työnnetään rivin loppuun
keskusta: elementit on kohdistettu rivin keskelle
perusviiva: Elementit tasataan tekstin perusviivaan
venyttää(oletus): elementtejä venytetään täyttämään koko rivi.
Toinen edellisen kaltainen ominaisuus on kohdista-sisältö. Se on ainoa, joka vastaa kokonaisten linjojen kohdistamisesta joustavaan säiliöön. Sillä ei ole vaikutusta, jos joustavat tuotteet täyttävät yhden rivin. Kiinteistö saa kuusi eri arvoa.
flex-start: kaikki rivit painetaan poikkiakselin alkuun
joustava pää: kaikki rivit painetaan poikkiakselin loppuun
keskusta: Kaikki pakkausviivat on kohdistettu poikkiakselin keskelle
välilyönti: viivat jaetaan yläreunasta alaosaan jättäen vapaata tilaa viivojen väliin, kun taas uloimmat viivat painetaan säiliön reunoja vasten.
tilaa ympärillä: Viivat jakautuvat tasaisesti koko astiaan.
venyttää(oletus): viivoja venytetään viemään kaikki käytettävissä oleva tila.
Tässä esimerkissä voit kokeilla, kuinka tasauskohteet ja kohdistaminen sisältö toimivat. Esitin nämä kaksi ominaisuutta erityisesti yhdessä esimerkissä, koska ne ovat vuorovaikutuksessa melko tiiviisti ja kukin suorittaa oman tehtävänsä. Huomaa, mitä tapahtuu, kun elementit sijoitetaan yhdelle riville tai useille riveille.
Olemme selvittäneet joustavan säiliön parametrit, jäljellä on vain selvittää joustavien elementtien ominaisuudet.
Ensimmäinen kiinteistö, johon tutustumme, on Tilaus. Tämän ominaisuuden avulla voit muuttaa sijaintia streamissa tietty elementti. Oletusarvoisesti kaikilla joustavilla tuotteilla on järjestys: 0; ja ne on rakennettu luonnollisen virtauksen mukaan. Esimerkissä näet kuinka elementit vaihdetaan, jos niihin sovelletaan erilaisia järjestysarvoja.
Yksi tärkeimmistä ominaisuuksista on flex-pohjainen. Tällä ominaisuudella voimme määrittää flex-tuotteen pohjaleveyden. Oletusarvo on auto. Tämä ominaisuus liittyy läheisesti flex-grow Ja joustava-kutistuva, josta puhun hieman myöhemmin. Hyväksyy leveyden arvon px, %, em ja muissa yksiköissä. Pohjimmiltaan tämä ei ole tiukasti flex-elementin leveys, se on eräänlainen lähtökohta. Suhteessa siihen, mihin elementti venyy tai kutistuu. Automaattitilassa elementti saa pohjaleveyden suhteessa sen sisällä olevaan sisältöön.
flex-grow useilla resursseilla sillä on täysin väärä kuvaus. Siinä sanotaan, että se oletettavasti määrittää säiliön elementtien kokojen suhteen. Itse asiassa tämä ei ole totta. Tämä ominaisuus määrittää elementin suurennuskertoimen, jos sellainen on Vapaa tila astiassa. Tämän ominaisuuden arvo on oletusarvoisesti 0. Oletetaan, että meillä on joustava säiliö, jonka leveys on 500 pikseliä, ja sen sisällä on kaksi flex-kohdetta, joiden pohjaleveys on 100 kuvapistettä. Tämä jättää säilöön vielä 300 kuvapistettä vapaata tilaa. Jos määritetään flex-grow: 2 ensimmäiselle elementille ja flex-grow: 1; Tämän seurauksena nämä lohkot vievät säilön koko käytettävissä olevan leveyden, vain ensimmäisen lohkon leveys on 300 kuvapistettä ja toisen vain 200 kuvapistettä. Mitä tapahtui? Säilön käytettävissä oleva 300 pikseliä vapaata tilaa jaettiin elementtien kesken suhteessa 2:1, +200px ensimmäiselle ja +100px toiselle. Näin se itse asiassa toimii.
Täällä siirrymme sujuvasti toiseen vastaavaan kiinteistöön, nimittäin joustava-kutistuva. Oletusarvo on 1. Se asettaa myös tekijän elementtien leveyden muuttamiselle, vain vastakkaiseen suuntaan. Jos säiliöllä on leveys Vähemmän kuin elementtien perusleveyden summa, tämä ominaisuus tulee voimaan. Esimerkiksi säiliön leveys on 600 pikseliä ja elementtien flex-pohja on 300 pikseliä. Anna ensimmäiselle elementille flex-shrink: 2; ja toiselle elementille flex-shrink: 1;. Pienennetään nyt säilöä 300 pikselillä. Siksi elementtien leveyssumma on 300 kuvapistettä suurempi kuin säilö. Tämä ero jakautuu suhteessa 2:1, joten vähennämme ensimmäisestä lohkosta 200 pikseliä ja toisesta 100 pikseliä. Elementtien uusi koko on 100px ja 200px ensimmäiselle ja toiselle elementille. Jos asetamme flex-shrink arvoon 0, estämme elementin kutistumisen perusleveyttä pienempään kokoon.
Itse asiassa tämä on hyvin yksinkertaistettu kuvaus siitä, miten se kaikki toimii, jotta se on selkeä yleinen käytäntö. Tarkemmin, jos jotakuta kiinnostaa, algoritmi on kuvattu spesifikaatiossa.
Kaikki kolme ominaisuutta voidaan kirjoittaa lyhennetyssä muodossa käyttämällä lauseketta flex. Tämä näyttää tältä:
flex:
Ja voimme myös kirjoittaa kaksi muuta lyhennettyä versiota, flex:auto; Ja flex: ei mitään;, joka tarkoittaa flex: 1 1 auto; Ja flex: 0 0 auto; vastaavasti.
Joustavien elementtien viimeinen ominaisuus säilyy kohdistaa itsensä. Täällä kaikki on yksinkertaista, se on sama kuin säilön tasauskohteet, jonka avulla voit ohittaa tietyn elementin kohdistuksen.
Siinä se, olen kyllästynyt siihen! Anna meille esimerkkejä!
Selvitimme teknisen osan, se osoittautui melko pitkäksi, mutta sinun on päästävä siihen. Nyt voimme siirtyä käytännön sovelluksiin.Näiden "viiden todella hyödyllisen responsiivisen asettelumallin" kehittämisen aikana jouduimme ratkaisemaan tyypillisiä tilanteita, joita kehittäjät kohtaavat melko usein. Flexboxin avulla näiden ratkaisujen toteuttaminen on helpompaa ja joustavampaa.
Otetaan sama 4. asettelu, koska... siinä on mielenkiintoisimmat elementit.
Määritetään ensin sivun pääleveys, kohdistetaan se keskelle ja painetaan alatunniste sivun alareunaan. Kuten aina yleensä.
Html ( tausta: #ccc; min-korkeus: 100 %; font-family: sans-serif; näyttö: -webkit-flex; näyttö: flex; flex-direction: sarake; ) body ( marginaali: 0; täyte: 0 15px näyttö: flex-suunta: 30px: flex-box; : 960px: reunus: 430px;
Johtuen siitä, että määritimme flex-grow:n: 1 .main; se venyy täyteen käytettävissä olevaan korkeuteen ja painaa siten alatunnisteen pohjaan. Tämän ratkaisun bonus on, että alatunniste voi olla kiinteäkorkuinen.
Laitetaan nyt logo ja valikko otsikkoon.
.logo ( font-size: 0; margin: -10px 10px 10px 0; näyttö: flex; flex: ei mitään; align-items: center; ) .logo:before, .logo:after (sisältö: ""; näyttö: block ; ) .logo:ennen ( tausta: #222; leveys: 50px; korkeus: 50px; marginaali: 0 10px 0 20px; reunuksen säde: 50%; ) .logo:after ( tausta: #222; leveys: 90px; korkeus : 30px; .nav ( marginaali: -5px 0 0 -5px; näyttö: -webkit-flex; näyttö: flex; flex-wrap: wrap; ) .nav-itm ( tausta: #222; leveys: 130px; korkeus: 50px-koko: 1.5rem: ei mitään;
Koska otsikossa on flex-wrap: wrap; ja perustele-sisältö: välilyönti; Logo ja valikko ovat hajallaan otsikon eri puolilla, ja jos valikolle ei ole tarpeeksi tilaa, se siirtyy tyylikkäästi logon alle.
Seuraavaksi näemme suuren julkaisun tai bannerin, on vaikea sanoa, mikä se on, mutta siitä ei ole kysymys. Meillä on kuva oikealla ja teksti otsikolla vasemmalla. Itse kannatan ajatusta, että minkä tahansa elementin tulee olla mahdollisimman joustava, riippumatta siitä, onko asettelu mukautuva vai staattinen. Joten tässä viestissä on sivupalkki, johon on sijoitettu kuva tarkasti ottaen, emme voi sanoa tarkalleen mitä leveyttä tarvitsemme, koska tänään meillä on suuri kuva, huomenna pieni, emmekä halua tehdä elementtiä uudelleen; alusta joka kerta. Tämä tarkoittaa, että tarvitsemme sivupalkin ottamaan sen tarvitseman paikan, ja loput tilasta menee sisältöön. Tehdään tämä:
Laatikko ( kirjasinkoko: 1,25 rem; rivin korkeus: 1,5; kirjasintyyli: kursivoitu; marginaali: 0 0 40px -50px; näyttö: -webkit-flex; näyttö: flex; flex-wrap: rivitys; tasaussisältö: center; .box-base ( margin-vasen: 50px; flex: 1 0 430px; ) .box-side ( margin-vasen: 50px; flex: ei mitään; ) .box-img ( max-width: 100%; korkeus : auto)
Kuten näet .box-base:lle, jossa meillä on otsikko ja teksti, määritin pohjan leveyden flex-basis: 430px;, ja myös kielletty lohkokutistuminen joustava-kutistuva: 0;. Tällä manipuloinnilla sanoimme, että sisällöstä ei voi tulla alle 430 kuvapistettä leveä. Ja kun otetaan huomioon se tosiasia, että .boxille ilmoitan flex-wrap: kääri; kun sivupalkki ja sisältö eivät mahdu container.boxiin, sivupalkki putoaa automaattisesti sisällön alle. Ja kaikki tämä ilman sovellusta @media! Minusta tämä on todella siistiä.
Jäljelle jää kolmen sarakkeen sisältö. Tähän ongelmaan on useita ratkaisuja, näytän niistä yhden muissa asetteluissa on toinen vaihtoehto.
Luodaan säilö, kutsutaan sitä nimellä .content ja määritetään se.
.content ( margin-bottom: 30px; näyttö: -webkit-flex; näyttö: flex; flex-wrap: wrap; )
Säilössä on kolme saraketta, .bannerit, .posts, .comments
.bannerit ( flex: 1 1 200px; ) .posts ( margin: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( margin: 0 0 30px 30px; flex: 1 1 200px;)
Annoin sarakkeille pohjaleveydeksi 200px, jotta sarakkeet eivät kapene liikaa, vaan olisi parempi, jos niitä siirrettäisiin toistensa alle tarpeen mukaan.
Asettelun mukaan emme tule toimeen ilman @mediaa sisällön kanssa, joten säädetään sarakkeiden toimintaa hieman leveyden mukaan<800px и <600px.
@medianäyttö ja (max-leveys: 800px) ( .bannerit ( margin-vasen: -30px; näyttö: -webkit-flex; näyttö: flex; flex-basis: 100%; ) .posts ( margin-vasen: 0; ) ) @medianäyttö ja (max-leveys: 600px) ( .content ( näyttö: lohko; ) .bannerit ( marginaali: 0; näyttö: esto; ) .kommentit ( marginaali: 0; ) )
Siinä kaikki taikuutta, kun on kyse asettelun luomisesta FlexBoxille. Toinen tehtävä, josta pidin, on 5. ulkoasu, erityisesti se liittyy sisällön mukauttamiseen.
Näemme, kuinka työpöydän resoluutiolla viestit rakennetaan kolmen peräkkäisen ruudukon. Kun näkymän leveys pienenee alle 800 pikseliä, ruudukko muuttuu viestipalstaksi, jossa postauksen kuva on rivissä vuorotellen viestin sisällön vasemmalla ja oikealla puolella. Ja jos leveys on alle 600 pikseliä, postauskuva piilotetaan kokonaan.
.grid ( näyttö: -webkit-flex; näyttö: flex; flex-wrap: wrap; justify-content: välilyönti; ) .grid-itm ( margin-bottom: 30px; flex-basis: calc(33,33% - 30px) * 2/3); 100 %; .grid-title (tekstin tasaus: keskelle; ) @medianäyttö ja (max-width: 800px) ( .grid-itm (flex-wrap: nowrap; flex-basis: 100%; ) grid-img ( flex: 0 0 auto ) .grid-itm:nth-child(parillinen) .grid-img ( margin: 0 0 0 30px; järjestys: 2; ) .grid-itm:nth-child(pariton) .grid-img ( margin: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @medianäyttö ja (max-width: 600px) ( .grid-img (näyttö: ei mitään; ) )
Itse asiassa tämä on vain pieni osa siitä, mitä voidaan toteuttaa FlexBoxilla. Erittelyn avulla voit rakentaa erittäin monimutkaisia sivuasetteluja yksinkertaisella koodilla.
Flexbox on suunniteltu säästämään meidät puhtaan CSS:n ilkeydeltä (kuten pystysuuntaukselta), ja se tekee hyvää työtä. Mutta sen toiminnan periaatteiden ymmärtäminen voi joskus olla vaikeaa, varsinkin jos olet aloittelija.
Flexboxin päätavoite on tehdä kerroksista joustavia ja intuitiivisia. Tämän tavoitteen saavuttamiseksi se antaa konteille mahdollisuuden päättää, miten heidän tulee käsitellä lapsiaan, mukaan lukien heidän koon ja välien muuttaminen.
Kuulostaa hyvältä, mutta katsotaan, onko se käytännössä niin sujuvaa. Tässä artikkelissa tutkimme viittä suosituinta Flexbox-kiinteistöä, mitä ne tekevät ja miten ne todella toimivat.
Näyttö: Flex
Tässä on esimerkkisivu:
Meillä on 4 eriväristä erikokoista diviä, jotka ovat harmaan divin sisällä. Jokaisella divillä on display: block -ominaisuus. Siksi jokainen neliö vie viivan koko leveyden.
Flexboxin käytön aloittamiseksi meidän on tehtävä säiliöstämme joustava kontti. Tämä tehdään näin:
#container ( näyttö: flex; )
Näyttää siltä, että mikään ei ole juurikaan muuttunut - divit ovat juuri rivissä. Mutta teit jotain todella voimakasta. Olet antanut neliöillesi hienon ominaisuuden nimeltä "flex-context".
Flex-suunta
Joustosäiliössä on kaksi akselia: pääakseli ja siihen nähden kohtisuorassa oleva akseli.
Oletuksena kaikki objektit sijaitsevat pääakselilla: vasemmalta oikealle. Siksi neliömme asettuivat riviin, kun käytimme näyttöä: flex . Joustosuunta mahdollistaa kuitenkin pääakselin pyörittämisen.
#container ( näyttö: flex; flex-direction: sarake; )
On tärkeää huomata, että flex-direction: sarake ei kohdista neliöitä pitkin akselia, joka on kohtisuorassa pääakseliin nähden. Pääakseli itse muuttaa sijaintiaan ja on nyt suunnattu ylhäältä alas.
Flex-directionille on pari muuta ominaisuutta: rivi-käänte ja sarake-käänte.
Perustele sisältö
Justify-content vastaa elementtien kohdistamisesta pääakselilla.
Palataan joustosuuntaan: rivi .
#container ( näyttö: flex; flex-direction: rivi; tasaus-sisältö: flex-start; )
Tasoitussisällöllä voi olla 5 arvoa:
- flex-start ;
- taipuisa pää;
- keskus ;
- välilyönti ;
- tilaa ympärillä.
Välilyönti asettaa saman etäisyyden neliöiden välillä, mutta ei säilön ja neliöiden välillä. Space-around asettaa myös saman etäisyyden ruutujen välille, mutta nyt säiliön ja neliöiden välinen etäisyys on puolet neliöiden välisestä etäisyydestä.
Kohdista kohteet
Jos tasaussisältö toimii pääakselilla, kohdista kohteet toimii akselilla, joka on kohtisuorassa pääakseliin nähden.
Palataan flex-direction: rivi ja käy läpi align-items -komennot:
- flex-start ;
- taipuisa pää;
- keskus ;
- venyttää ;
- perusviiva.
On syytä huomata, että tasauskohteiden kohdalla: venytys neliöiden korkeudeksi tulee asettaa automaattinen . Tasauskohdissa: perusviivaa ei tarvitse poistaa kappaletunnisteita, muuten se näyttää tältä:
Ymmärtääksemme paremmin, miten akselit toimivat, yhdistetään tasaussisältö ja tasauskohteet ja katsotaan, kuinka keskikohdistus toimii kahdessa flex-direction-ominaisuudessa:
Kohdista itse
Align-self mahdollistaa elementtien kohdistamisen yksitellen.
#container ( align-items: flex-start; ) .square#one ( align-self: center; ) // Vain tämä neliö keskitetään.
Käytetään align-self kahdelle ruudulle ja align-items: center ja flex-direction: rivi lopuille.
Flex-pohjainen
Flex-basis vastaa elementtien alkuperäisestä koosta ennen kuin muut Flexbox-ominaisuudet muuttavat niitä: 
Flex-basis vaikuttaa elementtien kokoon pääakselilla. 
Katsotaan mitä tapahtuu, jos muutamme pääakselin suuntaa:
Huomaa, että jouduimme myös muuttamaan elementtien korkeutta. Flex-basis voi määrittää sekä elementtien korkeuden että leveyden akselin suunnasta riippuen.
Flex Grow
Tämä ominaisuus on hieman monimutkaisempi.
Ensin annetaan neliöillemme sama leveys 120 pikseliä:
Oletusarvoisesti flex-grow-arvo on 0. Tämä tarkoittaa, että neliöt eivät saa kasvaa (vievät säiliössä jäljellä olevan tilan).
Yritetään asettaa flex-grow arvoon 1 jokaiselle ruudulle:
Neliöt veivät säiliössä jäljellä olevan tilan. Flex-grow-arvo ohittaa leveyden arvon.
Mutta tässä herää yksi kysymys: mitä flex-grow: 1 tarkoittaa?
Yritetään asettaa flex-grow arvoon 999:
Ja... mitään ei tapahtunut. Tämä tapahtui, koska flex-grow ei hyväksy absoluuttisia arvoja, vaan suhteellisia arvoja.
Tämä tarkoittaa, että sillä ei ole väliä, mikä on flex-grown arvo, vaan sillä, mikä se on suhteessa muihin neliöihin:
Aluksi jokaisen neliön flex-grow on 1, yhteensä 6. Tämä tarkoittaa, että konttimme on jaettu 6 osaan. Jokainen neliö vie 1/6 säiliössä olevasta tilasta.
Kun kolmannen neliön flex-kasvusta tulee 2, säiliö jaetaan 7 osaan (1 + 1 + 2 + 1 + 1 + 1).
Nyt kolmas ruutu vie 2/7 tilasta, loput - 1/7 kukin.
On syytä muistaa, että flex-grow toimii vain pääakselilla (kunnes muutamme sen suuntaa).
Flex Shrink
Flex-shrink on täsmälleen flex-grown vastakohta. Se määrittää, kuinka paljon neliö voi kutistua kooltaan.
Joustokutistusta käytetään, kun elementit eivät mahdu säiliöön.
Sinä päätät, mitkä elementit saa kutistua kooltaan ja mitkä eivät. Oletusarvoisesti kunkin neliön flex-shrink-arvo on 1. Tämä tarkoittaa, että neliöt kutistuvat, kun säiliö pienenee.
Asetetaan flex-grow ja flex-shrink arvoksi 1:
Muutetaan nyt kolmannen neliön flex-shrink-arvo 0:ksi. Se ei saa kutistua, joten sen leveys pysyy 120 pikselissä:
Kannattaa muistaa, että flex-shrink perustuu mittasuhteisiin. Eli jos neliön joustokutistuvuus on 6 ja muiden joustokutistuvuus on 2, tämä tarkoittaa, että neliömme kutistuu kolme kertaa nopeammin kuin muut.
Flex
Flex korvaa flex-grow, flex-shrink ja flex-basis .
Oletusarvot ovat 0 (kasvu) 1 (kutistuminen) ja auto (perus).
Luodaan kaksi ruutua:
Square#one ( flex: 2 1 300px; ) .square#two ( flex: 1 2 300px; )
Molemmilla neliöillä on sama joustopohja. Tämä tarkoittaa, että ne ovat molemmat 300 kuvapistettä leveitä (säilön leveys: 600 kuvapistettä plus marginaali ja täyte).
Mutta kun säiliön koko alkaa kasvaa, ensimmäinen neliö (jossa on suurin joustava kasvu) kasvaa kaksi kertaa nopeammin ja toinen neliö (jossa suurin flex-shrink) kutistuu kaksi kertaa nopeammin.
Miten asiat kasvavat ja pienenevät
Kun ensimmäinen neliö kasvaa, se ei tule kaksinkertaiseksi toisen neliön kokoiseksi, ja kun toinen neliö pienenee, siitä ei tule puolta ensimmäisen neliöstä. Tämä johtuu siitä, että flex-grow ja flex-shrink ovat vastuussa kasvun ja supistumisen nopeudesta.
Vähän matematiikkaa
Säilön alkuperäinen koko: 640 pikseliä. Vähennä 20 pikseliä kummaltakin puolelta täytetystä varten, ja jäljelle jää 600 pikseliä, joka riittää kahdelle ruudulle.
Kun säilön leveydeksi tulee 430 pikseliä (häviö 210 kuvapistettä), ensimmäinen neliö (flex-shrink: 1) menettää 70 kuvapistettä. Toinen neliö (flex-shrink: 2) menettää 140 kuvapistettä.
Kun säilö kutistuu 340 pikseliin, menetämme 300 pikseliä. Ensimmäinen neliö menettää 100 pikseliä, toinen - 200 pikseliä.
Sama asia tapahtuu flex-growissa.
Lyhyesti sanottuna Flexbox-asettelu antaa meille yksinkertaisia ratkaisuja kerran vaikeisiin ongelmiin. Esimerkiksi kun haluat kohdistaa elementin pystysuoraan tai painaa alatunnistetta näytön alareunaan tai yksinkertaisesti lisätä useita lohkoja yhdelle riville niin, että ne vievät kaiken vapaan tilan. Samanlaiset ongelmat voidaan ratkaista ilman joustavuutta. Mutta yleensä nämä ratkaisut ovat enemmän kuin "sauvat" - tekniikoita, joilla CSS:ää käytetään muihin tarkoituksiin kuin niiden aiottuun tarkoitukseen. Kun flexboxilla sellaiset tehtävät ratkaistaan juuri niin kuin flex-malli on tarkoitettu.
CSS Flexible Box Layout Module (CSS-moduuli asetteluille joustavilla lohkoilla), lyhennettynä flexbox, luotiin poistamaan puutteet luotaessa monenlaisia HTML-malleja, mukaan lukien eri leveyksiin ja korkeuksiin mukautettuja, ja tehdä asettelusta looginen ja yksinkertainen . Ja looginen lähestymistapa toimii yleensä odottamattomissa paikoissa, joissa tulosta ei ole tarkistettu - logiikka on kaikki kaikessa!
Flexboxin avulla voit ohjata tyylikkäästi erilaisia elementtien parametreja säiliön sisällä: suunta, järjestys, leveys, korkeus, kohdistus pitkin ja poikki, vapaan tilan jakautuminen, elementtien venyminen ja puristus.
Perustieto
FlexBox koostuu säiliöstä ja sen kohteista (joustoelementit).
Jos haluat ottaa flexboxin käyttöön, mille tahansa HTML-elementille on vain määritettävä CSS-ominaisuus display:flex; tai näyttö:inline-flex; .
Kun flex-ominaisuus on otettu käyttöön, säiliön sisään luodaan kaksi akselia: pää- ja poikittaisakseli (pystysuora (⊥), poikkiakseli). Kaikki sisäkkäiset elementit (ensimmäisen tason) ovat rivissä pääakselia pitkin. Oletuksena pääakseli on vaakasuora ja suunnattu vasemmalta oikealle (>), ja poikkiakseli on vastaavasti pystysuora ja suunnattu ylhäältä alas (v).
Pää- ja poikkiakselit voidaan vaihtaa, jolloin elementit sijoittuvat ylhäältä alas (v) ja kun ne eivät enää mahdu korkeuteen, ne siirtyvät vasemmalta oikealle (>) - eli akselit vain vaihtoivat paikkoja . Tässä tapauksessa elementtien järjestelyn alku ja loppu eivät muutu - vain suunnat (akselit) muuttuvat! Tästä syystä sinun täytyy kuvitella akselit säiliön sisällä. Ei kuitenkaan pidä ajatella, että on olemassa joitain "fyysisiä" akseleita ja ne vaikuttavat johonkin. Akseli on tässä vain säiliön sisällä olevien elementtien liikesuunta. Jos esimerkiksi määritimme elementtien kohdistuksen pääakselin keskelle ja sitten muutimme tämän pääakselin suuntaa, kohdistus muuttuu: elementit olivat keskellä vaakasuunnassa, mutta muuttuivat keskelle pystysuunnassa... Katso esimerkki.
Yksi vielä tärkeä ominaisuus Flex box on rivien läsnäolo poikittaissuunnassa. Kuvitellaksesi ja ymmärtääksemme niitä, kuvitellaan: on vaakasuuntainen pääakseli, elementtejä on monia eivätkä ne "mahdu" säiliöön, joten ne siirtyvät toiselle riville. Nuo. säiliö näyttää tältä: säiliö, jonka sisällä on kaksi riviä, joista jokainen sisältää useita elementtejä. Otettu käyttöön? Muista nyt, että voimme kohdistaa paitsi elementtejä myös rivejä! Kuinka tämä toimii, näkyy selvästi kiinteistön esimerkissä. Ja tältä se näyttää kaavamaisesti:
CSS-ominaisuudet, jotka voivat vaikuttaa asettelumalliin: float , clear , vertical-align , sarakkeet eivät toimi joustavassa suunnittelussa - ne käyttävät eri asettelumallia ja nämä CSS-ominaisuudet jätetään huomiotta...
Flexbox CSS -ominaisuudet
Flexbox sisältää erilaisia css-säännöt hallita koko flex-suunnittelua. Jotkut on lisättävä pääsäiliöön ja toiset tämän säilön elementteihin.
Säiliöön
näyttö:Ottaa käyttöön elementin flex-ominaisuuden. Tämä ominaisuus kattaa itse elementin ja sen sisäkkäiset elementit: se vaikuttaa vain ensimmäisen tason jälkeläisiin - niistä tulee flex-säiliön elementtejä.
- flex- elementti venyttää koko leveytensä ja sillä on täysi tila ympäröivien lohkojen joukossa. Rivinvaihto tapahtuu lohkon alussa ja lopussa.
- inline-flex- elementti on kääritty muiden elementtien ympärille. Tässä tapauksessa sen sisäosa muotoillaan lohkoelementiksi ja itse elementti on muotoiltu inline-muotoon.
flex ja inline-flex eroavat toisistaan siinä, että ne toimivat eri tavalla ympäröivien elementtien kanssa, kuten display:block ja display:inline-block .
flex-suunta:Muuttaa säiliön pääakselin suuntaa. Poikittaisakseli muuttuu vastaavasti.
- rivi (oletus)- elementtien suunta vasemmalta oikealle (>)
- sarakkeessa- elementtien suunta ylhäältä alas (v)
- rivi-käänteinen- elementtien suunta oikealta vasemmalle (<)
- sarake-käänteinen- elementtien suunta alhaalta ylös (^)
Ohjaa sellaisten elementtien siirtoa, jotka eivät mahdu säiliöön.
- nowrap (oletus)- sisäkkäiset elementit sijoitetaan yhdelle riville (suunta=rivi) tai yhteen sarakkeeseen (suunta=sarake) riippumatta siitä mahtuvatko ne säiliöön vai eivät.
- kääri- sisältää siirrettävät elementit seuraavalle riville, jos ne eivät mahdu säiliöön. Tämä mahdollistaa elementtien liikkeen poikittaisakselia pitkin.
- kääri-käänteinen- sama kuin kääre, vain siirto ei tapahdu alas, vaan ylöspäin (vastakkaiseen suuntaan).
Yhdistää molemmat flex-ominaisuudet-suunta ja flex-wrap . Niitä käytetään usein yhdessä, joten flex-flow-ominaisuus luotiin kirjoittamaan vähemmän koodia.
flex-flow hyväksyy näiden kahden ominaisuuden arvot välilyönnillä erotettuna. Tai voit määrittää yksittäisen arvon mille tahansa ominaisuudelle.
/* vain flex-direction */ flex-flow: rivi; flex-flow: rivi-käänteinen; flex-flow: pylväs; flex-flow: pylväs-käänteinen; /* vain flex-wrap */ flex-flow: nowrap; flex-flow: kääri; flex-flow: wrap-reverse; /* molemmat arvot kerralla: flex-direction ja flex-wrap */ flex-flow: rivi nowrap; flex-flow: pylväskääre; flex-flow: pylväs-käänteinen kääri-käänteinen; perustele-sisältö:
Tasaa elementit pääakselia pitkin: jos suunta=rivi, niin vaakasuoraan ja jos suunta=sarake, niin pystysuunnassa.
- flex-start (oletus)- elementit menevät alusta (lopussa voi olla tilaa jäljellä).
- joustava pää- elementit kohdistetaan loppuun (välilyönti jää alkuun)
- keskusta- keskellä (vasemmalle ja oikealle jää tilaa)
- välilyönti- uloimmat elementit painetaan reunoja vasten (elementtien välinen tila jakautuu tasaisesti)
- tilaa ympärillä- vapaa tila jakautuu tasaisesti elementtien välillä (uloimpia elementtejä ei paineta reunoja vasten). Säiliön reunan ja ulkoelementtien välinen tila on puolet rivin keskellä olevien elementtien välisestä tilasta.
- tilaa tasaisesti
Tasaa elementtejä sisältävät rivit poikittaisakselilla. Sama kuin tasaussisältö vain vastakkaiselle akselille.
Nuo. jos flex-direction: rivi , tämä ominaisuus tasaa näkymätön rivit pystysuunnassa (¦). Tässä on tärkeää huomata, että lohkon korkeus on asetettava jäykästi ja sen on oltava suurempi kuin rivien korkeus, muuten rivit itse venyttävät konttia ja niiden kohdistus muuttuu merkityksettömäksi, koska välissä ei ole vapaata tilaa. Mutta kun flex-direction: sarake , niin rivit liikkuvat vaakasuunnassa (>) ja säilön leveys on lähes aina suurempi kuin rivien leveys ja rivien kohdistaminen on heti järkevää...
Tätä ominaisuutta tarvitaan harvoin, ja sitä käyttävät useammin tasauskohteet (katso alla).
- venyttää (oletus)- rivit venyvät täyttääkseen rivin kokonaan
- flex-start- rivit on ryhmitelty säiliön yläosaan (päähän voi jäädä tilaa).
- joustava pää- rivit on ryhmitelty säiliön pohjalle (alkuun jää tilaa)
- keskusta- rivit ryhmitellään säiliön keskelle (reunoihin jää tilaa)
- välilyönti- ulommat rivit painetaan reunoja vasten (rivien välinen tila jakautuu tasaisesti)
- tilaa ympärillä- vapaa tila jakautuu tasaisesti rivien välillä (uloimpia elementtejä ei paineta reunoja vasten). Säiliön reunan ja ulkoelementtien välinen tila on puolet rivin keskellä olevien elementtien välisestä tilasta.
- tilaa tasaisesti- sama kuin space-around, vain ulompien elementtien etäisyys säiliön reunoista on sama kuin elementtien välillä.
Tasaa elementit poikittaisakselia pitkin rivin sisällä (näkymätön rivi). Nuo. Itse rivit on tasattu align-content -toiminnolla, ja näiden rivien (rivien) elementit tasataan tasauskohteiden avulla ja kaikkialla poikittaisakselilla. Tällaista jakoa pääakselilla ei ole, rivien käsitettä ei ole ja elementit tasataan tasaussisällön kautta.
- venyttää (oletus)- elementtejä venytetään täyttämään viiva kokonaan
- flex-start- elementit painetaan rivin alkuun
- joustava pää- elementit painetaan rivin loppuun
- keskusta- elementit on kohdistettu rivin keskelle
- perusviiva- elementit tasataan tekstin perusviivaan
Säiliöelementeille
flex-grow:Asettaa elementin suurennuskertoimen, kun säiliössä on vapaata tilaa. Oletus flex-grow: 0 so. mikään elementeistä ei saa kasvaa ja täyttää säiliössä olevaa vapaata tilaa.
Joustokasvun oletusarvo: 0
- Jos määrität flex-grow: 1 kaikille elementeille, ne kaikki venyvät tasaisesti ja täyttävät koko säiliön vapaan tilan.
- Jos määrität jollekin elementille flex-grow: 1, se täyttää koko säilön vapaan tilan ja tasaussisällön kautta tehdyt tasaukset eivät enää toimi: ei ole vapaata tilaa, ei mitään tasattavaa...
- Jos yhdellä niistä on flex-grow:2, se on 2 kertaa suurempi kuin kaikki muut
- Jos kaikissa flex-säiliön sisällä olevissa flex-laatikoissa on flex-grow:3, ne ovat samankokoisia
- Jos yhdellä niistä on flex-grow:12, se on 4 kertaa suurempi kuin kaikki muut
Kuinka se toimii? Oletetaan, että säilö on 500 kuvapistettä leveä ja sisältää kaksi elementtiä, joista kummankin pohjaleveys on 100 kuvapistettä. Tämä tarkoittaa, että säiliössä on 300 vapaata pikseliä jäljellä. Jos nyt määritetään flex-grow: 2; , ja toinen flex-grow: 1; , lohkot täyttävät säilön koko käytettävissä olevan leveyden ja ensimmäisen lohkon leveys on 300 kuvapistettä ja toisen 200 kuvapistettä. Tämä selittyy sillä, että säiliössä käytettävissä oleva 300px vapaata tilaa jaettiin elementtien kesken suhteessa 2:1, +200px ensimmäiselle ja +100px toiselle.
Huomautus: voit määrittää arvoon murtolukuja, esimerkiksi: 0,5 - flex-grow:0,5
joustokutistuva:Asettaa elementin vähennyskertoimen. Ominaisuus on flex-grown vastakohta ja määrittää kuinka elementin tulee kutistua, jos säiliössä ei ole vapaata tilaa. Nuo. ominaisuus alkaa toimia, kun kaikkien elementtien kokojen summa on suurempi kuin säiliön koko.
Oletusjoustokutistuminen:1
Oletetaan, että säilö on 600 pikseliä leveä ja sisältää kaksi elementtiä, kukin 300 kuvapistettä leveä - flex-basis: 300px; . Nuo. kaksi elementtiä täyttävät säiliön kokonaan. Anna ensimmäiselle elementille flex-shrink: 2; , ja toinen joustokutiste: 1; . Pienennetään nyt säiliön leveyttä 300px, ts. elementtien tulee kutistua 300 pikseliä mahtuakseen säiliöön. Ne kutistuvat suhteessa 2:1, ts. ensimmäinen lohko pienenee 200 pikseliä ja toinen 100 pikseliä ja uusista elementtikooista tulee 100 pikseliä ja 200 pikseliä.
Huomautus: voit määrittää arvoon murtolukuja, esimerkiksi: 0,5 - flex-shrink:0,5
flex-pohjainen:Asettaa elementin pohjaleveyden - leveyden ennen kuin muut elementin leveyteen vaikuttavat olosuhteet lasketaan. Arvo voidaan määrittää px, %, em, rem jne. Lopullinen leveys riippuu pohjan leveydestä ja flex-grow-, flex-shrink-arvoista ja lohkon sisällöstä. Automaattitilassa elementti saa pohjaleveyden suhteessa sen sisällä olevaan sisältöön.
Oletus: auto
Joskus voi olla hyödyllistä asettaa elementin leveys tiukasti tutun leveysominaisuuden kautta. Esimerkiksi leveys: 50%; tarkoittaa, että säiliön sisällä oleva elementti on tasan 50 %, mutta flex-grow- ja flex-shrink-ominaisuudet toimivat silti. Tämä voi olla tarpeen, kun elementtiä venyttää sen sisällä oleva sisältö enemmän kuin flex-basisissa on määritelty... Esimerkki.
flex-basis on "jäykkä", jos määrität nolla venytystä ja kutistumista: flex-basis:200px; flex-grow:0; flex-shrink:0; - lyhyesti voit kirjoittaa sen näin: flex:0 0 200px; .
flex: (kasvukutistumisperuste)Lyhyt sisääntulo kolme ominaisuutta: flex-grow flex-shrink flex-basis .
Oletus: flex: 0 1 auto
Voit kuitenkin määrittää yhden tai kaksi arvoa:
Flex: ei mitään; /* 0 0 auto */ /* numero */ flex: 2; /* flex-grow (flex-basis menee 0:aan) */ /* ei numero */ flex: 10em; /* flex-basis: 10em */ flex: 30px; /* flex-basis: 30px */ flex: auto; /* flex-basis: auto */ flex: content; /* flex-basis: sisältö */ flex: 1 30px; /* flex-grow ja flex-basis */ flex: 2 2; /* flex-grow ja flex-shrink (flex-basis menee arvoon 0) */ flex: 2 2 10%; /* flex-grow ja flex-shrink and flex-basis */ align-self:
Voit muuttaa align-items -ominaisuutta vain yhdelle elementille.
Oletus: kohdista kohteet -säiliöstä
- venyttää- elementtiä venytetään täyttämään viiva kokonaan
- flex-start- elementti painetaan rivin alkuun
- joustava pää- elementti painetaan rivin loppuun
- keskusta- elementti on kohdistettu viivan keskelle
perusviiva- elementti on tasattu tekstin perusviivaan
Voit muuttaa elementin järjestystä (sijaintia, sijaintia) yleisellä rivillä.
Oletus: järjestys: 0
Oletuksena elementtien järjestys on 0 ja ne sijoitetaan HTML-koodissa esiintymisjärjestykseen ja rivin suuntaan. Mutta jos muutat järjestysominaisuuden arvoa, elementit järjestetään arvojen järjestykseen: -1 0 1 2 3 ... . Jos esimerkiksi määrität järjestyksen: 1 jollekin elementille, kaikki nollat menevät ensin ja sitten elementti, jossa on 1.
Näin voit esimerkiksi siirtää ensimmäisen elementin loppuun muuttamatta jäljellä olevien elementtien tai HTML-koodin liikesuuntaa.
Huomautuksia
Mitä eroa on joustavalla pohjalla ja leveydellä?
Alla on tärkeät erot joustavan pohjan ja leveyden/korkeuden välillä:
- Flex-ominaisuutta käytettäessä 3 arvoa (flex-grow/flex-shrink/flex-basis) voidaan yhdistää ja kirjoittaa lyhyesti, mutta leveyskasvua tai kutistumista varten on kirjoitettava erikseen. Esimerkiksi: flex:0 0 50% == leveys:50%; flex-shrink:0; . Joskus se on vain epämukavaa.
flex-basis toimii vain pääakselilla. Tämä tarkoittaa, että flex-direction:row flex-basis ohjaa leveyttä ja flex-direction:column korkeutta. .
flex-basis koskee vain flex-elementtejä. Tämä tarkoittaa, että jos poistat säilön flexin käytöstä, tällä ominaisuudella ei ole vaikutusta.
Absoluuttiset säiliöelementit eivät osallistu flex-rakenteeseen... Tämä tarkoittaa, että flex-basis ei vaikuta säiliön flex-elementteihin, jos ne ovat absoluuttinen position:absolute . Niiden on määritettävä leveys/korkeus.
Jos mahdollista, suosi silti flex-pohjaista. Käytä leveyttä vain silloin, kun joustava pohja ei ole sopiva.
Ero joustavan pohjan ja leveyden välillä - vika vai ominaisuus?
Joustoelementin sisällä oleva sisältö laajentaa sitä eikä voi ulottua sen ulkopuolelle, ellei elementin leveyttä ole asetettu leveyden tai enimmäisleveyden avulla. flex-basis ei selviä täällä... Katso esimerkki:
Flex-asetteluesimerkkejä
Missään esimerkeissä ei käytetä etuliitteitä selainten väliseen yhteensopivuuteen. Tein tämän helpottaakseni css:n lukemista. Siksi sinun on tarkasteltava enemmän tai vähemmän tuoreita esimerkkejä kromi versiot tai firefox.
#1 Yksinkertainen esimerkki pysty- ja vaakasuuntauksesta
Aloitetaan yksinkertaisimmalla esimerkillä - pysty- ja vaakasuora kohdistus samanaikaisesti ja millä tahansa lohkon korkeudella, myös kumilla.
Tai näin, ilman lohkoa sisällä:
#1.2 Erotus (tauko) joustolohkoelementtien välillä
Sinun on käytettävä säilön elementtien järjestämistä reunoja pitkin ja satunnaisesti valita elementti, jonka jälkeen tulee tauko marginaali omaisuutta arvolla auto .
#2 Mukautuva valikko flexissä
Luodaan valikko sivun yläosaan. Laajanäytössä sen pitäisi olla oikealla. Keskimäärin kohdistaa keskelle. Ja pienessä jokaisen elementin on oltava uudella rivillä.
#3 Mukautuva 3 saraketta
Tämä esimerkki näyttää, kuinka nopeasti ja kätevästi tehdään 3 saraketta, jotka kavennettaessa muuttuvat 2:ksi ja sitten 1:ksi.
Huomaa, että tämä voidaan tehdä ilman mediasääntöjä, kaikki on joustavaa.
Siirry osoitteeseen jsfiddle.net ja muuta "tulos"-osion leveyttä
#4 Mukautuvat lohkot joustavalla
Oletetaan, että meidän on tulostettava 3 lohkoa, yksi suuri ja kaksi pientä. Samalla on välttämätöntä, että lohkot mukautuvat pieniin näyttöihin. Me teemme:
Siirry osoitteeseen jsfiddle.net ja muuta "tulos"-osion leveyttä
#5 Galleria joustavalla ja siirtymällä
Tämä esimerkki osoittaa, kuinka nopeasti voit tehdä söpön haitarin kuvilla käyttämällä flexiä. Kiinnitä huomiota flexin siirtymäominaisuuteen.
#6 Flex to Flex (vain esimerkki)
Tehtävänä on tehdä joustava lohko. Niin, että jokaisen lohkon tekstin alku on samalla rivillä vaakasuunnassa. Nuo. Leveyden kaventuessa lohkojen korkeus kasvaa. On välttämätöntä, että kuva on ylhäällä, painike on aina alhaalla ja teksti keskellä alkaa yhtä vaakaviivaa pitkin...
Tämän ongelman ratkaisemiseksi itse lohkot venytetään joustavalla ja asetetaan suurimmalle mahdolliselle leveydelle. Joka sisäyksikkö on myös taipuisa rakenne, jossa on kierretty akseli flex-direction:colum; ja keskellä oleva elementti (missä teksti on) on venytetty flex-grow:1; täyttääksesi kaiken vapaan tilan, näin tulos saavutetaan - teksti alkoi yhdellä rivillä...
Lisää esimerkkejä
Selaimen tuki - 97 %
Täyttä tukea ei tietenkään ole, mutta kaikki nykyaikaiset selaimet tukee flexbox-malleja. Jotkut vaativat edelleen etuliitteitä. Katsotaanpa todellista kuvaa osoitteessa caniuse.com ja todetaan, että 96 % nykyisin käytetyistä selaimista toimii ilman etuliitteitä ja 97 % etuliitteiden kanssa – ja tämä on erinomainen osoitus flexboxin täysimääräisestä käytöstä.
Jotta tiedän, mitkä etuliitteet ovat olennaisia tänään (helmikuu 2017), annan esimerkin kaikista joustosäännöistä tarvittavilla etuliitteillä:
/* Säiliö */ .flex ( näyttö: -webkit-box; näyttö: -webkit-flex; näyttö: -ms-flexbox; näyttö: flex; näyttö: -webkit-inline-box; näyttö: -webkit-inline-flex ; sarake wrap -webkit-box-sisältö: välilyönti - sisältö; -around; 1; -ms-flex-positiivinen: 1; joustava-kutistuva: 2; -webkit-flex-basis: 100px; -ms-flex-preferred-size: 100px; flex-basis: 100px; -webkit-box-flex: 1; -webkit-flex: 1 2 100px; -ms-flex: 1 2 100 pikseliä; flex: 1 2 100 pikseliä; -webkit-align-self: center; -ms-flex-item-align: center; kohdista itse: keskellä; -webkit-box-järjestysryhmä: 3; -webkit-järjestys: 2; -ms-flex-järjestys: 2; järjestys: 2; )
On parempi, jos ominaisuudet, joissa on etuliitteet, menevät alkuperäisen ominaisuuden edelle.
Tässä luettelossa ei ole etuliitteitä, joita ei tarvita tänään (caniusen mukaan). Yleensä etuliitteitä on enemmän.
| Kromi | Safari | Firefox | Ooppera | I.E. | Android | iOS |
|---|---|---|---|---|---|---|
| 20- (vanha) | 3.1+ (vanha) | 2-21 (vanha) | 10 (tweener) | 2.1+ (vanha) | 3.2+ (vanha) | |
| 21+ (uusi) | 6.1+ (uusi) | 22+ (uusi) | 12.1+ (uusi) | 11+ (uusi) | 4.4+ (uusi) | 7.1+ (uusi) |
- (uusi) - uusi syntaksi: näyttö: flex; .
- (tweener) - vanha epävirallinen syntaksi vuodelta 2011: näyttö: flexbox; .
- (vanha) - vanha syntaksi vuodelta 2009: näyttö: laatikko;
Video
No, älä unohda videota, joskus se on myös mielenkiintoinen ja ymmärrettävä. Tässä on pari suosittua:
Hyödyllisiä linkkejä Flexissä
flexboxfroggy.com - flexbox koulutuspeli.
Flexplorer on visuaalinen joustava koodinrakennus.
Miksi Flexbox?
Pitkään aikaan ainoat luotettavat selainyhteensopivat työkalut CSS-asettelujen luomiseen olivat esimerkiksi kellukkeet ja paikannus . Nämä ovat hyviä ja toimivat, mutta tietyllä tavalla ne ovat myös melko rajoittavia ja turhauttavia.
Seuraavia yksinkertaisia asetteluvaatimuksia on joko vaikea tai mahdoton saavuttaa tällaisilla työkaluilla millä tahansa kätevällä ja joustavalla tavalla:
- Keskittää sisältölohkon pystysuoraan sen ylätason sisään.
- Kaikkien säiliön lapsien tekeminen vievät yhtä paljon käytettävissä olevaa leveyttä/korkeutta riippumatta siitä, kuinka paljon leveyttä/korkeutta on käytettävissä.
- Kun usean sarakkeen asettelun kaikki sarakkeet ottavat saman korkeuden, vaikka ne sisältävät eri määrän sisältöä.
Kuten seuraavissa osissa huomaat, flexbox helpottaa monia asettelutehtäviä. Otetaanpa sisään!
Esittelyssä yksinkertainen esimerkki
Tässä artikkelissa aiomme saada sinut työskentelemään läpi sarjan harjoituksia, jotka auttavat sinua ymmärtämään, miten flexbox toimii. Aloittaaksesi sinun tulee tehdä paikallinen kopio ensimmäisestä aloitustiedostosta - flexbox0.html github-repostamme - ladata se nykyaikaiseen selaimeen (kuten Firefox tai Chrome) ja katsoa koodia koodieditorissasi. Voit myös.
Flex-suunta: pylväs;
Näet, että tämä asettaa kohteet takaisin sarakeasetteluun, aivan kuten ne olivat ennen CSS:n lisäämistä. Ennen kuin jatkat, poista tämä ilmoitus esimerkistäsi.
Huomautus: Voit myös asettaa joustavia kohteita päinvastaiseen suuntaan käyttämällä rivi-käänteis- ja sarake-käänte-arvoja. Kokeile myös näitä arvoja!
Kääriminen
Yksi ongelma, joka ilmenee, kun asettelussasi on kiinteä leveys tai korkeus, on se, että lopulta flexbox-lapsesi vuotavat säiliönsä yli, mikä rikkoo asettelun. Katso esimerkkiä flexbox-wrap0.html ja yritä katsella sitä livenä (ota paikallinen kopio tästä tiedostosta nyt, jos haluat seurata tätä esimerkkiä):
Tässä näemme, että lapset todellakin murtautuvat ulos säiliöstään. Yksi tapa korjata tämä on lisätä seuraava ilmoitus elementille, joka edustaa itsenäistä osaa - jolla ei ole tarkempaa semanttista elementtiä sen esittämiseksi html-dokumentissa.>
Flex-wrap: kääre; flex: 200px;
Kokeile tätä nyt; huomaat, että asettelu näyttää paljon paremmalta tämän mukana:
Meillä on nyt useita rivejä – jokaiselle riville sovitetaan niin monta flexbox-lapsia kuin on järkevää, ja kaikki ylivuoto siirretään alas seuraavalle riville. Artikkeleille asetettu flex: 200px -ilmoitus tarkoittaa, että jokainen on vähintään 200 kuvapistettä leveä; Käsittelemme tätä ominaisuutta tarkemmin myöhemmin. Saatat myös huomata, että viimeisen rivin viimeiset lapset on tehty leveämmiksi, jotta koko rivi on edelleen täynnä.
Mutta voimme tehdä tässä muutakin. Kokeile ensin muuttaa flex-direction-ominaisuuden arvo rivin käänteiseksi – nyt näet, että sinulla on edelleen useiden rivien asettelu, mutta se alkaa rivin vastakkaisesta kulmasta. selainikkuna ja kulkee päinvastoin.
flex-flow pikakirjoitus
Tässä vaiheessa on syytä huomata, että on olemassa lyhenne sanoista flex-direction ja flex-wrap - flex-flow. Joten voit esimerkiksi vaihtaa
Flex-suunta: rivi; flex-wrap: kääri;
Flex-flow: rivien rivitys;
Joustava flex-tuotteiden koko
Palataan nyt ensimmäiseen esimerkkiimme ja katsotaan, kuinka voimme hallita sitä, kuinka paljon tilaa flex-kohteita vievät. Käynnistä paikallinen kopio flexbox0.html -tiedostosta tai ota kopio flexbox1.html:stä uudeksi aloituspisteeksi (katso se). elää).
Lisää ensin seuraava sääntö CSS:n alaosaan:
Artikkeli (flex: 1; )
Tämä on yksikkötön suhteellinen arvo, joka määrää, kuinka suuren osan pääakselilla olevasta vapaasta tilasta kukin taipuisa kohde vie. Tässä tapauksessa annamme jokaiselle element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}
Lisää nyt seuraava sääntö edellisen alle:
Artikkeli:nth-of-type(3) ( flex: 2; )
Osa - artikkeli artikkeli artikkeli - div - painike div-painike div-painike painike
Katsotaanpa koodia, jota olemme käyttäneet asettelussa.
Yhteenveto
Tähän päättyy kiertueemme flexboxin perusteista. Toivomme, että sinulla oli hauskaa, ja sinulla on hyvä leikkiä sen kanssa, kun matkustat eteenpäin oppiessasi. Seuraavaksi tarkastelemme toista tärkeää CSS-asettelujen näkökohtaa - CSS-ruudukot.
