Flexbox - exempel - Versionshistorik

PGJ: /* Centrering */

2019-02-06T07:57:20Z

Centrering

← Äldre version		Versionen från 6 februari 2019 kl. 07.57
Rad 9:		Rad 9:
	<codepen pen="pJXebe" height="350" tab="css,result">		<codepen pen="pJXebe" height="350" tab="css,result">
	</codepen>		</codepen>
	~~<codepen pen="pJXebe" height="350" tab="result">~~
	~~</codepen>~~
	Ville vi bara justera i en ledd, kunde vi utelämnat motsvarande centreringsegenskap.		Ville vi bara justera i en ledd, kunde vi utelämnat motsvarande centreringsegenskap.

PGJ: /* Centrering */

2019-02-06T07:57:01Z

Centrering

← Äldre version		Versionen från 6 februari 2019 kl. 07.57
Rad 4:		Rad 4:

	Att centrera saker har i många fall varit problematiskt i [[CSS]]. Med flexbox är det mycket lätt att centrera saker. Låt säga att vi vill centrera en text i en box. Vi vill centrera både horisontellt och vertikalt. Vår HTML ser ut så här:		Att centrera saker har i många fall varit problematiskt i [[CSS]]. Med flexbox är det mycket lätt att centrera saker. Låt säga att vi vill centrera en text i en box. Vi vill centrera både horisontellt och vertikalt. Vår HTML ser ut så här:
	<codepen pen="pJXebe" height="350" tab="html~~,result~~">		<codepen pen="pJXebe" height="350" tab="html">
	</codepen>		</codepen>
	Vi behöver först slå igång flexbox för <code>div</code>-elementet, vilket man gör med <code>display: flex;</code>. Sen måste vi sätta såväl <code>align-items</code> och <code>justify-content</code> till <code>center</code>. Vår CSS blir att se ut som följer:		Vi behöver först slå igång flexbox för <code>div</code>-elementet, vilket man gör med <code>display: flex;</code>. Sen måste vi sätta såväl <code>align-items</code> och <code>justify-content</code> till <code>center</code>. Vår CSS blir att se ut som följer:

PGJ den 4 februari 2019 kl. 17.38

2019-02-04T17:38:56Z

