Flexbox - styra layoutflödet längs flexaxeln: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| (8 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 11: | Rad 11: | ||
Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" <code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten. | Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" <code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten. | ||
<codepen pen="LVKxLz" height=" | <codepen pen="LVKxLz" height="300" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 18: | Rad 18: | ||
[[Fil:FlexboxJustifiedEnd.png]] | [[Fil:FlexboxJustifiedEnd.png]] | ||
Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" | Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" <code>[[rtl]]</code>/<code>[[ltr]]</code> och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten. | ||
<codepen pen="KpjavK" height=" | <codepen pen="KpjavK" height="300" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 26: | Rad 26: | ||
Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med <code>align-items: center;</code> kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt. Vilket vi gör i följande exempel. | Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med <code>align-items: center;</code> kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt. Vilket vi gör i följande exempel. | ||
<codepen pen="eNqVNr" height=" | <codepen pen="eNqVNr" height="300" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 35: | Rad 35: | ||
Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna. | Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna. | ||
<codepen pen="waLgqO" height=" | <codepen pen="waLgqO" height="300" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 43: | Rad 43: | ||
Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren. | Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren. | ||
<codepen pen="doBNZd" height=" | <codepen pen="doBNZd" height="300" tab="css,result"> | ||
</codepen> | </codepen> | ||
| Rad 49: | Rad 49: | ||
Välj "Edit on CodePen" för att göra övningarna där. | Välj "Edit on CodePen" för att göra övningarna där. | ||
=== Övning 1 === | |||
<codepen pen="dZbeeo" height=" | Flytta alla flexelement så de ligger jämt fördelade mot på raden. De ska börja ifrån kanten på flexlådan. | ||
<codepen pen="dZbeeo" height="300" tab="result"> | |||
</codepen> | </codepen> | ||
=== Övning 2 === | |||
<codepen pen="wPwjxr" height=" | Alla boxar ska centreras horisontellt. Första boxen ska ligga längst upp, tvåan i mitten, trean längst ned och fyran i mitten. | ||
<codepen pen="wPwjxr" height="300" tab="result"> | |||
</codepen> | </codepen> | ||
Nuvarande version från 8 september 2022 kl. 07.02
Vi vill självklart kunna styra hur layouten sker i förhållande till flexaxeln också. Det görs med egenskapen justify-content
justify-content
Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln.
Följande värden kan anges:
flex-start
Defaultvärdet. Allt flexmaterial samlas mot starten av flexboxen. Om vi har "normal" ltr och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot vänsterkanten.
flex-end
Allt flexmaterial samlas i slutet av flexboxen. Om vi har "normal" rtl/ltr och det är en radbaserad flexbehållare, kommer allt innehåll att samlas mot högerkanten.
center
Allt flexmaterial centreras mot mitten av flexboxen. Kombinerar vi detta med align-items: center; kan vi enkelt centerjustera innehåll såväl horisontellt, som vertikalt. Vilket vi gör i följande exempel.
space-between
Flexelementen distribueras jämt, längs med flexboxen. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får inga marginaler mot ändarna, utan de kommer att placeras i kant med slutpunkterna.
space-around
Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. Tomrummet i flexbehållaren fördelas lika mellan flexelement och sätts som marginaler mellan dessa. De yttersta elementen i flexaxelns båda ändar får halva marginalstorleken jämtemot ändarna. Det vill säga om man lägger samman ändmarginalerna, så blir de tillsammans lika breda som övriga mellanmarginaler i flexbehållaren.
Övningar
Välj "Edit on CodePen" för att göra övningarna där.
Övning 1
Flytta alla flexelement så de ligger jämt fördelade mot på raden. De ska börja ifrån kanten på flexlådan.
Övning 2
Alla boxar ska centreras horisontellt. Första boxen ska ligga längst upp, tvåan i mitten, trean längst ned och fyran i mitten.