Flexbox - styra layoutflödet längs flexaxeln: Skillnad mellan sidversioner
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
PGJ (diskussion | bidrag) Ingen redigeringssammanfattning |
||
| (15 mellanliggande sidversioner av samma användare visas inte) | |||
| Rad 2: | Rad 2: | ||
== <code>justify-content</code> == | == <code>justify-content</code> == | ||
Med denna egenskap kan man sätta hur de olika flexelementen ska justeras/fördelas längs med flexaxeln. | 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: | Följande värden kan anges: | ||
=== <code>flex-start</code> === | === <code>flex-start</code> === | ||
[[Fil:FlexboxJustifyStart.png]] | [[Fil:FlexboxJustifyStart.png]] | ||
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> | ||
=== <code>flex-end</code> === | === <code>flex-end</code> === | ||
[[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> | ||
=== <code>center</code> === | === <code>center</code> === | ||
[[Fil:FlexboxJustifyCenter.png]] | [[Fil:FlexboxJustifyCenter.png]] | ||
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. | 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> | ||
=== <code>space-between</code> === | === <code>space-between</code> === | ||
[[Fil:FlexboxJustifySpaceBetween.png]] | [[Fil:FlexboxJustifySpaceBetween.png]] | ||
Flexelementen distribueras jämt, längs med flexboxen. | 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> | ||
=== <code>space-around</code> === | === <code>space-around</code> === | ||
[[Fil:FlexboxJustifySpaceAround.png]] | [[Fil:FlexboxJustifySpaceAround.png]] | ||
Flexelementen distribueras jämt, längs med flexboxen och med lika mycket mellanrum mellan varje element. | 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> | |||
== Ö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. | |||
<codepen pen="dZbeeo" height="300" tab="result"> | |||
</codepen> | |||
=== Ö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. | |||
<codepen pen="wPwjxr" height="300" tab="result"> | |||
</codepen> | </codepen> | ||
== Nästa aktivitet == | == Nästa aktivitet == | ||
[[Flexbox - flexbehållare med flera rader]] | [[Flexbox - flexbehållare med flera rader]] | ||
[[Category:Webbutveckling]] | |||
Nuvarande version från 8 september 2022 kl. 09.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.