← Äldre version		Versionen från 4 februari 2019 kl. 17.38
Rad 142:		Rad 142:
	</codepen>		</codepen>
	Här har vi fått en robust layout, som anpassar sig till olika skärmstorlekar. Allt detta utan att vi ansträngt oss speciellt mycket. Att få till detta, så att det funkat lika bra, med hjälp av "gamla" metoder skulle varit mycket mer jobbigt och hackigt.		Här har vi fått en robust layout, som anpassar sig till olika skärmstorlekar. Allt detta utan att vi ansträngt oss speciellt mycket. Att få till detta, så att det funkat lika bra, med hjälp av "gamla" metoder skulle varit mycket mer jobbigt och hackigt.

			== Övningar ==
			Gå gärna till [https://flexboxfroggy.com/#sv Flexbox Froggy] och gå igenom övningarna där!

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

PGJ: /* Layout i kolumner */

2019-01-29T07:06:30Z

Layout i kolumner

← Äldre version		Versionen från 29 januari 2019 kl. 07.06
Rad 63:		Rad 63:
	</codepen>		</codepen>
	[http://exempel.webbling.se/flexbox18.html Här] kan du se hur en något expanderad version av exemplet blir att se ut.		[http://exempel.webbling.se/flexbox18.html Här] kan du se hur en något expanderad version av exemplet blir att se ut.
	<codepen pen="eNwvdG" height="~~350~~" tab="result">		<codepen pen="eNwvdG" height="400" tab="result">
	</codepen>		</codepen>
	Den här layouten kommer att anpassas i storlek om du ändrar på webbläsarfönstret storlek.		Den här layouten kommer att anpassas i storlek om du ändrar på webbläsarfönstret storlek.

PGJ: /* Centrering */

2019-01-25T12:24:02Z

Centrering

@@ Rad 4: / Rad 4: @@
 Att centrera saker har i många fall varit problematiskt i [[CSS]]. Med flexbox är det mycket lätt att centrera saker. Låt säga att vi vill centrera en text i en box. Vi vill centrera både horisontellt och vertikalt. Vår HTML ser ut så här:
-<codepen pen="pJXebe" height="350" tab="html">
+<codepen pen="pJXebe" height="350" tab="html,result">
 </codepen>
 Vi behöver först slå igång flexbox för <code>div</code>-elementet, vilket man gör med <code>display: flex;</code>. Sen måste vi sätta såväl <code>align-items</code> och <code>justify-content</code> till <code>center</code>. Vår CSS blir att se ut som följer:
-<codepen pen="pJXebe" height="350" tab="css">
+<codepen pen="pJXebe" height="350" tab="css,result">
 </codepen>
 <codepen pen="pJXebe" height="350" tab="result">
 </codepen>

PGJ: /* Layout i kolumner */

2016-03-20T12:03:31Z

Layout i kolumner

← Äldre version		Versionen från 20 mars 2016 kl. 12.03
Rad 36:		Rad 36:
	== Layout i kolumner ==		== Layout i kolumner ==

	Som du kanske sett så bygger de flesta webbsajter på en layout där man har flera kolumner. Historiskt sett har det varit svårt att få till en bra kolumnlayout med HTML/CSS. Främst är det svårt att få till kolumner som har samma höjd. Med flexbox blir det dock lätt att få till en dylik layout. Vi provar att göra en layout med tre kolumner. På höger och vänster sida sätter vi smala kolumner och i mitten har vi en bredare layout. För de smala kolumnerna använder vi oss av <code>[[aside]]</code>, som är HTML-kommandot för saker som marginellt hör till innehållet och som inte är central och superviktigt (ofta har man saker som reklam och navigation i dessa kolumner). Mittenkolumnen sätter vi med <code>[[main]]</code> eftersom det ska vara huvudinnehållet.		Som du kanske sett så bygger de flesta webbsajter på en layout där man har flera kolumner. Historiskt sett har det varit svårt att få till en bra kolumnlayout med HTML/CSS. Främst är det svårt att få till kolumner som har samma höjd. Med flexbox blir det dock lätt att få till en dylik layout.

			Vi provar att göra en layout med tre kolumner. På höger och vänster sida sätter vi smala kolumner och i mitten har vi en bredare layout. För de smala kolumnerna använder vi oss av <code>[[aside]]</code>, som är HTML-kommandot för saker som marginellt hör till innehållet och som inte är central och superviktigt (ofta har man saker som reklam och navigation i dessa kolumner). Mittenkolumnen sätter vi med <code>[[main]]</code> eftersom det ska vara huvudinnehållet.

	Så här skulle koden kunna att bli och se ut, vi börjar med HTML:		Så här skulle koden kunna att bli och se ut, vi börjar med HTML:

PGJ: /* Centrering */

2016-03-20T12:02:49Z

Centrering

← Äldre version		Versionen från 20 mars 2016 kl. 12.02
Rad 32:		Rad 32:
	<codepen pen="pJXebe" height="350" tab="result">		<codepen pen="pJXebe" height="350" tab="result">
	</codepen>		</codepen>
	Ville vi bara justera i en ledd, kunde vi utelämnat motsvarande ~~centrerings-CSS-egenskap~~.		Ville vi bara justera i en ledd, kunde vi utelämnat motsvarande centreringsegenskap.

	== Layout i kolumner ==		== Layout i kolumner ==

PGJ: /* Kolumner samt sid-huvud och -fot */

2016-01-19T09:48:10Z

Kolumner samt sid-huvud och -fot

← Äldre version		Versionen från 19 januari 2016 kl. 09.48
Rad 120:		Rad 120:
	</codepen>		</codepen>
	CSS:en för att få till det hela blir att se ut så här:		CSS:en för att få till det hela blir att se ut så här:
	<codepen pen="pJXeRP" height="~~650~~" tab="css">		<codepen pen="pJXeRP" height="700" tab="css">
	<syntaxhighlight lang="css">		<syntaxhighlight lang="css">
	body {		body {
Rad 158:		Rad 158:

	[http://exempel.webbling.se/flexbox19.html Här] kan du se hur en något förbättrad version av exemplet blir att se ut.		[http://exempel.webbling.se/flexbox19.html Här] kan du se hur en något förbättrad version av exemplet blir att se ut.
	<codepen pen="pJXeRP" height="~~250~~" tab="result">		<codepen pen="pJXeRP" height="300" tab="result">
	</codepen>		</codepen>
	Här har vi fått en robust layout, som anpassar sig till olika skärmstorlekar. Allt detta utan att vi ansträngt oss speciellt mycket. Att få till detta, så att det funkat lika bra, med hjälp av "gamla" metoder skulle varit mycket mer jobbigt och hackigt.		Här har vi fått en robust layout, som anpassar sig till olika skärmstorlekar. Allt detta utan att vi ansträngt oss speciellt mycket. Att få till detta, så att det funkat lika bra, med hjälp av "gamla" metoder skulle varit mycket mer jobbigt och hackigt.

PGJ: /* Kolumner samt sid-huvud och -fot */

2016-01-19T09:47:45Z

Kolumner samt sid-huvud och -fot

← Äldre version		Versionen från 19 januari 2016 kl. 09.47
Rad 89:		Rad 89:

	Förutom en kolumnlayout har de flesta webbsajter även ett sidhuvud och en sidfot. Det finns lite olika sätt på vilket vi kan lösa detta. Ett enkelt sätt är att kombinera två flexboxar, en kolumn- och en rad-box. Så här kan HTML-koden se ut:		Förutom en kolumnlayout har de flesta webbsajter även ett sidhuvud och en sidfot. Det finns lite olika sätt på vilket vi kan lösa detta. Ett enkelt sätt är att kombinera två flexboxar, en kolumn- och en rad-box. Så här kan HTML-koden se ut:
	<codepen pen="pJXeRP" height="~~650~~" tab="html">		<codepen pen="pJXeRP" height="700" tab="html">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>

PGJ: /* Kolumner samt sid-huvud och -fot */

2016-01-19T09:47:32Z

Kolumner samt sid-huvud och -fot

← Äldre version		Versionen från 19 januari 2016 kl. 09.47
Rad 89:		Rad 89:

	Förutom en kolumnlayout har de flesta webbsajter även ett sidhuvud och en sidfot. Det finns lite olika sätt på vilket vi kan lösa detta. Ett enkelt sätt är att kombinera två flexboxar, en kolumn- och en rad-box. Så här kan HTML-koden se ut:		Förutom en kolumnlayout har de flesta webbsajter även ett sidhuvud och en sidfot. Det finns lite olika sätt på vilket vi kan lösa detta. Ett enkelt sätt är att kombinera två flexboxar, en kolumn- och en rad-box. Så här kan HTML-koden se ut:
	<codepen pen="pJXeRP" height="~~600~~" tab="html">		<codepen pen="pJXeRP" height="650" tab="html">
	<syntaxhighlight lang="html5">		<syntaxhighlight lang="html5">
	<!DOCTYPE html>		<!DOCTYPE html>