Mer flexbox - Versionshistorik

PGJ: /* order */

2015-08-20T11:51:56Z

order

← Äldre version		Versionen från 20 augusti 2015 kl. 11.51
Rad 122:		Rad 122:

	== <code>order</code> ==		== <code>order</code> ==
	Vanligtvis placeras flexelement ut efter varandra, allt eftersom de är angivna i HTML-koden. Men om man vill lägga in innehållet i en annan ordning kan man använda sig av <code>order</code>. Egenskapen tar ett heltal som parameter, kan vara både 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.		[[Fil:Order.png]]

	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 ~~angivits~~ i HTML-koden.		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>. 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].		[http://exempel.webbling.se/flexbox8.html Exempel].
			<codepen pen="pJXejR" height="200" tab="result">
			</codepen>

	~~[[Fil:Order~~.~~png]]~~		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 ==		== Nästa aktivitet ==
	[[Att använda Flexbox]]		[[Att använda Flexbox]]

PGJ: /* wrap-reverse */

2015-08-20T11:39:01Z

wrap-reverse

← Äldre version		Versionen från 20 augusti 2015 kl. 11.39
Rad 114:		Rad 114:

	=== <code>wrap-reverse</code> ===		=== <code>wrap-reverse</code> ===
	~~Vid behov delas flexinnehållet ut över flera rader/kolumner. Som i föregående, fast innehåll som flödar över uppåt.~~		[[Fil:Flexwrapwrapreverse.png]]
	[~~http~~:~~//exempel~~.~~webbling.se/flexbox10.html Exempel~~].

	[~~[Fil~~:~~Flexwrapwrapreverse~~.~~png]~~]		Vid behov delas flexinnehållet ut över flera rader/kolumner. Som i föregående, fast innehåll som flödar över uppåt eller "baklänges". Det vill säga om vi har standard <code>flex-direction: row;</code> och raden inte räcker till, så kommer det att komma till en rad med innehåll ovanför nuvarande rad. [http://exempel.webbling.se/flexbox10.html Exempel].

			<codepen pen="jPjygq" height="250" tab="result">
			</codepen>

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

PGJ: /* wrap */

2015-08-20T11:27:41Z

wrap

← Äldre version		Versionen från 20 augusti 2015 kl. 11.27
Rad 106:		Rad 106:

	=== <code>wrap</code>===		=== <code>wrap</code>===
	Vid behov delas flexinnehållet ut över flera rader/kolumner. Om man har en flexbox av <code>row</code>-typen, kommer innehåll som flödar över att trilla ner på raden under. Det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[~~ltr]]</code>).~~		[[Fil:Flexwrapwrap.png]]
	[~~http~~:~~//exempel~~.~~webbling.se/flexbox9.html Exempel~~].

	[[~~Fil~~:~~Flexwrapwrap~~.~~png]~~]		Vid behov delas flexinnehållet ut över flera rader/kolumner. Detta innebär alltså att om man, t.ex. har boxar vars sammanlagda bred är större än flexboxen, så kommer de överskjutande boxarna att flyttas till en ny rad (eller kolumn). Om man har en flexbox av <code>row</code>-typen, kommer innehåll som flödar över att trilla ner på raden under. Det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[ltr]]</code>). [http://exempel.webbling.se/flexbox9.html Exempel].

			<codepen pen="pJXRXE" height="250" tab="result">
			</codepen>

	=== <code>wrap-reverse</code> ===		=== <code>wrap-reverse</code> ===

PGJ: /* nowrap */

2015-08-20T11:24:03Z

nowrap

← Äldre version		Versionen från 20 augusti 2015 kl. 11.24
Rad 101:		Rad 101:
	=== <code>nowrap</code> ===		=== <code>nowrap</code> ===
	Defaultvärdet. Allt innehåll samlas på samma rad/kolumn.		Defaultvärdet. Allt innehåll samlas på samma rad/kolumn.

			<codepen pen="PqrWEX" height="200" tab="result">
			</codepen>

	=== <code>wrap</code>===		=== <code>wrap</code>===
	Vid behov delas flexinnehållet ut över flera rader/kolumner. Om man har en flexbox av <code>row</code>-typen, kommer innehåll som flödar över att trilla ner på raden under. Det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[ltr]]</code>).		Vid behov delas flexinnehållet ut över flera rader/kolumner. Om man har en flexbox av <code>row</code>-typen, kommer innehåll som flödar över att trilla ner på raden under. Det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[ltr]]</code>).

