Kuidas luua reageerivat CSS-ruudustiku paigutust. Miks on CSS Grid parem kui Bootstrapi raamistik?

Autorilt: artikkel sarja kontseptsioonist CSS Grid layout. Eelmistes tundides õppisime ruudustiku süntaksit, õppisime mitmeid viise, kuidas lehel elemente järjestada ja jätsime mõne vana harjumusega hüvasti. Selles õpetuses rakendame kõik oma teadmised tundliku paigutuse loomiseks praktikas.

Meedia päringud

Võtame eelmise õppetunni demo.

Leht koosneb kahest ruudustikust: põhiruudustikust ja ühest, mis asub ühe elemendi sees. Me saame oma võrgusilma juhtida meediumipäringute abil. See tähendab, et saame paigutuse täielikult ümber ehitada, et see sobiks erinevatele ekraanilaiustele.

Alustuseks kopeerime esimese ruudustiku deklaratsiooni. Mähime duplikaadi meediumipäringuks, kasutades selleks mobiili-first tehnikat. Võtsin meelevaldselt üleminekupunktiks 500 pikslit.

Grid-1 ( /* ruudustiku stiilid */ ) ainult @meedia ekraan ja (min-laius: 500 pikslit) ( .grid-1 ( /* ruudustiku stiilid */ ) )

Nüüd muudame esimeses reklaamis oma ruudustikku, et panna kõik ühte veergu. Määrasime ühe veeru, kasutades atribuuti grid-template-columns. Veenduge, et meie neli rida oleks seatud atribuudiga grid-template-reas ja sobitage paigutus atribuudiga grid-template-areas:

Ruudustik-1 (kuva: ruudustik; laius: 100%; veeris: 0 automaatne; ruudustik-mall-veerud: 1fr; ruudustiku malli-read: 80 pikslit automaatne 80 pikslit; ruudustiku vahe: 10 pikslit; ruudustiku malli alad: " päis" "peamine" "külgriba" "jalus"; )

