Flexbox - styra layoutflödet längs korsaxeln - Versionshistorik

PGJ den 8 september 2022 kl. 07.03

2022-09-08T07:03:10Z

← Äldre version		Versionen från 8 september 2022 kl. 07.03
Rad 54:		Rad 54:
	Välj "Edit on CodePen" för att göra övningarna där.		Välj "Edit on CodePen" för att göra övningarna där.

	=== ~~Flexövning~~ 1 ===		=== Övning 1 ===
	Ändra så att alla flexelement hamnar sist på flexaxeln.		Ändra så att alla flexelement hamnar sist på flexaxeln.
	<codepen pen="NwKMNj" height="300" tab="result">		<codepen pen="NwKMNj" height="300" tab="result">
	</codepen>		</codepen>

	=== ~~Flexövning~~ 2 ===		=== Övning 2 ===
	Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.		Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
	<codepen pen="MOgGOB" height="300" tab="result">		<codepen pen="MOgGOB" height="300" tab="result">

PGJ den 8 september 2022 kl. 07.01

2022-09-08T07:01:58Z

← Äldre version		Versionen från 8 september 2022 kl. 07.01
Rad 54:		Rad 54:
	Välj "Edit on CodePen" för att göra övningarna där.		Välj "Edit on CodePen" för att göra övningarna där.

	* Ändra så att alla flexelement hamnar sist på flexaxeln.		=== Flexövning 1 ===
			Ändra så att alla flexelement hamnar sist på flexaxeln.
	<codepen pen="NwKMNj" height="300" tab="result">		<codepen pen="NwKMNj" height="300" tab="result">
	</codepen>		</codepen>

	* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.		=== Flexövning 2 ===
			Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
	<codepen pen="MOgGOB" height="300" tab="result">		<codepen pen="MOgGOB" height="300" tab="result">
	</codepen>		</codepen>

PGJ den 8 september 2022 kl. 06.59

2022-09-08T06:59:14Z

