Flexbox: oikea valikko · Koodaa Martinin kanssa

Opi asettamaan laatikot vierekkäin, ja valikkosi näyttää oikealta verkkosivulta.

Näytän sinulle: laatikot vierekkäin

Valikkosi linkit istuvat tällä hetkellä sivulla peräkkäin, vähän kuin sanat lauseessa. Oikeassa valikossa kohteet ovat siististi vierekkäin, välein. CSS:ssä on työkalu laatikoiden asettamiseen nimeltä flexbox:

nav {
  display: flex;    /* this box's children line up side by side */
  gap: 16px;        /* space between them */
}

Siinä se. display: flex sanoo laatikolle: “Aseta lapsesi (tässä linkit) riviin.” Ja gap asettaa välin niiden väliin. Flexbox osaa paljon muutakin:

nav {
  display: flex;
  gap: 16px;
  justify-content: center;   /* center children horizontally */
  align-items: center;       /* also align them to the middle vertically */
  flex-wrap: wrap;           /* if they don't fit, wrap to the next line */
}

Näytän sinulle: valikko kuten oikeilla verkkosivuilla

Yhdistetään kaikki mitä jo tiedät flexboxiin:

header {
  background-color: #1d4ed8;   /* a colored bar at the top */
  padding: 16px;
}

header h1 {
  color: white;
  margin: 0;                   /* heading without its default spacing */
}

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;       /* remove the underline from links */
  padding: 8px 14px;
  border-radius: 999px;        /* fully rounded ends = a pill shape */
  background-color: rgba(255, 255, 255, 0.15);  /* semi-transparent white */
}

nav a:hover {
  background-color: rgba(255, 255, 255, 0.35);
}

Jotain uutta lopussa: :hover tarkoittaa “kun viet hiiren päälle”. Valikon kohta syttyy hoverissa – aivan kuin verkkosivuilla, jotka tunnet.

Nyt sinun vuorosi 💪

Muuta valikkosi oikeaksi valikoksi: värillinen palkki headerin koko leveydellä, kohteet vierekkäin pillerin muodossa, syttyvät hoverissa. Ota värit paletistasi oppitunnilta 6.

🏫 Koulun verkkosivu – ratkaisu (sininen)

header {
  background-color: #1d4ed8;
  padding: 16px;
}

header h1 { color: white; margin: 0; }

nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.15);
}

nav a:hover { background-color: rgba(255, 255, 255, 0.35); }

🙋 Henkilökohtainen verkkosivu – ratkaisu (oranssi)

Sama koodi, vaihda vain headerin väri:

header {
  background-color: #ea580c;
  padding: 16px;
}

🌍 Matkakirja – ratkaisu (vihreä)

Sama koodi, vaihda vain headerin väri:

header {
  background-color: #15803d;
  padding: 16px;
}

⚽ Seuran verkkosivu – ratkaisu (seuran väri)

Sama koodi, vaihda headerin väri seurasi:

header {
  background-color: #b91c1c;
  padding: 16px;
}

💡

Haluatko nimen vasemmalle ja valikon oikealle, samalle riville? Kääri header toiseen flexboxiin: lisää header { display: flex; justify-content: space-between; align-items: center; }. space-between-ominaisuus tarkoittaa “työnnä lapset erilleen: ensimmäinen vasemmalle, viimeinen oikealle”.

✅

Tarkista itse: Verkkosivusi yläreunassa on värillinen palkki, valkoisella nimellä ja pillerinmuotoisilla valikon kohteilla, jotka syttyvät kun viet hiiren päälle. Muista – koska CSS on jaettu, valikko muuttui kaikilla sivuilla kerralla.

Mitä opit tästä oppitunnista

display: flex asettaa laatikon lapset riviin, gap laittaa väliä niiden väliin.
justify-content ja align-items kohdistavat asioita, flex-wrap: wrap antaa niiden rivittyä.
:hover = “kun hiiri on päällä”. Pieni hehku tekee verkkosivusta elävän tuntuisen.