Elementtien asemointi
Float
float eli kelluttaminen on ominaisuus, jolla voidaan siirtää yksittäisiä elementtejä. Se ei sovi suuriin asetteluihin, joihin on nykyään parempiakin vaihtoehtoja, mutta yksinkertaisiin tilanteisiin se toimii. Hyvä esimerkki on elementti, jonka sisällä on kuva, joka halutaan vasemmalle, sekä tekstiä, joka halutaan pitää sen vieressä.
<div class="content">
<img src="mandala.png" alt="Mandala" class="float-image">
<p>
Tämä on esimerkki tekstistä, joka kiertää kuvan. Kuvan float-arvo on asetettu `left`, mikä tarkoittaa, että kuva kelluu vasemmalle, ja teksti kiertää sen oikealta puolelta. Float-ominaisuutta käytettiin aiemmin usein kuvia sisältävissä asetteluissa, koska se antaa mahdollisuuden tekstin ja kuvien sijoitteluun samalle riville.
</p>
<p>
Nykyisin floatin käyttö on vähentynyt, mutta se on edelleen hyödyllinen yksinkertaisissa tilanteissa, joissa halutaan luoda lehtimäinen asettelu, jossa kuva ja teksti yhdistyvät kauniisti. Kuvan ympärille on lisätty marginaali, jotta teksti ei osu suoraan kuvaan, mikä parantaa luettavuutta.
</p>
</div>
.float-image {
float: left; /* Kelluttaa kuvan vasemmalle */
margin: 10px; /* Lisää vähän tilaa kuvan ympärille */
width: 200px; /* Määrittää kuvan leveyden */
}
.content {
font-size: 16px; /* Tekstin koko */
line-height: 1.6; /* Rivikorkeus parantaa luettavuutta */
}
Flexbox
Flexbox on yksi tavoista, joilla voidaan asemoida koko verkkosivun sisältöä.
Flexbox:in avulla voidaan asetella elementtejä sivulle tai toisen elementin sisällä. Elementtiä, joka sisältää toisia elementtejä, kutsutaan flex container:iksi. Sen sisällä on flex item:eja.
Periaatteessa riittää, että flex container:lle määritellään:
.main {
display: flex;
}
Tämän jälkeen kaikki sen sisällä olevat elementit eli lapset ovat automaattisesti flex-item:eja.
Alkutoimet
Tallenna seuraava koodi flextest.html-tiedostoon:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox-harjoitus</title>
<link rel="stylesheet" href="boxit.css">
</head>
<body>
<main class="main">
<div class="subdiv">
<h1>DIV 1</h1>
</div>
<div class="subdiv highdiv">
<h1>DIV 2</h1>
</div>
<div class="subdiv">
<h1>DIV 3</h1>
</div>
<div class="subdiv widediv">
<h1>DIV 4</h1>
</div>
</main>
</body>
</html>
Tallenna seuraava koodi flextest.css -tiedostoon. flex-container on main, jonka luokka on main ja sen sisällä on flex-item:ejä, joiden luokka on subdiv. Yksi subdiv:estä kuuluu lisäksi luokkaan highdiv tai toinen widediv.
.main {
display: flex;
}
.subdiv {
height: auto;
width: auto;
padding: 1em;
border-style: solid;
border-width: 3px;
border-radius: 25px;
background-color: lightblue;
}
.highdiv {
height: 350px;
width: 200px;
background-color: lightseagreen;
}
.widediv {
height: 100px;
width: 250px;
background-color: lightslategray;
}
Sivu näyttää aluksi tältä:
Laatikoiden järjestys (item)
Normaalisti div:it luodaan sivulle siinä järjestyksessä kun ne ovat HTML-tiedostossa. Järjestykseen voi kuitenkin vaikuttaa order:in avulla. Oletusarvo järjestykselle on 0, joten -1 tuo flex-item:in alkuun, 2 vie sen loppuun jne.
order: -1;
Laatikoiden asettelu sivulle (container)
Oletusarvoidesti flex-item:it sijoitetaan sivulle vaakaan. Jos haluat ne pystyriviin sen voi tehdä näin:
flex-direction: column;
Jos flex-item:ien toivotaan siirtyvän uudelle riville selainikkunan kaventuessa, aktivoi flex-wrap:
flex-wrap: wrap;
Jos laatikot halutaan alkamaan vasemmalta tai oikealta reunalta, tai ne halutaan vaakasuunnassa keskelle, käytetään justify-content-asetusta:
justify-content: center;
justify-content: flex-end;
Pystysuunnassa samat asetukset saadaan aikaan align-items:illa.
align-items: flex-start;
Laatikoiden koko (item)
Jos flex-item:in leveyttä tai korkeutta ei ole määritelty, se skaalautuu automaattisesti sisältönsä mukaisesti sopivan kokoiseksi. Tässä esimerkissä tällaisia vapaasti skaalautuvia flex-item:eitä ovat DIV1 ja DIV3. Jos halutaan, että flex-item täyttää kaiken vapaana olevan tilan voidaan niille määritellä flex-grow. Kokeile asettaa kaikille sub-div:eille:
flex-grow: 1;
Laatikot voivat kasvaa myös suhteessa nopeammin kuin muut laatikot. Aseta yhdelle high-div:lle:
flex-grow: 2;
Havainnollistava kuva flexin justify-contentista:
Flexboxin käyttöä voi treenata myös hauskalla tavalla pelaten Flexbox Froggya, onnistuu myös suomeksi
Demoharjoitus 1
- Luo uusi html-tiedosto nimeltään asetteludemo1.html. Kopioi siihen allaoleva koodi. Luo sitten CSS-tiedosto, jonka nimi on asetteludemo.css.
- Tyylittele ensin listaa siten, että siinä ei ole listamerkintöjä. Lisää myös mainin sisällä oleville diveille jokin taustaväri ja reunukset, jotta ne erottuvat selkeästi.
- Käytä flexboxia asettelemaan sivusto. Laita navigointipalkki vasempaan reunaan pystyyn ja anna sille leveydeksi 200px.
- Asettele sitten tuotteet riviin navigoinnin oikealle puolelle omaksi flexboxikseen. Säädä niitä niin, että ne rivittyvät uudelle riville ja että niiden välillä on tyhjää tilaa (joko justify-content: space-between tai justify-content: space-evenly).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox-harjoitus</title>
<link rel="stylesheet" href="asetteludemo.css">
</head>
<body>
<header>
<h1>Tervetuloa kauppaamme!</h1>
</header>
<nav>
<ul>
<li>Etusivu</li>
<li>Tuotteet</li>
<li>Laatutakuu</li>
<li>Yhteystiedot</li>
</ul>
</nav>
<main>
<h2>Tässä ovat tuotteemme</h2>
<div class="tuotteet">
<div class="subdiv">
<h1>Tuote 1</h1>
<p>Tuote 1 on upea.</p>
</div>
<div class="subdiv">
<h1>Tuote 2</h1>
<p>Tuote 2 on hieno.</p>
</div>
<div class="subdiv">
<h1>Tuote 3</h1>
<p>Tuote 3 on mahtava.</p>
</div>
<div class="subdiv">
<h1>Tuote 4</h1>
<p>Tuote 4 on loistava.</p>
</div>
</div>
</main>
</body>
</html>
Grid
Monimutkaisempia asetteluja varten voi olla kannattavaa käyttää grid-menetelmää, sillä se toimii täsmällisemmin kuin flex. Gridiä voi ajatella ruudukkona, jonka ruutujen määrän itse päätät ja päätät myös, miten ja moneenko ruutuun sijoitat sisällön.
Gridin käyttö aloitetaan tekemällä elementistä grid-elementti. Sen jälkeen kaikki sen sisällä olevat elementit ovat grid-elementtejä myös.
main {
display: grid;
}
Sen jälkeen määritellään, kuinka monta pystyriviä (column) ruudukossamme on. Pystyrivien määrän sekä niiden koon voi määritellä monella eri tavalla, sillä siihen voi käyttää eri yksiköitä. Yksi selkeä tapa on käyttää yksikköä fr (fragment). Silloin tila jaetaan automaattisesti saman kokoisiin paloihin. Jos siis haluamme, että meillä on alueella neljä saman levyistä osaa, sen voi määritellä näin:
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
Samalla menetelmällä voimme myös tehdä esimerkiksi ensimmäisestä osasta tuplasti leveämmän kuin muut eli ensimmäinen pystyrivi onkin kaksi fragmenttia leveä, kun muut ovat vain yhden:
.main {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
Muita soveltuvia yksiköitä ovat pikselit tai prosentit.
Voimme vastaavasti määritellä vaakarivien (row) määrän ja koon. Jos haluamme kolme riviä, joista ensimmäinen on kaksi kertaa niin korkea kuin toiset, se onnistuu seuraavalla koodilla:
.main {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
}
Käyttämällä ominaisuuksia grid-column-start, grid-column-end, grid-row-start, grid-row-end on mahdollista asetella yksittäiset palaset paikoilleen, kun ensin on asetettu grid-template-columns ja grid-template-rows. Silloin voi käyttää numeroita.
Gridillä on mahdollista myös määritellä isompia alueita kuin vain pysty- ja vaakarivejä, mikä voi olla hyöyllistä, jos rakenteen on tarpeen olla monimutkaisempi. Silloin käytetään jokaisesta gridin alueesta omaa nimitystä, joka lisätään jokaiseen lapsielementtiin ominaisuus grid-area, jonka arvoksi annetaan haluttu nimi. Seuraavassa esimerkissä asetellaan kolme palasta suureen gridiin. Pelkän pisteen käyttö tarkoittaa, että palanen on tyhjä.
.main {
grid-template-areas:
"header header header"
"nav main main"
"nav main main"
". main main";
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
Gridin palasten väliin jäävän koon voi säätää käyttämällä gap-ominaisuutta. Sen voi säätää yksinään, jolloin joka suuntaan on yhtä paljon tyhjää tilaa, mutta sen voi säätää erikseen myös vaaka- ja pystyrivien kohdalle. Seuraavassa koodissa laitetaan pystyrivien palojen väliin suurempi väli kuin vaakarivin palojen väliin.
.main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: 10px;
row-gap: 30px;
}
Lisää gridin käytöstä voi lukea täältä
Myös gridin käytöstä löytyy peli, jolla sitä voi harjoitella osoitteesta cssgridgarden.com
Demotehtävä 2
- Kopioi uuteen html-tiedostoon seuraava koodi:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexbox-harjoitus</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<header>
<h1>Tässä on sivuston pääotsikko</h1>
<p>Sille on vielä jokin kiva sloganteksti</p>
</header>
<nav>
<ul>
<li>Etusivu</li>
<li>Tuotteet</li>
<li>Laatutakuu</li>
<li>Yhteystiedot</li>
</ul>
</nav>
<main class="main">
<section class="introduction">
<h2>Tässä on otsikko</h2>
<p>Kuvailen tässä, kuinka hieno verkkokauppa meillä on
ja miksi juuri tästä verkkokaupasta kannattaa ostaa asioita.</p>
</section>
<section class="products">
<div class="subdiv">
<h1>Tuote 1</h1>
<p>Tuote 1 on upea.</p>
</div>
<div class="subdiv">
<h1>Tuote 2</h1>
<p>Tuote 2 on hieno.</p>
</div>
<div class="subdiv">
<h1>Tuote 3</h1>
<p>Tuote 3 on mahtava.</p>
</div>
<div class="subdiv">
<h1>Tuote 4</h1>
<p>Tuote 4 on loistava.</p>
</div>
<div class="subdiv">
<h1>Tuote 5</h1>
<p>Tuote 5 on erinomainen.</p>
</div>
<div class="subdiv">
<h1>Tuote 6</h1>
<p>Tuote 6 on majesteettinen.</p>
</div>
<div class="subdiv">
<h1>Tuote 7</h1>
<p>Tuote 7 on ihana.</p>
</div>
</section>
<section class="ad">
<div>
<p>Tämä teksti tässä on mainosteksti, joka olisi tarkoitus asetella kaikkien tuotteiden oikealle puolelle yhdeksi kapeaksi ja korkeaksi osuudeksi ihan harjoituksen vuoksi. Tällä tavalla saamme yhden uuden tason gridiä käyttöömme, sillä tietenkin sivustolla voi olla sisäkkäin tai vierekkäin monta eri asettelua, jotka käyttävät joko gridiä tai flexiä.</p>
</div>
</section>
</main>
</body>
</html>
- Asettele sisältö luontevasti käyttämällä gridiä. Anna tuotteille jokin taustaväri, jotta ne erottuvat selkeästi taustasta. Mainos olisi tarkoitus asetella tuotteiden oikealle puolelle pystyyn. Myös sille voi antaa eri taustavärin kuin tuotteille.
- Kokeile kasvattaa products osiossa jonkin pysty- tai vaakarivin kokoa suuremmaksi kuin toisten rivien.
- Lisää rivien väliin väliä. Testaa lisätä vaakarivien palojen väliin suurempi väli kuin pystyrivien palojen väliin.
Lisää harjoittelua gridistä
Linkin takana freecodecampin