Flexbox - kombinera: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) |
||
| (14 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 1: | Rad 1: | ||
För att skapa layout med flexbox vill vi ofta kombinera de olika axlarna på olika vis. På så vis kan vi bygga upp vår sidas utseende genom att kombinera kolumner och | För att skapa layout med flexbox vill vi ofta kombinera de olika axlarna på olika vis. På så vis kan vi bygga upp vår sidas utseende genom att kombinera kolumner och rader som tillsammans bygger upp layouten. | ||
== Grunden == | == Grunden == | ||
Vi börjar med att repetera grunderna... | Vi börjar med att repetera 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 på en och samma rad kan vi t.ex. göra följande: | ||
<codepen pen="qdeqoB" height="400" tab="css"> | <codepen pen="qdeqoB" height="400" tab="css,result"> | ||
</codepen> | </codepen> | ||
Om vi vill placera ett antal box-element i en kolumn 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: | ||
<codepen pen="oXKYdj" height="400" tab="css"> | <codepen pen="oXKYdj" height="400" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 17: | Rad 17: | ||
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. | 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. | ||
<codepen pen="xGoGxo" height="400" tab="css,result"> | |||
<codepen pen="xGoGxo" height=" | |||
</codepen> | </codepen> | ||
Detta är en mycket kortare, snyggare/renare och mer robust lösning än om vi skulle gjort motsvarande lösning med <code>float</code>. | |||
=== Tre kolumner === | === Tre kolumner === | ||
Skulle vi vilja ha fler kolumner, lägger vi bara till ännu en rad med <code>flexKolumn</code> och vidhängande innehåll. Likaså om vi vill ha fler, eller färre rader, då ändrar vi bara antalet <code>flexElement</code> i respektive <code>flexKolumn</code>. I följande exempel har vi tre kolumner, men den mittersta kolumnen har enbart en rad. | Skulle vi vilja ha fler kolumner, lägger vi bara till ännu en rad med <code>flexKolumn</code> och vidhängande innehåll. Likaså om vi vill ha fler, eller färre rader, då ändrar vi bara antalet <code>flexElement</code> i respektive <code>flexKolumn</code>. I följande exempel har vi tre kolumner, men den mittersta kolumnen har enbart en rad. | ||
<codepen pen="Jdgbao" height=" | <codepen pen="Jdgbao" height="400" tab="css,result"> | ||
</codepen> | </codepen> | ||
Lägg märke till att trots att den mittersta kolumnen har färre element, sätts dess höjd till samma höjd som övriga kolumner. Detta är något som är svårt att åstadkomma med "traditionella" CSS-lösningar. Med flexbox får vi det automatiskt. Vilket är ännu en fördel med att skapa layout med hjälp av flexbox. | |||
== Skissa, innan du börjar koda == | |||
<div class="well well-meadow"> | <div class="well well-meadow"> | ||
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 flexlayout som behövs. Faktum är att även proffsen jobbar utifrån skisser - man kallar ofta detta för [[mockups]]. Detta gäller inte minst om man har stora webbprojekt, där många olika personer är involverade. Då är det inte bara att sätta igång och koda och hoppas att alla väljer att jobba utifrån samma layoutkoncept! | |||
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 | |||
</div><!-- end well --> | </div><!-- end well --> | ||
== Nästa aktivitet == | |||
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 :-) | 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 :-) | ||
[[Flexbox - sätta storlek]] | [[Flexbox - sätta storlek]] | ||
[[Category:Webbutveckling]] | [[Category:Webbutveckling]] | ||
Nuvarande version från 4 september 2020 kl. 23.04
För att skapa layout med flexbox vill vi ofta kombinera de olika axlarna på olika vis. På så vis kan vi bygga upp vår sidas utseende genom att kombinera kolumner och rader som tillsammans bygger upp layouten.
Grunden
Vi börjar med att repetera 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.
Detta är en mycket kortare, snyggare/renare och mer robust lösning än om vi skulle gjort motsvarande lösning med float.
Tre kolumner
Skulle vi vilja ha fler kolumner, lägger vi bara till ännu en rad med flexKolumn och vidhängande innehåll. Likaså 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.
Lägg märke till att trots att den mittersta kolumnen har färre element, sätts dess höjd till samma höjd som övriga kolumner. Detta är något som är svårt att åstadkomma med "traditionella" CSS-lösningar. Med flexbox får vi det automatiskt. Vilket är ännu en fördel med att skapa layout med hjälp av flexbox.
Skissa, innan du börjar koda
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 flexlayout som behövs. Faktum är att även proffsen jobbar utifrån skisser - man kallar ofta detta för mockups. Detta gäller inte minst om man har stora webbprojekt, där många olika personer är involverade. Då är det inte bara att sätta igång och koda och hoppas att alla väljer att jobba utifrån samma layoutkoncept!
Nästa aktivitet
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 :-)