Flexbox - sätta riktning - Versionshistorik

PGJ den 4 september 2020 kl. 21.01

2020-09-04T21:01:30Z

← Äldre version		Versionen från 4 september 2020 kl. 21.01
Rad 1:		Rad 1:
	Vi kanske inte alltid vill att flexboxarna ska samlas på rad. Det finns flera olika sätt på vilka vi kan styra i vilken riktning webbläsaren ska placera ut flexboxarna.		Vi kanske inte alltid vill att flexboxarna ska samlas på en och samma rad. Det finns flera olika sätt på vilka vi kan styra i vilken riktning webbläsaren ska placera ut flexboxarna.

	== Att ange flexriktning ==		== Att ange flexriktning ==

PGJ: /* row-reverse */

2019-10-19T10:01:20Z

row-reverse

← Äldre version		Versionen från 19 oktober 2019 kl. 10.01
Rad 22:		Rad 22:

	Här följer ett exempel.		Här följer ett exempel.
	<codepen pen="bdPNXr" height="~~175~~" tab="css,result">		<codepen pen="bdPNXr" height="200" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att lådorna även placeras med "motsatt" kant som utgångspunkt och att de är utsatta i "omvänd" ordning.		Lägg märke till att lådorna även placeras med "motsatt" kant som utgångspunkt och att de är utsatta i "omvänd" ordning.

	Här är samma exempel som ovan, med skillnaden att vi satt <code>direction</code> till <code>rtl</code>.		Här är samma exempel som ovan, med skillnaden att vi satt <code>direction</code> till <code>rtl</code>.
	<codepen pen="PNpZBE" height="~~175~~" tab="css,result">		<codepen pen="PNpZBE" height="200" tab="css,result">
	</codepen>		</codepen>
	Detta gör alltså att flexaxeln börjar ifrån vänster och växer mot höger. Vår omvända flexaxel är alltså omvänd i förhållande till den riktning texten ska skrivas i vårt dokument. Vår layout kommer alltså automatiskt att anpassas beroende på vilket språk som gäller för flexbehållaren.		Detta gör alltså att flexaxeln börjar ifrån vänster och växer mot höger. Vår omvända flexaxel är alltså omvänd i förhållande till den riktning texten ska skrivas i vårt dokument. Vår layout kommer alltså automatiskt att anpassas beroende på vilket språk som gäller för flexbehållaren.

PGJ: /* row */

2019-10-19T10:00:30Z

row

← Äldre version		Versionen från 19 oktober 2019 kl. 10.00
Rad 9:		Rad 9:

	Exempel på en flexbox där vi har "normal" riktning på texten.		Exempel på en flexbox där vi har "normal" riktning på texten.
	<codepen pen="QbXwXa" height="~~200~~" tab="css,result">		<codepen pen="QbXwXa" height="250" tab="css,result">
	</codepen>		</codepen>
	Här är samma flexbox med skillnaden att textens <code>[[direction]]</code> är satt till <code>rtl</code>.		Här är samma flexbox med skillnaden att textens <code>[[direction]]</code> är satt till <code>rtl</code>.
	<codepen pen="mPWVKw" height="~~200~~" tab="css,result">		<codepen pen="mPWVKw" height="250" tab="css,result">
	</codepen>		</codepen>
	Innehållet läggs alltså ut i omvänd riktning när <code>[[rtl]]</code> gäller. Lägg även märke till att textens placerings även den påverkas av <code>[[rtl]]</code>.		Innehållet läggs alltså ut i omvänd riktning när <code>[[rtl]]</code> gäller. Lägg även märke till att textens placerings även den påverkas av <code>[[rtl]]</code>.

PGJ: /* column-reverse */

2019-02-05T13:24:54Z

column-reverse