← Äldre version		Versionen från 8 september 2022 kl. 06.59
Rad 11:		Rad 11:
	Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.		Allt flexmaterial justeras mot starten på flexboxen. Det vill säga det som har <code>flex-direction: row;</code> justeras mot "toppen" på flexboxen, medan det som har <code>flex-direction: column;</code> justeras mot vänstermarginalen.

	~~[http://exempel.webbling.se/flexbox11.html Exempel].~~
	<codepen pen="zGVNvq" height="500" tab="css,result">		<codepen pen="zGVNvq" height="500" tab="css,result">
	</codepen>		</codepen>

PGJ den 8 september 2022 kl. 06.58

2022-09-08T06:58:50Z

← Äldre version		Versionen från 8 september 2022 kl. 06.58
Rad 18:		Rad 18:
	[[Fil:AlignItemsFlexEnd.png]]		[[Fil:AlignItemsFlexEnd.png]]

	Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten~~. [http://exempel.webbling.se/flexbox12.html Exempel]~~.		Allt flexmaterial justeras mot slutet av flexboxen. Om man t.ex. har <code>flex-direction: row</code> blir detta mot botten.

	<codepen pen="MwMJjY" height="500" tab="css,result">		<codepen pen="MwMJjY" height="500" tab="css,result">
Rad 26:		Rad 26:
	[[Fil:AlignItemsCenter.png]]		[[Fil:AlignItemsCenter.png]]

	Allt flexmaterial centerjusteras mot flexboxens mitt~~. [http://exempel.webbling.se/flexbox13.html Exempel]~~.		Allt flexmaterial centerjusteras mot flexboxens mitt.

	<codepen pen="waLgzR" height="500" tab="css,result">		<codepen pen="waLgzR" height="500" tab="css,result">
Rad 34:		Rad 34:
	[[Fil:AlignItemsStretch.png]]		[[Fil:AlignItemsStretch.png]]

	Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser~~. [http://exempel.webbling.se/flexbox14.html Exempel]~~.		Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser.

	<codepen pen="JdQEbN" height="500" tab="css,result">		<codepen pen="JdQEbN" height="500" tab="css,result">
Rad 42:		Rad 42:
	[[Fil:AlignItemsBaseline.png]]		[[Fil:AlignItemsBaseline.png]]

	Allt flexmaterial centreras så att deras [[baseline\|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet~~. [http://exempel.webbling.se/flexbox15.html Exempel]~~.		Allt flexmaterial centreras så att deras [[baseline\|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet.

	<codepen pen="BNgpWv" height="200" tab="css,result">		<codepen pen="BNgpWv" height="200" tab="css,result">

PGJ: /* Övningar */

2019-01-29T07:05:26Z

Övningar

← Äldre version		Versionen från 29 januari 2019 kl. 07.05
Rad 56:		Rad 56:

	* Ändra så att alla flexelement hamnar sist på flexaxeln.		* Ändra så att alla flexelement hamnar sist på flexaxeln.
	<codepen pen="NwKMNj" height="~~200~~" tab="result">		<codepen pen="NwKMNj" height="300" tab="result">
	</codepen>		</codepen>

	* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.		* Ändra så att alla flexelement ligger centrerade, förutom det första som ska ligga i starten och det sista som ska ligga i slutet.
	<codepen pen="MOgGOB" height="~~200~~" tab="result">		<codepen pen="MOgGOB" height="300" tab="result">
	</codepen>		</codepen>

PGJ: /* align-self */

2019-01-29T07:05:16Z

align-self

← Äldre version		Versionen från 29 januari 2019 kl. 07.05
Rad 49:		Rad 49:
	== <code>align-self</code> ==		== <code>align-self</code> ==
	Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.		Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
	<codepen pen="doBNWJ" height="~~200~~" tab="css,result">		<codepen pen="doBNWJ" height="300" tab="css,result">
	</codepen>		</codepen>

PGJ: /* align-self */

2019-01-29T07:05:03Z

align-self

← Äldre version		Versionen från 29 januari 2019 kl. 07.05
Rad 48:		Rad 48:

	== <code>align-self</code> ==		== <code>align-self</code> ==
	Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I ~~[http://exempel.webbling.se/flexbox16.html~~ detta exempel] är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.		Om man vill att en specifik flexelement ska ha en annan justering än övriga element i flexboxen, kan man sätta det med hjälp av <code>align-self</code>. Parametrarna till egenskapen fungerar precis som med <code>align-items</code>, förutom att det enbart sätts på de element som CSS-regeln väljer ut. I detta exempel är defaultjusteringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
	<codepen pen="doBNWJ" height="200" tab="result">		<codepen pen="doBNWJ" height="200" tab="css,result">
	</codepen>		</codepen>

PGJ: /* baseline */

2019-01-29T07:04:42Z

baseline

← Äldre version		Versionen från 29 januari 2019 kl. 07.04
Rad 44:		Rad 44:
	Allt flexmaterial centreras så att deras [[baseline\|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet. [http://exempel.webbling.se/flexbox15.html Exempel].		Allt flexmaterial centreras så att deras [[baseline\|baslinje]] ligger på samma nivå. Speciellt användbart om man har olika textstorlek i flexmaterialet. [http://exempel.webbling.se/flexbox15.html Exempel].

	<codepen pen="BNgpWv" height="200" tab="result">		<codepen pen="BNgpWv" height="200" tab="css,result">
	</codepen>		</codepen>

PGJ: /* stretch */

2019-01-29T07:04:33Z

stretch

← Äldre version		Versionen från 29 januari 2019 kl. 07.04
Rad 36:		Rad 36:
	Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser. [http://exempel.webbling.se/flexbox14.html Exempel].		Detta är defaultvärdet. Flexinnehållet sträcks ut så att det fyller upp hela flexboxen ifrån topp till botten. Dock tar webbläsaren eventuella <code>height</code>/<code>max-height</code> och <code>width</code>/<code>max-width</code>, i beaktande och om dessa är angivna kommer flexinnehållet enbart att stretchas så de håller sig inom dessa gränser. [http://exempel.webbling.se/flexbox14.html Exempel].

	<codepen pen="JdQEbN" height="500" tab="result">		<codepen pen="JdQEbN" height="500" tab="css,result">
	</codepen>		</codepen>

PGJ: /* center */

2019-01-29T07:04:20Z

center

← Äldre version		Versionen från 29 januari 2019 kl. 07.04
Rad 28:		Rad 28:
	Allt flexmaterial centerjusteras mot flexboxens mitt. [http://exempel.webbling.se/flexbox13.html Exempel].		Allt flexmaterial centerjusteras mot flexboxens mitt. [http://exempel.webbling.se/flexbox13.html Exempel].

	<codepen pen="waLgzR" height="500" tab="result">		<codepen pen="waLgzR" height="500" tab="css,result">
	</codepen>		</codepen>