Flexbox - grunder - Versionshistorik

PGJ den 8 september 2022 kl. 06.30

2022-09-08T06:30:52Z

← Äldre version		Versionen från 8 september 2022 kl. 06.30
Rad 51:		Rad 51:
	== Demokod ==		== Demokod ==
	För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...		För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
	<codepen pen="WvqbWZ" height="~~450~~" tab="html,result">		<codepen pen="WvqbWZ" height="250" tab="html,result">
	</codepen>		</codepen>

PGJ den 31 oktober 2020 kl. 13.14

2020-10-31T13:14:53Z

← Äldre version		Versionen från 31 oktober 2020 kl. 13.14
Rad 56:		Rad 56:
	== Att skapa en flexbehållare ==		== Att skapa en flexbehållare ==
	För att visa att vi vill använda flexbox och skapa en flexbehållare sätter vi ett elements <code>display</code>-egenskap till antingen <code>flex</code> eller <code>inline-flex</code>, t.ex. så här:		För att visa att vi vill använda flexbox och skapa en flexbehållare sätter vi ett elements <code>display</code>-egenskap till antingen <code>flex</code> eller <code>inline-flex</code>, t.ex. så här:
	~~<div class="well well-cyanide-light">~~
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	.flexlåda {		.flexlåda {
Rad 62:		Rad 61:
	}		}
	</syntaxhighlight>		</syntaxhighlight>
	~~</div>~~

	Elementet som har <code>flexlåda</code>-klassen kommer nu att bli en flexbehållare och alla dess underelement kommer att bli flex-element.		Elementet som har <code>flexlåda</code>-klassen kommer nu att bli en flexbehållare och alla dess underelement kommer att bli flex-element.

PGJ den 5 september 2020 kl. 06.14

2020-09-05T06:14:41Z

