Flexbox - byta ordning - Versionshistorik

PGJ: /* order */

2019-01-29T07:06:03Z

order

← Äldre version		Versionen från 29 januari 2019 kl. 07.06
Rad 9:		Rad 9:

	[http://exempel.webbling.se/flexbox8.html Exempel].		[http://exempel.webbling.se/flexbox8.html Exempel].
	<codepen pen="pJXejR" height="~~200~~" tab="result">		<codepen pen="pJXejR" height="300" tab="css,result">
	</codepen>		</codepen>

PGJ: /* Varför skulle man vilja byta ordning? */

2016-03-20T11:58:42Z

Varför skulle man vilja byta ordning?

← Äldre version		Versionen från 20 mars 2016 kl. 11.58
Rad 14:		Rad 14:
	== Varför skulle man vilja byta ordning? ==		== Varför skulle man vilja byta ordning? ==

	Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!		Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!

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

PGJ den 20 mars 2016 kl. 11.57

2016-03-20T11:57:13Z

← Äldre version		Versionen från 20 mars 2016 kl. 11.57
Rad 1:		Rad 1:
	Vanligtvis placeras flexelement ut efter varandra, ~~allt eftersom~~ de är angivna i HTML-koden. Detta är ju även beteendet som vanliga <code>div</code>-boxar har som standard. Men med flexbox kan man välja i vilken ordning saker ska läggas ut. Man använder sig då av <code>order</code>.		Vanligtvis placeras flexelement ut efter varandra, allteftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga <code>div</code>-boxar har som standard. Men med flexbox kan man välja i vilken ordning saker ska läggas ut. Man använder sig då av <code>order</code>.

	== <code>order</code> ==		== <code>order</code> ==

PGJ den 18 januari 2016 kl. 21.35

2016-01-18T21:35:59Z

← Äldre version		Versionen från 18 januari 2016 kl. 21.35
Rad 2:		Rad 2:

	== <code>order</code> ==		== <code>order</code> ==
	~~<div class="well">~~
	[[Fil:Order.png]]		[[Fil:Order.png]]

Rad 12:		Rad 11:
	<codepen pen="pJXejR" height="200" tab="result">		<codepen pen="pJXejR" height="200" tab="result">
	</codepen>		</codepen>
	~~</div>~~
	== Varför skulle man vilja byta ordning? ==		== Varför skulle man vilja byta ordning? ==
	~~<div class="well">~~
	Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!		Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!
	~~</div>~~
	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[Flexbox - exempel]]		[[Flexbox - exempel]]

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

			__FORCETOC__

PGJ: /* Nästa aktivitet */

2016-01-03T12:00:01Z

Nästa aktivitet

← Äldre version		Versionen från 3 januari 2016 kl. 12.00
Rad 19:		Rad 19:
	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[Flexbox - exempel]]		[[Flexbox - exempel]]

			[[Category:Webbutveckling]]

PGJ den 13 september 2015 kl. 19.00

2015-09-13T19:00:14Z

← Äldre version		Versionen från 13 september 2015 kl. 19.00
Rad 2:		Rad 2:

	== <code>order</code> ==		== <code>order</code> ==
			<div class="well">
	[[Fil:Order.png]]		[[Fil:Order.png]]

Rad 11:		Rad 12:
	<codepen pen="pJXejR" height="200" tab="result">		<codepen pen="pJXejR" height="200" tab="result">
	</codepen>		</codepen>
			</div>
	== Varför skulle man vilja byta ordning? ==		== Varför skulle man vilja byta ordning? ==
			<div class="well">
	Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!		Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!
			</div>
	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[Flexbox - exempel]]		[[Flexbox - exempel]]

PGJ: /* Nästa aktivitet */

2015-08-28T13:27:07Z

Nästa aktivitet

← Äldre version		Versionen från 28 augusti 2015 kl. 13.27
Rad 17:		Rad 17:

	== Nästa aktivitet ==		== Nästa aktivitet ==
	[[~~Att använda~~ Flexbox]]		[[Flexbox - exempel]]

PGJ: Skapade sidan med 'Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga `div`-boxar har som standard....'

2015-08-25T13:18:21Z

Skapade sidan med 'Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga <code>div</code>-boxar har som standard....'

Ny sida

Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga <code>div</code>-boxar har som standard. Men med flexbox kan man välja i vilken ordning saker ska läggas ut. Man använder sig då av <code>order</code>.

== <code>order</code> ==
[[Fil:Order.png]]

Egenskapen tar ett heltal som parameter. Talet kan vara antingen positivt och negativt. De element som har lägst <code>order</code>-nummer kommer att placeras först, följt av de med allt högre <code>order</code>-nummer. Så de placeras alltså ut i stigande ordning, med start ifrån den lägst numrerade.

Lägg märke till att man kan ha flera element som har samma <code>order</code>-nummer. De kommer då att placeras tillsammans som en grupp, där deras inbördes ordning bestäms av den ordning elementen dyker upp i HTML-koden.

[http://exempel.webbling.se/flexbox8.html Exempel].
<codepen pen="pJXejR" height="200" tab="result">
</codepen>

== Varför skulle man vilja byta ordning? ==

Varför skulle man då vilja använda sig av detta? Låt säga att vi ha en sida som visas lite olika beroende på vilken storlek på skärmen slutanvändaren har. Vi kanske vill ha jättestor layout för den som sitter på desktopen på en PC, medan den som har en pytteliten telefonskärm ska se en koncisare vy. Låt säga att våra annonser ligger på sidorna om huvudmaterialet i PC-vyn, medan de ligger sist i telefonvyn. Vi kan då sätta upp CSS-regler som styr om vilka boxar som ska hamna på vilken plats och med hjälp av <code>order</code> kan vi göra detta utan att behöva förändra HTML-koden på något vis!

== Nästa aktivitet ==
[[Att använda Flexbox]]

Flexbox - byta ordning - Versionshistorik

PGJ: /* order */

PGJ: /* Varför skulle man vilja byta ordning? */

PGJ den 20 mars 2016 kl. 11.57

PGJ den 18 januari 2016 kl. 21.35

PGJ: /* Nästa aktivitet */

PGJ den 13 september 2015 kl. 19.00

PGJ: /* Nästa aktivitet */

PGJ: Skapade sidan med 'Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga div-boxar har som standard....'

PGJ: Skapade sidan med 'Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Detta är ju även beteendet som vanliga `div`-boxar har som standard....'