Flexbox - sätta storlek - Versionshistorik

PGJ den 8 september 2022 kl. 06.50

2022-09-08T06:50:44Z

← Äldre version		Versionen från 8 september 2022 kl. 06.50
Rad 6:		Rad 6:

	<div class="well well-danger">		<div class="well well-danger">
	Här nedan presenteras storleksegenskaperna för flexelement var för sig. Det bästa är dock att sätta dem med [[samlingsegenskap]]en <code>flex</code>. Då får man vettigare defaultvärden som grund. Det är nämligen som så att de indviduella elementen har andra defaultvärden då de sätt individuellt än om man sätter dem med samlingsegenskapen. Vilket är rätt märkligt, men något som vi får leva med. Efter presentationen av de individuella egenskaperna, följer en ~~presenation~~ av samlingsegenskapen.		Här nedan presenteras storleksegenskaperna för flexelement var för sig. Det bästa är dock att sätta dem med [[samlingsegenskap]]en <code>flex</code>. Då får man vettigare defaultvärden som grund. Det är nämligen som så att de indviduella elementen har andra defaultvärden då de sätt individuellt än om man sätter dem med samlingsegenskapen. Vilket är rätt märkligt, men något som vi får leva med. Efter presentationen av de individuella egenskaperna, följer en presentation av samlingsegenskapen.
	</div><!-- end well -->		</div><!-- end well -->

PGJ: /* flex-basis */

2019-02-05T13:35:27Z

flex-basis

← Äldre version		Versionen från 5 februari 2019 kl. 13.35
Rad 15:		Rad 15:

	I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.		I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.
	<codepen pen="PPZYGa" tab="css,result" height="~~500~~">		<codepen pen="PPZYGa" tab="css,result" height="200">
	</codepen>		</codepen>

PGJ: /* flex-grow */

2019-02-05T13:35:05Z

flex-grow

← Äldre version		Versionen från 5 februari 2019 kl. 13.35
Rad 32:		Rad 32:

	Vad räknas som fritt utrymme? Här är ett exmpel:		Vad räknas som fritt utrymme? Här är ett exmpel:
	<codepen pen="EKWZjo" tab="result" height="200">		<codepen pen="EKWZjo" tab="css,result" height="200">
	</codepen>		</codepen>
	I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du tittar på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.		I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du tittar på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.

	I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.		I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.
	<codepen pen="YywKQY" tab="result" height="400">		<codepen pen="YywKQY" tab="css,result" height="400">
	</codepen>		</codepen>
	Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:		Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:
	<codepen pen="meVbwL" tab="result" height="450">		<codepen pen="meVbwL" tab="css,result" height="450">
	</codepen>		</codepen>
	Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.		Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.

	Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.		Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.
	<codepen pen="WQreOW" height="450" tab="result">		<codepen pen="WQreOW" height="450" tab="css,result">
	</codepen>		</codepen>

PGJ: /* flex-grow */

2019-02-05T13:33:47Z

flex-grow

← Äldre version		Versionen från 5 februari 2019 kl. 13.33
Rad 34:		Rad 34:
	<codepen pen="EKWZjo" tab="result" height="200">		<codepen pen="EKWZjo" tab="result" height="200">
	</codepen>		</codepen>
	I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du ~~klickar~~ på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.		I exemplet ovan, har vi tre flexelement som alla har <code>flex-basis: 10%;</code>. De fyller med andra ord upp 30 % av flexbehållaren. Detta gör att vi har 70 % fritt utrymme över. Om du tittar på "result"-fliken i exemplet ovan, så är den bit som visas som gul det fria utrymmet. Det är fördelningen av detta fria utrymme som <code>flex-grow</code> styr över.

	I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.		I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.

PGJ: /* flex-grow */

2019-01-29T07:03:40Z

flex-grow

← Äldre version		Versionen från 29 januari 2019 kl. 07.03
Rad 37:		Rad 37:

	I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.		I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.
	<codepen pen="YywKQY" tab="result" height="~~200~~">		<codepen pen="YywKQY" tab="result" height="400">
	</codepen>		</codepen>
	Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:		Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:
	<codepen pen="meVbwL" tab="result" height="~~250~~">		<codepen pen="meVbwL" tab="result" height="450">
	</codepen>		</codepen>
	Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.		Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.

	Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.		Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.
	<codepen pen="WQreOW" height="~~250~~" tab="result">		<codepen pen="WQreOW" height="450" tab="result">
	</codepen>		</codepen>

PGJ: /* flex-grow */

2019-01-29T07:03:12Z

flex-grow

← Äldre version		Versionen från 29 januari 2019 kl. 07.03
Rad 37:		Rad 37:

	I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.		I det enklaste fallet kanske vi har flexelement som alla har detta värde satt till <code>1</code>. Då kommer eventuellt fritt utrymme att fördelas med lika stor del till varje element. Vi modifierar det tidigare exemplet, så att det använder sig av <code>flex-grow</code>.
	<codepen pen="YywKQY" tab="result" height="~~600~~">		<codepen pen="YywKQY" tab="result" height="200">
	</codepen>		</codepen>
	Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:		Eftersom alla lådor har såväl samma <code>flex-basis</code> som <code>flex-grow</code> får vi alltså tre lådor som alla har samma bred. Men låt säga att låda a, skulle haft dubbelt så stor <code>flex-basis</code>, dvs dubbelt så stor grundbredd, då hade det blivit att se ut så här:
	<codepen pen="meVbwL" tab="result" height="~~650~~">		<codepen pen="meVbwL" tab="result" height="250">
	</codepen>		</codepen>
	Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.		Nu används 10 % + 10 % + 20 %, dvs 40 %, av flexbehållaren. Vi har 60 % fritt utrymme, detta fördelas på de tre lådorna, så att de får 20 % extra utrymme var. Låda a blir då något större än de övriga. Den får fortfarande lika stor del av det tillgängliga tomrummet, men den är något större i grunden.

	Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.		Vi fortsätter med en modifikation av grundexemplet. Vi har tre element med samma <code>flex-basis</code>. Av dessa har två <code>flex-grow: 1;</code>, medan de tredje har <code>flex-grow: 2;</code>. Det senare kommer då att få dubbelt så stor del av det fria utrymmet som de som har <code>1</code>.
	<codepen pen="WQreOW" height="~~650~~" tab="result">		<codepen pen="WQreOW" height="250" tab="result">
	</codepen>		</codepen>

