Flexbox - kombinera: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) |
||
| Rad 10: | Rad 10: | ||
</codepen> | </codepen> | ||
== Kombinera == | == Kombinera == | ||
För att det här ska bli kraftfull och för att börja förstå vitsen med flexboxar, ska vi ta ett | För att det här ska bli kraftfull och för att börja förstå vitsen med flexboxar, ska vi ta ett par exempel, där vi kombinerar flexboxar på olika vis. | ||
=== Två kolumner === | === Två kolumner === | ||
Versionen från 24 augusti 2015 kl. 23.32
Grunden
Vi repeterar grunderna...
Om vi vill placera ett antal box-element på en och samma rad kan vi t.ex. göra följande:
Om vi vill placera ett antal box-element i en kolumn kan vi t.ex. göra följande:
Kombinera
För att det här ska bli kraftfull och för att börja förstå vitsen med flexboxar, ska vi ta ett par exempel, där vi kombinerar flexboxar på olika vis.
Två kolumner
Genom att först ha en omslutande flexbox som lägger saker på rad och sedan ha ett par underliggande flexboxar där saker ligger i kolumner, kan vi få till en trevlig layout.
Klicka på de olika flikarna, så du får se både kod och resultat!
Tre kolumner
Skulle vi vilja ha fler kolumner, lägger vi bara till ännu en rad med flexKolumn och vidhängande innehåll. Lika så om vi vill ha fler, eller färre rader, då ändrar vi bara antalet flexElement i respektive flexKolumn. I följande exempel har vi tre kolumner, men den mittersta kolumnen har enbart en rad.
I början kan det definitivt vara en bra idé att skissa upp den layout man vill ha på papper och utifrån skissen konstruera den flex-layout som behövs. Faktum är att även proffsen jobbar utifrån skisser. Det gäller inte minst om man har stora webbprojekt, där många olika är involverade. Då är det inte bara att sätta igång och koda och hoppas att alla gör lika och gör rätt!
Genom att på detta vis kombinera olika flexboxar, kan vi skapa mycket av den layout som finns på den moderna webben. Vi behöver dock lite mer kött på benen innan vi kan göra riktig stordåd :-)