Flexbox CSS: Ensimmäiset askeleet verkkosivuston rakenteeseen

Tässä oppaassa opit, miten voit rakentaa Flexbox-layoutin CSS ja HTML esimerkkirakenteen verkkoprojekteihisi. Tutkimme Visual Studio Coded-ohjelmiston integroituja virheenetsintätyökaluja yhdessä Microsoft Edgen kanssa ja otamme ensimmäiset askeleet Flexbox-layoutin käyttöönotossa. Flexbox on tehokas layout-järjestelmä, joka auttaa sinua luomaan monimutkaisia layoutteja vähällä vaivalla ja joustavalla elementtien järjestelyllä.

Tärkeimmät havainnot

• Flexboxin avulla voit järjestää elementtejä vaakasuunnassa ja pystysuunnassa.
• Microsoft Edgen kehittäjätyökalut voidaan integroida suoraan Visual Studio Codeen.
• Flex-suunta vaikuttaa Flex-elementtien suuntaan.

Vaiheittainen opas

Ensinnäkin tulet asentamaan Microsoft Edgen työkalut Visual Studio Codeen. Etsi "Microsoft Edge Tools for VS Code" Extensions-valikosta ja asenna se.

Kun laajennus on asennettu, sinun tulee siirtyä virheenetsintävaihtoehtoihin. Napsauta "Run and Debug" ja sitten "create a launch.json file". Tämä auttaa sinua säätämään asetuksia.

Tämän nyt luodun määritystiedoston sisälle lisää uusi määritys "Microsoft Edge Tools"-sovellukselle. Varmista, että kirjoitat paikallisen osoitteen localhost:3000, koska meillä on serveri ajossa tässä portissa terminaalissamme.

Nyt on aika käynnistää projekti. Siirry oikeaan alikansioon ja suorita komento npm run dev. Avaa sitten localhost:3000 selaimessasi.

Kun sivu on ladattu, voit aktivoida Microsoft Edgen kehittäjätyökalut napsauttamalla vastaavaa painiketta Visual Studio Codessa. Tämä avaa kehittäjätyökalun suoraan editorisi vieressä.

Nyt voit nähdä sovelluksesi rakenteen. Meillä on säiliö (div), joka kantaa luokkaa "Flex Container". Tämän säiliön sisällä on neljä DIV-elementtiä, joilla on luokka "Flex Child" ja jotka edustavat tekstisisältöjä 1, 2, 3 ja 4.

Flex-säiliö on tällä hetkellä määritelty leveydeltään 400 pikseliä ja korkeudeltaan 200 pikseliä, kun taas Flex-lapset on määritelty leveydeltään 100 pikseliä ja korkeudeltaan 50 pikseliä. Vaikka mitään lapsista ei tällä hetkellä järjestetä Flexboxin avulla, ne näytetään pystysuorassa listassa.

Jotta voisit käyttää Flexboxia tehokkaasti, sinun tulee lisätä CSS-ominaisuus display: flex; Flex-säiliölle ja tallentaa muutokset. Kun teet tämän, huomaat lasten järjestyksen muuttuvan automaattisesti ja niiden näytetään nyt rinnakkain.

Jos haluat järjestää Flex-lapset uudelleen pystysuunnassa, voit käyttää flex-direction-ominaisuutta. Aseta flex-direction: column; Flex-säiliölle muuttaaksesi Flex-lapsien suunnan takaisin pystysuuntaiseksi.

Huomaat, että Flex-lapset on nyt jälleen järjestetty pystysuunnassa. Jos muutat sitten korkeutta ja leveyttä, ne näyttävät olevan osa blokkia, vaikka näyttö ei olekaan määritelty Blokki-muotoon, vaan Flex-muotoon.

Tämä oli yleiskatsaus Flexbox-layoutin perusteisiin. Videossa kävimme läpi tärkeimmät ominaisuudet ja niiden vaikutukset. Tulevissa oppaissa tarkastelemme lisää Flexboxin toimintoja ja katsomme, mitä kaikkea voit tehdä tämän tehokkaan layout-järjestelmän avulla.

Yhteenveto

Tässä oppaassa opit rakentamaan yksinkertaisen rakenteen Flexboxilla CSS:ssä. Integroit Microsoft Edgen kehittäjätyökalut Visual Studio Codeen ja otit ensiaskeleet Flex-layoutin aktivoinnissa. Edessäsi on vielä monia mahdollisuuksia, joita tarkastelemme tarkemmin tulevissa videoissa.