Flexbox - flexbehållare med flera rader - Versionshistorik

PGJ: /* nowrap */

2019-01-25T13:24:11Z

nowrap

← Äldre version		Versionen från 25 januari 2019 kl. 13.24
Rad 6:		Rad 6:
	=== <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. I exemplet har <code>flex-shrink</code> satts till <code>0</code>, dvs elementen kommer inte att krympas ned om de skulle hamna utanför flexboxen.

	<codepen pen="PqrWEX" height="300" tab="css,result">		<codepen pen="PqrWEX" height="300" tab="css,result">

2019-01-25T13:14:41Z

wrap

← Äldre version		Versionen från 25 januari 2019 kl. 13.14
Rad 16:		Rad 16:

	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. Default är att det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[ltr]]</code>). Detta beteende går dock att styra, vilket vi återkommer till i nästa sektion.		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. Default är att det nya innehållet börjar ifrån vänster kant (det lyder eventuell <code>[[rtl]]</code>/<code>[[ltr]]</code>). Detta beteende går dock att styra, vilket vi återkommer till i nästa sektion.
	~~[http://exempel.webbling.se/flexbox9.html Exempel].~~

	<codepen pen="pJXRXE" height="300" tab="css,result">		<codepen pen="pJXRXE" height="300" tab="css,result">

2019-01-25T13:14:28Z

wrap-reverse

← Äldre version		Versionen från 25 januari 2019 kl. 13.14
Rad 25:		Rad 25:
	[[Fil:Flexwrapwrapreverse.png]]		[[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]~~.		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.

	<codepen pen="jPjygq" height="300" tab="result">		<codepen pen="jPjygq" height="300" tab="css,result">
	</codepen>		</codepen>

2019-01-25T13:14:09Z

wrap

← Äldre version		Versionen från 25 januari 2019 kl. 13.14
Rad 18:		Rad 18:
	[http://exempel.webbling.se/flexbox9.html Exempel].		[http://exempel.webbling.se/flexbox9.html Exempel].

	<codepen pen="pJXRXE" height="300" tab="result">		<codepen pen="pJXRXE" height="300" tab="css,result">
	</codepen>		</codepen>

2019-01-25T13:14:00Z

nowrap

← Äldre version		Versionen från 25 januari 2019 kl. 13.14
Rad 8:		Rad 8:
	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="css,result">		<codepen pen="PqrWEX" height="300" tab="css,result">
	</codepen>		</codepen>

2019-01-25T13:13:39Z

nowrap

← Äldre version		Versionen från 25 januari 2019 kl. 13.13
Rad 8:		Rad 8:
	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 pen="PqrWEX" height="200" tab="css,result">
	</codepen>		</codepen>

2016-03-20T11:54:49Z

Nästa aktivitet

← Äldre version		Versionen från 20 mars 2016 kl. 11.54
Rad 31:		Rad 31:

	== Nästa aktivitet ==		== Nästa aktivitet ==
			Vi vill ju även kunna bestämma hur flexinnehållet ska placeras ut när det fördelas över flera rader. För det har vi egenskapen <code>align-content</code> och den kommer vi att titta på i nästa sektion...

	[[Flexbox - justering av flexinnehåll som ligger på flera rader]]		[[Flexbox - justering av flexinnehåll som ligger på flera rader]]

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

2016-03-20T11:54:31Z

wrap-reverse

← Äldre version		Versionen från 20 mars 2016 kl. 11.54
Rad 29:		Rad 29:
	<codepen pen="jPjygq" height="300" tab="result">		<codepen pen="jPjygq" height="300" tab="result">
	</codepen>		</codepen>

	Vi vill ju även kunna bestämma hur flexinnehållet ska placeras ut när det fördelas över flera rader. För det har vi egenskapen <code>align-content</code> och den kommer vi att titta på i nästa sektion...

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

2016-03-20T11:54:13Z

wrap

← Äldre version		Versionen från 20 mars 2016 kl. 11.54
Rad 18:		Rad 18:
	[http://exempel.webbling.se/flexbox9.html Exempel].		[http://exempel.webbling.se/flexbox9.html Exempel].

	<codepen pen="pJXRXE" height="~~275~~" tab="result">		<codepen pen="pJXRXE" height="300" tab="result">
	</codepen>		</codepen>

2016-03-20T11:54:00Z

wrap-reverse

← Äldre version		Versionen från 20 mars 2016 kl. 11.54
Rad 27:		Rad 27:
	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].		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="~~275~~" tab="result">		<codepen pen="jPjygq" height="300" tab="result">
	</codepen>		</codepen>