Ruudustik – 1 (

ekraan: grid;

laius: 100%;

marginaal: 0 auto;

ruudustik - mall - veerud : 1fr ;

grid-template-rows: 80px auto auto 80px;

ruudustiku vahe: 10 pikslit;

ruudustik - mall - alad : "päis"

"peamine"

"külgriba"

"jalus";

Väikestele ekraanidele mahutamiseks määrasime ruudustiku vahe vaikimisi 10 pikslit. See on see, mida me saime. Samuti peaksite märkama, et me muutume polstri omadused ja fondi suurus .grid-1 div elementides, kasutades meediumipäringuid.

Meie pesastatud ruudustik

Ülaltoodud kood muudab meie peamist paigutust. Siiski on meil endiselt pesastatud ruudustik, mis keeldub kangekaelselt oma kahest veerust lahti saamast ühelgi ekraanil. Selle parandamiseks teeme täpselt sama asja, kuid võtame teise üleminekupunkti, kasutades meetodit sisu-kõigepealt.

Item-2 ( /* ruudustiku stiilid */ ) ainult @meedia ekraan ja (min-laius: 600 pikslit) ( .item-2 ( /* ruudustiku stiilid */ ) )

Kui teeksime demo automaatse täitmisega uuesti ja muudaksime veeru laiuseks minmax(9em, 1fr), prooviks ruudustik mahutada võimalikult palju 9em laiuseid radu ja seejärel laiendada neid 1fr-ni, kuni kogu konteiner on täis:

Puudus: ruudustik arvutab rajad ümber ainult pärast taaskäivitamist, mitte siis, kui akna laius muutub. Proovige oma brauseriakent kitsendada ja lehte värskendada. Väärtuste muutmiseks saate ühendada meediumipäringuid, kuid need ei tööta hästi brauseriakna laiuse muutmisega.

Järeldus

Võtame kõik ülaltoodu kokku loendis:

Meediapäringud võimaldavad meil ruudustiku täielikult ümber ehitada, muutes erinevate stsenaariumide jaoks atribuuti grid-template-areas (ja muud).

ülemineku omadus ei mõjuta ruudustiku paigutust kuidagi.

Sobib hästi võrkkonteinerite täitmiseks märksõna automaatne täitmine

Funktsioon minmax() on suurepärane täiendus automaatsele täitmisele, kuid see ei anna meile tõelist kohanemisvõimet.

Nüüd olete valmis võrkudega töötama! Olge kursis, et saada rohkem CSS-võrgustiku artikleid, praktilisi harjutusi ja lahendusi tavalistele võrguprobleemidele.

Eriti saidi kasutajatele pakume praktilist õppetundi 960 Grid süsteemi kasutamise kohta. Kujutage ette, et meile anti kujunduse kujundus. Esiteks peame visandama saidi struktuuri rakendamise plaani ja alles seejärel jätkama otse koodiga. Pärast selle artikli uurimist saate hakkama mis tahes klassikalise paigutusega niipea kui võimalik ja loomulik juuksevärv paljudeks aastateks (ilma hallide juusteta). Nii et siin on meie disain:

1. Loo võrk

Nagu te juba teate, kasutab 960 Gridi süsteem tervet rida klasse ja on saadaval mitmes variandis (12 veeru ja 16 veeruga versioonid). Põhikonteiner on olenemata veergude arvust alati 960 pikslit lai. Selle kujunduse jaoks valime 12 veeru süsteemi. Iga ploki 960 Grid süsteemis on väline veeris 0 10 pikslit. See tagab meile ühtlase 20 piksli proportsionaalse polsterduse. Neile, keda 960 piksli suurus segadusse ajab, soovitan vaadata seda diagrammi. See suurus on optimaalne enamiku monitoride eraldusvõime jaoks. Seega on meil võimalus luua sellise laiusega plokke:

  • 140 pikslit
  • 220 pikslit
  • 300 pikslit
  • 380 pikslit
  • 460 pikslit
  • 540 pikslit
  • 620 pikslit
  • 700 pikslit
  • 780 pikslit
  • 860 pikslit
  • 940 pikslit

Igal suurusel on oma klass, mille nimi põhineb grid_X skeemil, kus X on veergude arv. Kui vajate 960px plokki, peaksite valima klassi grid_12. Süsteemi 960 Grid aktiveerimiseks tuleb määrata vanemkonteiner klassi konteineriks_12 või konteineriks 16. Allpool on väike näide 3-st plokist koosnevast lehest. Esimese laius võrdub 960 piksli laiusega, ülejäänud 2 on poole suuremad:

Pidage meeles, et kui täidate rea plokkidega klassiga grid_X, veenduge, et nende kogusumma ei oleks rohkem kui 12. Näiteks nagu meil - kaks plokki grid_6 + grid_6 = 12. Vähem on võimalik: 6, 4 , 2 jne d. Nüüd, kui oleme põhiprintsiibid üle käinud, võime alustada praktilist harjutust:

2. Loo makett

Proovime koostada diagrammi selle kohta, mida me peame koostama. Esiteks vajame kahte plokki 960 pikslit. Üks logo jaoks, teine ​​navigeerimiseks. Järgmiseks on 2 plokki (ühel real), plakati ja veebisaidi esitluse jaoks, eraldusplokk (täislaius), 4 veergu (ühel real), jälle eraldusplokk ja jalus. Midagi sellist:

Arvan, et pärast pildi nägemist teate juba, milliseid klasse me vajame. Proovige neid ise ja seejärel vaadake allolevat koodi, et näha, kas mõtlete õigesti.

Pidage meeles, et iga rea ​​lõpus peame sisestama

tavakuvamiseks kõigis brauserites. Ärge unustage lisada oma lehele päise jaotisesse ka 960 Grid CSS-i.

Niisiis, skelett on valmis, seega on aeg hakata kaunistama. Seadke kõrgus ja taustavärv plokkide eraldajad. Menüüploki kõrgus sõltub menüüst endast. Ärge unustage lisada ka oma logo:

Div.spacer ( taustavärv: #8FC73E; kõrgus: 1 em; ) div#navbar ( taustavärv: #8FC73E; polster: 10px 0; )

See on see, mida me peaksime saama:

Meid ei huvita praegu üldse teave, nii et saate siit sisu keskmistesse veergudesse sisestada sellel lehel. Enne alustamist ülemine osa, hoolitseme alumise eest. Meie kujunduses on jaluse taust värviline hall. Sees hetkel me ei saa seda rakendada, sest kui mäletate, on plokkide vahel taane, mis ei võimalda meil seda ala täielikult üle värvida. Selle probleemi lahendamiseks teisaldame 3 jalusega seotud plokki eraldi plokkideks id = jalus. Veel üks detail: kui kasutame klasside sees klasse, oleks hea määrata alfa väärtused (selleks, et näidata, milline plokk on esimene ja oomega - viimane):

Div#footer ( taustavärv: #e5e5e6; )

Täiuslik! Meie jalusel on nüüd taustavärv. Lisage sellele teksti ja liigume edasi navigeerimisploki juurde. Kõigi seaduste järgi kaasaegsed põhimõtted paigutus, navigeerimine on nummerdamata nimekiri. Lisage järgmine kood ja stiil:

  • Artiklid
  • Teemad
  • Umbes
  • Toimetajad
  • Võtke ühendust

Div#navbar ul ( loendi stiil: puudub; kuva: blokk; veeris: 0 10 pikslit; ) div#navbar ul li ( hõljumine: vasak; veeris: 0 1,5 em; font: paks 1em Arial; )

Lahe! Meil läheb kõik hästi. Alles on jäänud vaid plokk plakati ja saidi esitlusega, kuid enne kui hakkame neid juurutama, tahaksin öelda paar sõna CSS-i raamistike kohta üldiselt.

3. CSS-i raamistikud ei lahenda kõiki teie probleeme

Enne kui hakkate oma disaini CSS-raamistikku kasutades paika panema, peaksite arvestama nende süsteemide mõningate puudustega. Seda artiklit lugedes ei saanud märkamata jätta, et lehe loomise reeglid on väga ranged. Igal asjal on oma fikseeritud suurus. Kui muudate ühe ploki laiust, peate muutma ka teisi. Igal juhul tuleb midagi ohverdada. Näiteks mida teete, kui teil on 1000 piksli kujundus ja 960 ruudustik võimaldab teil luua maksimaalse laiuse 960 pikslit... Ja soovite 1000 pikslit! Ilma ulatusliku koodimuutuseta on seda võimatu rakendada. Näiteks soovis klient laiemat saiti või disainer ei nõustu teie rakendusega. Kõlarite kõrgusega on veel üks probleem. Kui kolmel veerul on sama taustavärv (nagu meie jalus), peavad need veerud olema sama kõrgusega. Teine oluline puudus: kasutamine täiendav polsterdus ja raamide loomine viib kogu paigutuse hävitamiseni. Selleks, et lisada vajalikku ja mitte midagi hävitada, tuleb kompenseerida lisandunud mõõtmed. Nüüd ma näitan teile, kuidas. Alustame ülemise osa viimistlemist.

4. Ülemine osa

Esmalt lahendame probleemi veeru kõrgusega – teeme selle fikseeritud. Järgmisena loome ühte ja teise plokki tühjad divid. Need sisaldavad joonist või tekstiteave. Me ei määra sisemisi polsterdusi, sest... saate ruudustiku laiuse proportsiooni häirida. Loome p-märgendite jaoks väikese välimise taande, et tekst näeks kena välja.

IN antud juhul stiili jaoks on parem luua klass, mitte ID, sest peame seda rakendama mitmele plokile. Vajadusel võimaldab see ka kõrgust 2 loendis muuta. Meie tunnid näevad välja sellised:

Div.topSection div ( ääris: pidev 10px #e5e5e6; kõrgus: 280px; ) div.topSection div p ( veeris: 10px; )

Lahe! Vaatame, mis meil on:

Kas olete valmis täitma? Seejärel lisage vasakpoolsesse plokki teksti, kuid ärge üle pingutage, et mitte ületada kõrgust. Tegelikult peab disainer reaalsetes projektides selle kõik välja arvutama (märkide arv, mis vastab ploki suurusele); Enne pildi sisestamist õigesse plokki peate otsustama selle mõõtmete üle, kui te pole seda veel teinud. Seda saab teha disaini alguses või FireBugi kaudu. Klõpsake nuppu Kontrolli. Klõpsake div, mida vajame. Valige vahekaart Paigutus. Pärast seda näete kogu vajalikku teavet. Järgmine pilt aitab teid:

Ekraanipildil on plakati mõõtmed 360x280. Leidke pilt ja kujundage see:

Pilt#poster ( laius: 360 pikslit; kõrgus: 280 pikslit; )

See on kõik! Mall on valmis. Nüüd jääb üle vaid see reaalse sisuga täita ja veebi postitada:

5. Teadke oma võimalusi

Nüüd, kui kõik on valmis, teeme kokkuvõtte. 960 Grid võimaldas meil malli neetida 15 minutiga. Lahe? Jah! Kas oleme seda testinud IE6-s, IE7-s? Ei! Kas peaksime? Ei. See on alles algus! Mida nüüd teha? Nüüd peate seda kliendile näitama ja nägema reaktsiooni. Kui ta sellega rahule jääb, siis saame hakata testima, aga kui mitte ja klient tahab midagi keerulisemat, siis peab ta kõik nullist ise kirjutama. Ma kordan seda uuesti. CSS-i raamistikud ei lahenda kõiki probleeme. Sellest hoolimata kasutavad tuhanded arendajad neid tavalise veebiarendustööriistana, sest nagu igal tööriistal, on ka CSS-i raamistikel laialdaseks kasutamiseks oma valdkond. Igal juhul, kui disainisoovid ei ole ülikonkreetsed (80% juhtudest), siis 960 Gridi kasutades saate säästa palju aega - ja aeg on raha!

Tere kõigile! Täna räägime sellest mis on võrgusüsteemid? või lihtsalt paindlikud ruudud adaptiivse paigutusega.

Kõigepealt määratleme, mis see on Võrgusüsteem.

Võrgusüsteem- klassipõhiste stiilide kogum, mis võimaldab kasutajal juhtida lehe paigutust ridade ja veergude süsteemi abil.

Kujutagem ette, et meil on ajaveebileht. See on jagatud 2 veergu: põhiosa vasakul ja külgriba paremal. Proovime luua sellise lehe jaoks paindliku ruudustiku.

Noh, kõigepealt peame tegema midagi põhilist, aga... html märgistused






Siin on plokk, mis sisaldab tervet lehte, see sisaldab blogiga plokki, mis sisaldab 2 plokki: lehe põhiosa ja külgriba.

Nii et kogu meie leht on sellise suurusega 960 pikslit. Kogu ruudustik on jagatud 12 veergu 69 pikslit. iga. Blogi osa tuleb lai 900 pikslit. Lehe põhiosa saab olema 566 pikslit, külgriba - 331 pikslit.

See on see, mida me lõpuks saame

#page (
veeris: 36px auto;
laius: 960 pikslit;
}

Blogi (
veeris: 0 auto 53px;
laius: 900 pikslit;
}

Blog.main (
ujuk: vasak;
laius: 566 pikslit;
}

Blogi .sidebar (
ujuk: paremal;
laius: 331 pikslit;
}

Kõik oleks korras, kuid nagu näete, on see kõik staatiline, täpsustatud pikslites. Soovime, et meie ruudustik muudaks oma suurust olenevalt sellest, millisel ekraanil lehte vaadatakse, seetõttu peame kõik seadma protsenti. Teeme seda.

Selle jaoks on sama valem mis fontide puhul

eesmärk / kontekst = tulemus

Teisendame kogu lehe ploki pikslitest protsentideks.

#page (
veeris: 36px auto;
laius: 90%;
}

90% valitud, kuna sel juhul on ka servade ääres taanded 5% . Siiski saate valida erineva väärtuse.

Kasutame oma valemit: 900 / 960 = 0.9357

Korrutame tulemuse arvuga 100 intresside saamiseks ja me registreerime selle meie css.

Blogi (
veeris: 0 auto 53px;
laius: 93,75%;
}

Sama tuleb teha veergudega, kuid pane tähele, et kontekst on muutunud. Sest veerud on klassiga ploki sees .blogi, siis on see kontekst. Teeme matemaatika.

566 ÷ 900 = 0,628888889

331 ÷ 900 = 0,367777778

Teisendame kõik protsentideks ja kirjutame stiililehele.

Blog.main (
ujuk: vasak;
laius: 62,8888889%;
}

Blogi .sidebar (
ujuk: paremal;
laius: 36,7777778%;
}

See on kõik! Nüüd on meil paindlik ruudustik ja saame seda küljendamiseks kasutada.

Nagu näete, on kõik väga lihtne. Keskmiselt paindlik võrk, nagu paindlik font, on endiselt sama valem, mida meeles pidades, saate hõlpsasti luua tundlikke veebisaite.

Märkus! Nagu näete, läks meil päris hästi pikad väärtused protsenti. Mõned võivad soovitada teil need ümardada, kuid te ei tohiks seda kunagi teha! Pea meeles!

Ja see on minu jaoks kõik, tänan tähelepanu ja eduka adaptiivse paigutuse eest!

Räägime teile, kuidas CSS Grid võimaldab teil luua kvaliteetset reageerivat märgistust ilma kolmanda osapoole raamistikke, nagu Bootstrap, kasutamata.

Natiivne ruudustik pakub raamistike ees mitmeid eeliseid, eriti kui võrrelda neist kõigist populaarseima: Bootstrap. Tänu sellele, et kaasaegne CSS võimaldab luua keerulisi märgistusi, ilma et oleks vaja JavaScripti, kood on puhtam ja hõlpsamini hooldatav.

Märgistus võiks olla lihtsam

Bootstrapi asendamine CSS-võrguga sobib HTML on puhtam. Näiteks võtke arvesse väikest lehe tükki, mille peame küljendama, see näeb välja järgmine:

Bootstrap

Kõigepealt vaatame selle lehe näidiskoodi Bootstrapis.

Tähelepanu tuleb pöörata mõnele asjale:

— Iga rida peaks asuma eraldi jaotises.
- Märgistuse loomiseks peate kasutama klassinimesid (col-xs-2).
— Malli kasvades ja keerukamaks muutudes juhtub sama ka HTML-koodiga.

Kui me räägime reageerimisvõimest, näeb märgistus veelgi halvem välja:

CSS-võrk

Vaatame nüüd sama näidet märgistamise kohta puhtas CSS-is:

Seda märgistust on palju lihtsam lugeda. Klasside segadus on kadunud ja divide arv on vähenenud.

Muidugi, erinevalt näitest, kus Bootstrap on lehel ühendatud, peate siin stiile ise kirjeldama:

Rohkem paindlikkust

Töötame kohanemisvõime kallal. Näiteks eemaldame menüüst MENU ülemine rida Sest mobiiliekraanid. Teisisõnu, muudame seda:

CSS-võrk

CSS-i ruudustiku taastamine on väga lihtne. Kõik, mida pead tegema, on lihtsalt lisada meediapäring ja kirjeldada, mis peaks lehe elementidega juhtuma.

Nii ei pea te lehe ümberkujundamiseks isegi HTML-i avama.

Bootstrap

Kui arendajal on vaja midagi Bootstrapi mallis muuta, peab ta alustama HTML-i enda muutmisest. Tegelikult peate MENÜÜ liigutama nii, et see oleks PÄISE kohal.

Sel juhul lihtsalt stiilide käitumise muutmine meediumipäringus ei toimi. Selle lahendamiseks peate kasutama JavaScripti.

Enam pole 12 veeru piirang

Mitte, et see oleks tõsine piirang, kuid mõnel juhul tekitab see ebamugavusi. Alates Alglaadimisvõrk on põhimõtteliselt jagatud 12 veergu, võib probleeme tekkida näiteks 5, 7 või 9 veergu jagamisel.

CSS Grid võimaldab teil luua reas nii palju veerge kui vaja.

Seda tehakse atribuudi grid-template-columns väärtuse määramisega:

Muide, see kasutab flexboxi, mis teeb ka CSS-i kaudu märgistuse haldamise lihtsaks, kuid hetkel pole see veel isegi beetaversioonist väljas.

Brauseri tugi

Selle kirjutamise seisuga toetab 75% brausereid CSS Gridi.

Miski ei takista paljudel arendajatel praegu CSS Gridi kasutamast, kuid kahjuks pole kõik projektid valmis selle paigutusmeetodiga töötama. Paljud tuntud arendajad, nagu Morten Rand-Eriksen LinkedInist ja Jen Simmons Mozillast, on aga veendunud, et selline lähenemine lehtede loomisele on tulevik: visuaalne esitus tuleks JavaScripti loogikast eraldada ja kohandada sellest sõltumatult.

Danny Markov

Disain on üsna lihtne - see koosneb keskele joondatud konteinerist, mille sees on päis, põhiosa, külgriba ja kelder. Siin on peamised "testid", mida peaksime tegema, hoides CSS-i ja HTML-i võimalikult puhtana:

  1. Asetage paigutuse neli põhiosa.
  2. Muutke leht tundlikuks (väikestel ekraanidel jääb külgriba põhisisu alla).
  3. Joonda päise sisu – vasak navigeerimisnupp, parem nupp.

Nagu näete, jätsime võrdluse huvides kõik võimalikult lihtsaks. Alustame esimese katsega.

Test 1: lehe osade paigutus

Flexbox lahendus

Ekraani lisamine: painutage konteineri külge ja määrake suund lapselemendid vertikaalselt. See asetab kõik sektsioonid üksteise alla.

Konteiner (ekraan: painduv; painduv suund: veerg; )

Nüüd peame veenduma, et põhiosa ja külgriba asuvad üksteise kõrval. Kuna painduvad konteinerid on tavaliselt ühesuunalised, peame lisama lisaelement.

Seejärel seadsime selle elemendi kuva: painde ja paindesuuna vastupidises suunas.

Pea- ja külgriba ümbris (ekraan: painduv; painutussuund: rida; )

Viimane samm on põhisektsiooni ja külgriba mõõtmete määramine. Soovime, et põhisisu oleks kolm korda suurem külgriba laiusest, mida on lihtne teha painde või protsentidega.

Nagu näete, tegi Flexbox kõik hästi, kuid meil oli vaja ka üsna palju CSS-i atribuute pluss täiendavat HTML-elementi. Vaatame, kuidas CSS Grid töötab.

CSS-võrgulahendus

CSS Gridi kasutamiseks on mitu võimalust, kuid me kasutame oma eesmärkide jaoks sobivaimat süntaksit grid-template-areas.

Esmalt määratleme neli ruudustikuala, üks iga lehe jaotise jaoks:

päis ( grid-area: header; ) .main ( grid-area: main; ) .sidebar ( grid-area: sidebar; ) jalus ( grid-area: jalus; )

Nüüd saame seadistada oma võrgu ja määrata iga ala asukoha. Kood võib alguses tunduda üsna keeruline, kuid kui olete ruudustikusüsteemiga tuttavaks saanud, muutub see hõlpsamini mõistetavaks.

Container ( display: grid; /* Määrake meie ruudustiku suurus ja veergude arv. F-üksus töötab nagu Flexbox: veerud jagavad reas vaba ruumi vastavalt oma väärtustele. Meil ​​on kaks veergu – esimene on kolm korda suurem kui teine ​​*/ grid-template -veerud: 3fr 1fr /* Seoge varem tehtud alad ruudustiku kohtadega. Teine rida on jagatud põhiosa ja külgriba */ grid-template-areas: "header header" main sidebar" "jaluse jalus"; /* Ruudustiku lahtrite vaheline kaugus on 60 pikslit */ grid-gap: 60px; )

See on kõik! Meie paigutus järgib nüüd ülaltoodud struktuuri ja oleme selle seadistanud nii, et me ei peaks tegelema veerise või polsterdusega.

Test 2. Lehe responsiivseks muutmine

Flexbox lahendus

See samm on eelmisega rangelt seotud. Flexboxi lahenduse puhul peame muutma paindesuunda ja kohandama veerise.

@media (max-width: 600px) ( .main-and-sidebar-wrapper ( flex-direction: veerg; ) .main ( margin-parem: 0; margin-alumine: 60px; ) )

Meie leht on üsna lihtne, nii et meediumipäringuga pole palju tööd, kuid keerulisem küljendus nõuaks palju ümbertööd.

CSS-võrgulahendus

Kuna oleme ruudustikualad juba määratlenud, peame lihtsalt nende järjekorra meediumipäringus uuesti määratlema. Saame kasutada sama kõlari seadistust.

@media (max-width: 600px) ( .container ( /* Joonda ruudustikualad mobiilipaigutuse jaoks */ grid-template-areas: "header header" "main main" "sidebar külgriba" "jaluse jalus"; ) )

Või võime kogu paigutuse nullist uuesti määratleda, kui arvame, et see lahendus on puhtam.

@media (max-width: 600px) ( .container ( /* Muudab ruudustiku üheveeruliseks paigutuseks */ grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" " jalus"; ) )

3. test: päise komponentide joondamine

Flexbox lahendus

Oleme Flexboxiga sarnase paigutuse juba teinud ühes oma vanas artiklis -. Tehnika on üsna lihtne:

Päis (kuva: painduv; õigusta-sisu: tühik; )

Navigeerimisloend ja nupp on nüüd õigesti joondatud. Jääb vaid esemed sisse panna

SEOTUD ARTIKLID