← Äldre version		Versionen från 5 februari 2019 kl. 13.24
Rad 44:		Rad 44:

	Liksom med <code>row</code>, finns det även variant för kolumner där vi vänder på flexaxeln. Detta anges med <code>column-reverse</code>. Skillnaden blir att elementen utgår ifrån flexbehållarens botten och att elementen placeras ovanför varje föregående element. [http://exempel.webbling.se/flexbox6.html Exempel]		Liksom med <code>row</code>, finns det även variant för kolumner där vi vänder på flexaxeln. Detta anges med <code>column-reverse</code>. Skillnaden blir att elementen utgår ifrån flexbehållarens botten och att elementen placeras ovanför varje föregående element. [http://exempel.webbling.se/flexbox6.html Exempel]
	<codepen pen="NqZqKa" height="500" tab="result">		<codepen pen="NqZqKa" height="500" tab="css,result">
	</codepen>		</codepen>

PGJ: /* column */

2019-02-05T13:23:47Z

column

← Äldre version		Versionen från 5 februari 2019 kl. 13.23
Rad 37:		Rad 37:

	Ett exempel på detta:		Ett exempel på detta:
	<codepen pen="qdzEee" height="300" tab="result">		<codepen pen="qdzEee" height="300" tab="css,result">
	</codepen>		</codepen>

PGJ: /* row-reverse */

2019-02-05T13:20:27Z

row-reverse

← Äldre version		Versionen från 5 februari 2019 kl. 13.20
Rad 27:		Rad 27:

	Här är samma exempel som ovan, med skillnaden att vi satt <code>direction</code> till <code>rtl</code>.		Här är samma exempel som ovan, med skillnaden att vi satt <code>direction</code> till <code>rtl</code>.
	<codepen pen="PNpZBE" height="175" tab="result">		<codepen pen="PNpZBE" height="175" tab="css,result">
	</codepen>		</codepen>
	Detta gör alltså att flexaxeln börjar ifrån vänster och växer mot höger. Vår omvända flexaxel är alltså omvänd i förhållande till den riktning texten ska skrivas i vårt dokument. Vår layout kommer alltså automatiskt att anpassas beroende på vilket språk som gäller för flexbehållaren.		Detta gör alltså att flexaxeln börjar ifrån vänster och växer mot höger. Vår omvända flexaxel är alltså omvänd i förhållande till den riktning texten ska skrivas i vårt dokument. Vår layout kommer alltså automatiskt att anpassas beroende på vilket språk som gäller för flexbehållaren.

PGJ: /* row-reverse */

2019-02-05T13:20:05Z

row-reverse

← Äldre version		Versionen från 5 februari 2019 kl. 13.20
Rad 22:		Rad 22:

	Här följer ett exempel.		Här följer ett exempel.
	<codepen pen="bdPNXr" height="175" tab="result">		<codepen pen="bdPNXr" height="175" tab="css,result">
	</codepen>		</codepen>
	Lägg märke till att lådorna även placeras med "motsatt" kant som utgångspunkt och att de är utsatta i "omvänd" ordning.		Lägg märke till att lådorna även placeras med "motsatt" kant som utgångspunkt och att de är utsatta i "omvänd" ordning.

PGJ: /* row */

2019-01-09T20:22:09Z

row

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

	Exempel på en flexbox där vi har "normal" riktning på texten.		Exempel på en flexbox där vi har "normal" riktning på texten.
	<codepen pen="QbXwXa" height="~~150~~" tab="result">		<codepen pen="QbXwXa" height="200" tab="css,result">
	</codepen>		</codepen>
	Här är samma flexbox med skillnaden att textens <code>[[direction]]</code> är satt till <code>rtl</code>.		Här är samma flexbox med skillnaden att textens <code>[[direction]]</code> är satt till <code>rtl</code>.
	<codepen pen="mPWVKw" height="~~150~~" tab="result">		<codepen pen="mPWVKw" height="200" tab="css,result">
	</codepen>		</codepen>
	Innehållet läggs alltså ut i omvänd riktning när <code>[[rtl]]</code> gäller. Lägg även märke till att textens placerings även den påverkas av <code>[[rtl]]</code>.		Innehållet läggs alltså ut i omvänd riktning när <code>[[rtl]]</code> gäller. Lägg även märke till att textens placerings även den påverkas av <code>[[rtl]]</code>.

PGJ den 9 januari 2019 kl. 20.18

2019-01-09T20:18:52Z

← Äldre version		Versionen från 9 januari 2019 kl. 20.18
Rad 1:		Rad 1:
	Vi kanske inte alltid vill att flexboxarna ~~bara~~ ska samlas på rad. Det finns flera olika sätt på vilka vi kan styra i vilken riktning webbläsaren ska placera ut flexboxarna.		Vi kanske inte alltid vill att flexboxarna ska samlas på rad. Det finns flera olika sätt på vilka vi kan styra i vilken riktning webbläsaren ska placera ut flexboxarna.

	== Att ange flexriktning ==		== Att ange flexriktning ==

PGJ: /* row */

2017-10-11T10:51:20Z

row

← Äldre version		Versionen från 11 oktober 2017 kl. 10.51
Rad 11:		Rad 11:
	<codepen pen="QbXwXa" height="150" tab="result">		<codepen pen="QbXwXa" height="150" tab="result">
	</codepen>		</codepen>
	Här är samma flexbox med skillnaden att <code>[[direction]]</code> är satt till <code>rtl</code>.		Här är samma flexbox med skillnaden att textens <code>[[direction]]</code> är satt till <code>rtl</code>.
	<codepen pen="mPWVKw" height="150" tab="result">		<codepen pen="mPWVKw" height="150" tab="result">
	</codepen>		</codepen>