← Äldre version		Versionen från 5 september 2020 kl. 06.14
Rad 1:		Rad 1:
	Flexbox är ett modernare sätt att skapa layout på webbsidor. Vi kommer även att titta på andra moderna sätt på vilket man kan skapa layout, men flexbox är den enklaste metoden som ger bra resultat.		Flexbox är ett modernare sätt att skapa layout på webbsidor. Vi kommer även att titta på andra moderna sätt på vilket man kan skapa layout, men flexbox är den enklaste metoden som ger bra resultat.

	~~<div class="well well-warning">~~		Flexbox löser många problem och förenklar mycket. Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som ska ha samma höjd, centrering av element (såväl horisontellt som vertikalt) samt att flexbox ger oss layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva en hel del extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.
	Vissa äldre webbläsare klarar inte av flexbox, vilket kan vara problematiskt. Om man vill vara säker på att supporta dessa gamla webbläsare, måste man därför vara noga med att koda sidan så att den ser "vettig" ut även om flexbox inte fungerar. Överhuvudtaget ska man alltid se till att ens sida fungerar så bra som möjligt även om slutanvändaren inte har samma webbläsare som en själv. Som vi ju konstaterat förut, kan det till och med vara som så att slutanvändaren har en icke-grafisk webbläsare.

	Man kan med fördel gå till [https://caniuse.com Can I Use] för att se om en webbteknik har bra stöd eller ej. I skrivandes stund tycker den sajten att 98 % av alla webbläsare stödjer flexbox. Vilket väl är rätt så bra...
	~~</div>~~

	Flexbox löser många problem och förenklar så mycket att det är väl värt att använda sig av denna metod. Det gäller inte minst på nya sidor som inte riktar sig mot de som använder uråldriga webbläsare (ja, det går lite grann emot att man ska vara så inkluderande som möjligt...) Se till att provköra din sida i någon äldre läsare, eller i en icke-grafisk läsare, och kolla så att det går att tillgodogöra sig informationen på sidan (att det inte ser perfekt ut är kanske inte så viktigt när det rör sig om äldre webbläsare).

	Problem som flexbox löser på ett excellent sätt är bland annat: kolumner som ska ha samma höjd, centrering av element (såväl horisontellt som vertikalt) samt att flexbox ger oss layouter som är långt mer robusta och som inte "trillar" isär. Om du hållit på med traditionell webbutveckling, så vet du att detta är problem som kan kräva en hel del extra kod. Om du är nybörjare, så tro mig, du kommer att tjäna in mycket tid och bespara dig massvis med huvudbry om du använder flexbox redan ifrån början.

	~~Nog med brasklappar, låt oss börja använda flexbox!~~

	== Flexbox ==		== Flexbox ==

PGJ: /* Att skapa en flexbehållare */

2019-10-19T09:59:49Z

Att skapa en flexbehållare

← Äldre version		Versionen från 19 oktober 2019 kl. 09.59
Rad 77:		Rad 77:

	Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:		Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:
	<codepen pen="OVePYW" height="~~440~~" tab="css,result">		<codepen pen="OVePYW" height="480" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.		Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.

PGJ: /* Att skapa en flexbehållare */

2019-10-19T09:59:35Z

Att skapa en flexbehållare

← Äldre version		Versionen från 19 oktober 2019 kl. 09.59
Rad 77:		Rad 77:

	Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:		Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:
	<codepen pen="OVePYW" height="~~240~~" tab="css,result">		<codepen pen="OVePYW" height="440" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.		Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.

PGJ: /* Demokod */

2019-10-19T09:58:53Z

Demokod

← Äldre version		Versionen från 19 oktober 2019 kl. 09.58
Rad 61:		Rad 61:
	== Demokod ==		== Demokod ==
	För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...		För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
	<codepen pen="WvqbWZ" height="~~650~~" tab="html,result">		<codepen pen="WvqbWZ" height="450" tab="html,result">
	</codepen>		</codepen>

PGJ den 19 oktober 2019 kl. 09.53

2019-10-19T09:53:52Z

← Äldre version		Versionen från 19 oktober 2019 kl. 09.53
Rad 4:		Rad 4:
	Vissa äldre webbläsare klarar inte av flexbox, vilket kan vara problematiskt. Om man vill vara säker på att supporta dessa gamla webbläsare, måste man därför vara noga med att koda sidan så att den ser "vettig" ut även om flexbox inte fungerar. Överhuvudtaget ska man alltid se till att ens sida fungerar så bra som möjligt även om slutanvändaren inte har samma webbläsare som en själv. Som vi ju konstaterat förut, kan det till och med vara som så att slutanvändaren har en icke-grafisk webbläsare.		Vissa äldre webbläsare klarar inte av flexbox, vilket kan vara problematiskt. Om man vill vara säker på att supporta dessa gamla webbläsare, måste man därför vara noga med att koda sidan så att den ser "vettig" ut även om flexbox inte fungerar. Överhuvudtaget ska man alltid se till att ens sida fungerar så bra som möjligt även om slutanvändaren inte har samma webbläsare som en själv. Som vi ju konstaterat förut, kan det till och med vara som så att slutanvändaren har en icke-grafisk webbläsare.

	Man kan med fördel gå till [https://caniuse.com Can I Use] för att se om en webbteknik har bra stöd eller ej. I skrivandes stund tycker den sajten att 95 % av alla webbläsare stödjer flexbox. Vilket väl är rätt så bra...		Man kan med fördel gå till [https://caniuse.com Can I Use] för att se om en webbteknik har bra stöd eller ej. I skrivandes stund tycker den sajten att 98 % av alla webbläsare stödjer flexbox. Vilket väl är rätt så bra...
	</div>		</div>

PGJ: /* Att skapa en flexbehållare */

2019-01-13T15:22:27Z

Att skapa en flexbehållare

← Äldre version		Versionen från 13 januari 2019 kl. 15.22
Rad 77:		Rad 77:

	Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:		Om vi lägger till ovanstående rad till vår exempelkod blir det att se ut så här:
	<codepen pen="OVePYW" height="~~200~~" tab="result">		<codepen pen="OVePYW" height="240" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.		Lägg märke till att lådorna nu samlas på en och samma rad. Vilket alltså är defaultbeteendet för flexboxar.

PGJ: /* Demokod */

2019-01-13T15:21:57Z

Demokod

@@ Rad 62: / Rad 62: @@
 För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
 <codepen pen="WvqbWZ" height="650" tab="html,result">
 </codepen>

PGJ: /* Demokod */

2019-01-13T15:21:32Z

Demokod

← Äldre version		Versionen från 13 januari 2019 kl. 15.21
Rad 61:		Rad 61:
	== Demokod ==		== Demokod ==
	För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...		För att kunna visa hur flexbox fungerar, behöver vi lite demokod som vi kan använda för att prova oss fram. Följande kod-exempel är en bra utgångspunkt...
	<codepen pen="WvqbWZ" height="650">		<codepen pen="WvqbWZ" height="650" tab="html,result">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>