Flexbox CSS:ssä ja HTML:ssä: Konkreettinen esimerkki responsiivisesta suunnittelusta

Tässä oppaassa näytän sinulle, miten luot Flexboxilla responsiivisen ulkoasun kahdella sivupalkilla ja pääsisällöllä CSS:ssä ja HTML:ssä. Flexbox mahdollistaa elementtien joustavan asettelun, jolloin ne mukautuvat dynaamisesti näytön kokoon. Olit sitten luomassa yksinkertaista verkkosivua tai monimutkaista suunnittelua, Flexbox-tekniikka tarjoaa monia mahdollisuuksia. Aloittakaamme konkreettisella esimerkillä!

Tärkeimmät havainnot

• Flexboxilla voit luoda responsiivisen ulkoasun, jossa erilaiset elementit jaetaan tasaisesti käytettävissä olevalle leveydelle.
• Flex-ominaisuudet määrittävät, kuinka paljon tilaa kullakin elementillä on suhteessa muihin.

Vaiheittainen ohje

Vaihe 1: Peruskehyksen luominen

Jotta voit työskennellä Flexboxin kanssa, tarvitset aluksi perus-HTML-rungon. Luo HTML-tiedosto ja lisää perustunnisteet, kuten , , ja . Lisää sitten -tunnisteeseen säiliöelementit sivupalkkejasi ja pääsisältöä varten.

Vaihe 2: Ulkoasun muotoilun CSS lisääminen

Nyt haluat antaa ulkoasullesi hieman tyyliä CSS:llä. Voit työskennellä joko head> tai erillisessä CSS-tiedostossa. Lisää joitakin yksinkertaisia värejä, jotta voit erottaa eri alueet selvästi.

Vaihe 3: Flexboxin aktivointi

Jotta voit aktivoida Flexboxin, lisää näytölle ominaisuus display: flex; säiliölle. Näin säiliön suorat lapset muuttuvat Flex-elementeiksi. Haluat ehkä myös määrittää suunnan: Käytä flex-direction: row; vaakasuuntaiselle ulkoasulle.

Vaihe 4: Flex-ominaisuudet lasten määrittämiseksi

Seuraavaksi määritä Flex-ominaisuudet lasten elementeille. Täällä voit määrittää, kuinka paljon tilaa kullekin elementille pitäisi olla suhteessa muihin. Esimerkiksi pääelementti voisi olla flex: 2; ja kahdella sivupalkkielementillä flex: 1;, jotta pääelementti olisi kaksinkertainen verrattuna kuhunkin sivupalkkiin.

Vaihe 5: Responsiivisen leveyden säätäminen

Varmistaaksesi, että ulkoasusi on myös responsiivinen, sinun on asetettava säiliöön width: 100%. Tämän avulla ulkoasu mukautuu selainikkunan leveyteen. Valitse myös korkeus, jotta ulkoasun näkymät voidaan optimoida.

Vaihe 6: Kiinteät leveydet sivupalkkeja varten

Jos haluat määrittää sivupalkille kiinteän leveyden, voit täydentää Flex-ulkoasua sivupalkin kiinteällä leveydellä. Poista yksinkertaisesti sivupalkin Flex-ominaisuus, jotta kyseessä olisi vain minimitaso.

Vaihe 7: Lisämuokkaukset ja testaukset

Nyt sinun tulisi tarkistaa ulkoasu selaimessa varmistaaksesi, että kaikki näyttää oikein. Kokeile erilaisia Flex-arvoja ja leveyksiä nähdäksesi, miten ulkoasu reagoi niihin. Skaalaa selainikkunaa testataksesi suunnittelun responsiivisia ominaisuuksia.

Vaihe 8: Vertikaalisen ulkoasun toteuttaminen

Valinnaisesti voit muuttaa ulkoasua vertikaalisen ulkoasun luomiseksi. Tee tämä muuttamalla Flex-säiliö pylvääksi käyttämällä flex-direction: column;. Tämä vaihe on tarpeen, jos haluat enemmän suunnitteluvaihtoehtoja.

Vaihe 9: Selainvalvonnan lisääminen

Muista tarkistaa selaintuki työskennellessäsi. Joissakin vanhemmissa selainversioissa tarvitaan Flexboxille etuliitteitä. Lisää tarvittaessa asianmukaiset etuliitteet varmistaaksesi, että ulkoasu näyttää hyvältä kaikkialla.

Vaihe 10: Tee viimeiset mukautukset ja tallenna

Tarkista kaikki säätimet ja varmista, että asettelusi näyttää hyvältä eri näyttökooissa. Tallenna kaikki muutokset ja ota kuvakaappauksia asettelustasi saadaksesi yleiskuvan edistymisestä.

Yhteenveto

Tässä oppaassa opit luomaan yksinkertaisen ja responsiivisen asettelun Flexboxin avulla. Flex-ominaisuuksien avulla voit helposti hallita elementtien kokoa ja järjestystä. Yllä kuvatuilla vaiheilla voit suunnitella asettelun, jossa on kaksi sivupalkkia ja pääalue, joka mukautuu ​​elegantisti erilaisiin näyttökokoihin.