Flexboks: Enkel justering med Align-Items og Align-Self

I denne veiledningen lærer du hvordan du bruker CSS-egenskapene align-items og align-self i CSS for å kontrollere justeringen av enkelt-elementer i en Flex Container. Mens align-items justerer plasseringen av alle direkte barn i en kontainer, tillater align-self individuelle tilpasninger til hvert enkelt barn. Vi vil gå gjennom konseptene trinnvis slik at du til slutt vet nøyaktig hvordan du kan bruke disse egenskapene effektivt.

Viktigste funn

• align-items definerer plasseringen av alle barn i en Flex Container.
• align-self tillater individuell plassering av enkelt Flex-elementer innenfor kontaineren.
• Stretch er standardverdien for align-items og sørger for at barna fyller tilgjengelig plass.

Trinn-for-trinn-guide

Først ser vi hvordan grunnkonfigurasjonen av Flex Container ser ut, og hvordan vi kan påvirke justeringen av barna gjennom align-items.

Her definerer du en kontainer med display: flex;. I denne kontaineren kan du deretter justere justeringen gjennom align-items, for eksempel til stretch, som betyr at barna strekkes til hele høyden eller bredden av kontaineren.

Du kan bruke ulike verdier for align-items, inkludert flex-start, center og flex-end. Hvis du nå setter align-items til stretch, vil du se at alle barn-elementene fyller hele kontainerens plass. For å demonstrere dette, fjerner vi en fast bredde fra barna, slik at de tar opp all tilgjengelig plass.

Nå, hvis du setter align-items til center, vil du plutselig se at elementene ikke tar opp all tilgjengelig plass, men beholder bare den minimale bredden som er nødvendig. Dette viser deg hvor viktig riktig verdi for align-items er for å oppnå ønsket oppsett.

Hvis du legger til en fast bredde igjen, for eksempel 200px, vil du se at elementene blir bredere og oppsettet forblir stabilt. Du kan også bruke width: 100% for å oppnå en lignende effekt.

Nå kommer vi til kjernen i veiledningen vår: å håndtere align-self. Denne CSS-egenskapen lar deg justere individuell plassering av hvert barn-element, uavhengig av innstillingen til overordnet kontainer. Derfor setter vi align-items til center og legger deretter til spesifikke innstillinger for align-self.

For navigasjonselementet vil du at det skal være helt til venstre. Sett align-self: flex-start for navigasjonen og lagre endringene. Du bør kunne observere hvordan navigasjonselementet beveger seg helt til venstre.

For hovedelementet (main) setter vi align-self: center. Det bør fortsette å være i midten, og dermed blir avstanden til de andre elementene synlig.

Nå justerer vi bunnelementet (footer) med align-self: flex-end nedover. Alle disse innstillingene danner en diagonal linje fra øverst til venstre til nederst til høyre i oppsettet ditt.

Hvis du nå setter align-self for hovedelementet til stretch, betyr det at det vil ta hele plassen på tverraksen, og de andre elementene vil collapse i høyden.

På samme måte kan du også endre retningen ved å sette flex-direction: row for kontaineren din. Prosessen for justering av enkeltstående elementer forblir den samme, bare aksen endres. Øverst starter vi med flex-start og lar elementene justeres i henhold til stretch-prinsippet.

Et viktig poeng er at du kan bruke align-self så mange ganger du trenger for å gi hvert element individuell justering, noe som gir deg full kontroll over layouten til kontaineren og dens barn.

Ved å bruke Flexbox-egenskapene målrettet kan du skape et visuelt tiltalende oppsett som også er optimalisert for forskjellige skjermstørrelser.

Oppsummering

I denne veiledningen har vi grundig behandlet Flexbox-egenskapene align-items og align-self. Du har lært hvordan du kan designe plasseringen av elementer i en Flex Container, både generelt via kontaineren og individuelt for hvert enkelt element.