Flexbox - kombinera - Versionshistorik

PGJ: /* Två kolumner */

2020-09-04T21:04:42Z

Två kolumner

← Äldre version		Versionen från 4 september 2020 kl. 21.04
Rad 16:		Rad 16:
	=== Två kolumner ===		=== 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.		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.
	~~tat!~~
	<codepen pen="xGoGxo" height="400" tab="css,result">		<codepen pen="xGoGxo" height="400" tab="css,result">
	</codepen>		</codepen>

PGJ: /* Tre kolumner */

2019-02-05T13:30:53Z

Tre kolumner

← Äldre version		Versionen från 5 februari 2019 kl. 13.30
Rad 23:		Rad 23:
	=== 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="~~900~~" tab="css,result">		<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.		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.

PGJ: /* Två kolumner */

2019-02-05T13:29:40Z

Två kolumner

← Äldre version		Versionen från 5 februari 2019 kl. 13.29
Rad 16:		Rad 16:
	=== Två kolumner ===		=== 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.		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.
			tat!
	~~Klicka på de olika flikarna, så du får se både kod och resultat~~!		<codepen pen="xGoGxo" height="400" tab="css,result">
	<codepen pen="xGoGxo" height="~~800~~" tab="css,result">
	</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>.		Detta är en mycket kortare, snyggare/renare och mer robust lösning än om vi skulle gjort motsvarande lösning med <code>float</code>.

PGJ: /* Kombinera */

2019-01-29T07:02:07Z

Kombinera

← Äldre version		Versionen från 29 januari 2019 kl. 07.02
Rad 18:		Rad 18:

	Klicka på de olika flikarna, så du får se både kod och resultat!		Klicka på de olika flikarna, så du får se både kod och resultat!
	<codepen pen="xGoGxo" height="800" tab="css">		<codepen pen="xGoGxo" height="800" tab="css,result">
	</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>.		Detta är en mycket kortare, snyggare/renare och mer robust lösning än om vi skulle gjort motsvarande lösning med <code>float</code>.
Rad 24:		Rad 24:
	=== 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="900" tab="css">		<codepen pen="Jdgbao" height="900" 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.		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.

PGJ: /* Grunden */

2019-01-29T07:01:49Z

Grunden

← Äldre version		Versionen från 29 januari 2019 kl. 07.01
Rad 4:		Rad 4:

	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>

PGJ den 26 oktober 2016 kl. 06.35

2016-10-26T06:35:05Z

← Äldre version		Versionen från 26 oktober 2016 kl. 06.35
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 ~~rad~~ som tillsammans bygger upp layouten.		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...

PGJ: /* Skissa, innan du börjar koda */

2016-09-12T06:37:42Z

Skissa, innan du börjar koda

← Äldre version		Versionen från 12 september 2016 kl. 06.37
Rad 30:		Rad 30:
	== Skissa, innan du börjar koda ==		== 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 ~~göra lika och att gör rätt~~!		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!
	</div><!-- end well -->		</div><!-- end well -->

PGJ: /* Nästa aktivitet */

2016-03-20T11:25:29Z

Nästa aktivitet

← Äldre version		Versionen från 20 mars 2016 kl. 11.25
Rad 35:		Rad 35:
	== Nästa aktivitet ==		== 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]]

PGJ: /* Nästa aktivitet */

2016-03-20T11:25:20Z

Nästa aktivitet

← Äldre version		Versionen från 20 mars 2016 kl. 11.25
Rad 34:		Rad 34:

	== Nästa aktivitet ==		== 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 :-)
	[[Flexbox - sätta storlek]]		[[Flexbox - sätta storlek]]

	[[Category:Webbutveckling]]		[[Category:Webbutveckling]]

PGJ: /* Skissa, innan du börjar koda */

2016-03-20T11:25:11Z

Skissa, innan du börjar koda

← Äldre version		Versionen från 20 mars 2016 kl. 11.25
Rad 32:		Rad 32:
	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 göra lika och att gör rätt!		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 göra lika och att gör rätt!
	</div><!-- end well -->		</div><!-- end well -->

	~~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 :-)~~

	== Nästa aktivitet ==		== Nästa aktivitet ==