PGJ: /* flex-basis */

2019-01-29T07:02:23Z

flex-basis

← Äldre version		Versionen från 29 januari 2019 kl. 07.02
Rad 15:		Rad 15:

	I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.		I följande exempel sätter vi att varje flexelement tar upp 10 % av flexbehållarens bredd. Detta är deras grundstorlek och den kan påverkas av övriga egenskaper som styr flex-elements storlek.
	<codepen pen="PPZYGa" tab="css" height="500">		<codepen pen="PPZYGa" tab="css,result" height="500">
	</codepen>		</codepen>

PGJ: /* Två värden */

2017-10-26T12:50:41Z

Två värden

← Äldre version		Versionen från 26 oktober 2017 kl. 12.50
Rad 81:		Rad 81:
	=== Två värden ===		=== Två värden ===
	; En måttenhet och en andel : Måttenheten anger <code>flex-basis</code>, medan andelen anger <code>flex-grow</code>. <code>flex-shrink</code> får defaultvärdet.		; En måttenhet och en andel : Måttenheten anger <code>flex-basis</code>, medan andelen anger <code>flex-grow</code>. <code>flex-shrink</code> får defaultvärdet.

	;Två andelar: Den första andelen kommer att tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>.		;Två andelar: Den första andelen kommer att tilldelas till <code>flex-grow</code>, medan den andra andelen tilldelas till <code>flex-shrink</code>.

PGJ: /* flex-shrink */

2016-10-26T10:11:53Z

flex-shrink

← Äldre version		Versionen från 26 oktober 2016 kl. 10.11
Rad 53:		Rad 53:

	== <code>[[flex-shrink]]</code> ==		== <code>[[flex-shrink]]</code> ==
	Det finns även en egenskap som anger hur elementet ska omformas om det finns för lite plats i flexbehållaren. I fallet med <code>[[flex-grow]]</code> angavs hur webbläsaren skulle fördela ~~överblivet~~ tomrum och använda detta till att göra flexinnehållet större. I fallet med <code>[[flex-shrink]]</code> anges hur ~~eventuellt överskjutande bredd~~ ska ~~fördelas för~~ att ~~krympa flexinnehållet~~ så att det får plats i flexbehållaren.		Det finns även en egenskap som anger hur elementet ska omformas om det finns för lite plats i flexbehållaren. I fallet med <code>[[flex-grow]]</code> angavs hur webbläsaren skulle fördela eventuellt tomrum och använda detta till att göra flexinnehållet större. I fallet med <code>[[flex-shrink]]</code> anges hur material som skulle hamnat utanför flexbehållaren ska hanteras. I detta fall kommer flexelement att krympas så att det får plats i flexbehållaren.

	Låt säga att vi har en flexbehållare vars innehåll sammanlagt går utanför behållaren med 20 %, då anger <code>[[flex-shrink]]</code> hur mycket de olika flexelement ska förminskas för att få plats med dessa 20 %. Egenskapens värde talar om hur stor andel av den överskjutande bredden, som ska dras ifrån varje element. Här följer ett exempel:		Låt säga att vi har en flexbehållare vars innehåll sammanlagt går utanför behållaren med 20 %, då anger <code>[[flex-shrink]]</code> hur mycket de olika flexelement ska förminskas för att få plats med dessa 20 %. Egenskapens värde talar om hur stor andel av den överskjutande bredden, som ska dras ifrån varje element. Här följer ett exempel:

PGJ: /* flex-grow */

2016-10-26T06:44:41Z

flex-grow

← Äldre version		Versionen från 26 oktober 2016 kl. 06.44
Rad 48:		Rad 48:
	</codepen>		</codepen>

	~~På liknande sätt kan~~ man ~~bygga~~ upp ~~en layout där man anger hur stor andel av~~ tillgängligt utrymme ~~varje sektion ska ta~~. Det ~~enklaste är~~ att sätta <code>flex-basis</code> till <code>0</code> ~~i såna fall~~. Då vet man att det "enda" som spelar in är proportionerna som anges i <code>flex-grow</code> och innehållets storlek tas ej med i beaktande. Om man använder sig av samlingsegenskapen <code>flex</code>, så sätts <code>flex-basis</code>-värdet automatiskt till <code>0</code>. Vilket är ett bra defaultvärde.		I vissa fall vill man att flexelementen ska sättas så att de tar upp allt tillgängligt utrymme och man bryr sig inte om några grundstorlekar. Det gör man genom att först sätta <code>flex-basis</code> till <code>0</code> och därefter ange vettiga värden till <code>flex-grow</code>. Då vet man att det "enda" som spelar in är proportionerna som anges i <code>flex-grow</code> och innehållets storlek tas ej med i beaktande.

			Om man använder sig av samlingsegenskapen <code>flex</code>, så sätts <code>flex-basis</code>-värdet automatiskt till <code>0</code>. Vilket är ett bra defaultvärde.

	== <code>[[flex-shrink]]</code> ==		== <code>[[flex-shrink]]</code> ==