PGJ: /* space-around */

2015-08-20T10:33:14Z

space-around

← Äldre version		Versionen från 20 augusti 2015 kl. 10.33
Rad 91:		Rad 91:

	=== <code>space-around</code> ===		=== <code>space-around</code> ===
	~~Flexelementen distribueras jämt längs med flexboxen med lika mycket mellan rum mellan varje element~~.		[[Fil:FlexboxJustifySpaceAround.png]]

	~~[[Fil:FlexboxJustifySpaceAround~~.~~png]]~~		Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element.
			<codepen pen="doBNZd" height="200" tab="result">
			</codepen>

	== <code>flex-wrap</code> ==		== <code>flex-wrap</code> ==

PGJ: /* space-between */

2015-08-20T10:31:30Z

space-between

← Äldre version		Versionen från 20 augusti 2015 kl. 10.31
Rad 84:		Rad 84:

	=== <code>space-between</code> ===		=== <code>space-between</code> ===
	~~Flexelementen distribueras jämt längs med flexboxen~~.		[[Fil:FlexboxJustifySpaceBetween.png]]

	~~[[Fil:FlexboxJustifySpaceBetween~~.~~png]]~~		Flexelementen distribueras jämt, längs med flexboxen.
			<codepen pen="waLgqO" height="200" tab="result">
			</codepen>

	=== <code>space-around</code> ===		=== <code>space-around</code> ===

PGJ: /* center */

2015-08-20T10:27:58Z

center

← Äldre version		Versionen från 20 augusti 2015 kl. 10.27
Rad 77:		Rad 77:

	=== <code>center</code> ===		=== <code>center</code> ===
			[[Fil:FlexboxJustifyCenter.png]]

	Allt flexmaterial centreras mot mitten av flexboxen.		Allt flexmaterial centreras mot mitten av flexboxen.
			<codepen pen="waLgqO" height="200" tab="result">
	~~[[Fil:FlexboxJustifyCenter.png]]~~		</codepen>

	=== <code>space-between</code> ===		=== <code>space-between</code> ===

PGJ: /* flex-end */

2015-08-20T10:25:15Z

flex-end

← Äldre version		Versionen från 20 augusti 2015 kl. 10.25
Rad 70:		Rad 70:

	=== <code>flex-end</code> ===		=== <code>flex-end</code> ===
			[[Fil:FlexboxJustifiedEnd.png]]

	Allt flexmaterial samlas i slutet av flexboxen.		Allt flexmaterial samlas i slutet av flexboxen.
			<codepen pen="KpjavK" height="200" tab="result">
	~~[[Fil:FlexboxJustifiedEnd.png]]~~		</codepen>

	=== <code>center</code> ===		=== <code>center</code> ===

PGJ: /* justify-content */

2015-08-20T10:24:26Z

justify-content

← Äldre version		Versionen från 20 augusti 2015 kl. 10.24
Rad 63:		Rad 63:
	Följande värden kan anges:		Följande värden kan anges:
	=== <code>flex-start</code> ===		=== <code>flex-start</code> ===
			[[Fil:FlexboxJustifyStart.png]]

	Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen.		Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen.
			<codepen pen="LVKxLz" height="200" tab="result">
	~~[[Fil:FlexboxJustifyStart.png]]~~		</codepen>

	=== <code>flex-end</code> ===		=== <code>flex-end</code> ===

PGJ: /* align-self */

2015-08-20T10:21:58Z

align-self

← Äldre version		Versionen från 20 augusti 2015 kl. 10.21
Rad 55:		Rad 55:
	== <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 default justeringen <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 [http://exempel.webbling.se/flexbox16.html detta exempel] är default justeringen <code>center</code>, medan låda tre har <code>align-self: flex-end</code>.
	<codepen pen="doBNWJ" height="~~250~~" tab="result">		<codepen pen="doBNWJ" height="200" tab="result">
	</codepen>		</codepen>