Af ren og skær nysgerrighed, hvorfor ikke bruge bootstrap 4 til det?
Men som jeg ser det, er der ikke nogen direkte vej at gøre det. Modsat kolonne opdelingen (eller grid opdelingen) som ses i andre CSS frameworks (skeleton, foundation, bootstrap, etc) er den eneste måde at styre størrelserne på de forskellige skærme ved at du fortæller den hvilke størrelser de skal have på mobil, tablet, og desktop med disse classes:
is-half-mobile
is-one-third-tablet
is-one-quarter-desktop
Og deres variationer selvfølgelig.
--
Veni, Vidi, Vici.
dimidium facti qui coepit habet
faber est quisque fortunae suae
#1 Tak for svar. Jeg vil lige kigge nærmere på den løsning.
Jeg plejer at bruge bootstrap, men prøver at lære Bulma for læredommens skyld. Men er der en bedre løsning i Bootstrap 4? Har kun brugt de tidligere versioner af Bootstrap.
--
#2
I bootstrap 4 definerer du bare størrelsen for de enkelte breakpoints, eksempel col-lg-2 for store skærme, col-md-4 for mindre skærme, etc.
Dog skal du nok bruge SASS mixins hvis det skal køre med 8 på række, da standard grid skal deles med 12 for at det virker i standard Bootstrap.
--
Veni, Vidi, Vici.
dimidium facti qui coepit habet
faber est quisque fortunae suae
#3 Jeg vil kigge nærmere på det. Tak for svaret :-).
--
Hmm Jeg tror du rammer ind i et af to scenarier:
Enten skal du leve med at elementerne beholder en fast min-bredde uden flex-grow, men så vil de også wrappe med den bredde... og du kan justere deres størrelse med responsive breakpoints anyway.
Ellers skal du bare bruge helt rent flex, men så bliver sidste row også opskaleret via flex-grow.
Jeg har illustreret begge scenarier her:
http://rowla.net[...]
...hvis de løsninger ikke er acceptable kan du alternativt bruge % baseret flex-basis og opdatere flex-basis "manuelt" på responsive breakpoints når du vil have færre eller flere kolonner... men det kræver vist at du holder rimeligt godt styr på marginer og den slags samtidig - kan være lidt bøvlet.
--
Play: 4790K, Impact VII ITX, GTX1070, 16GB@1866, DanCase A4, 500GB SSD, SF600, 34" U3415W
Work: 15.4" MacBook Pro Retina 2017
--
Sidst redigeret 14-09-2017 12:00
#5 Tusind tak for svaret! Jeg vil lige prøve mig frem. Kan godt lide eksempel nummer 2 du har lavet. Passer perfekt. Nu skal jeg bare lige prøve at få det til at spille ordenligt!
--
Eksemplet virker fantastisk!
Nu er jeg uafhængig af antallet af kolonner, hvilket gør det meget lettere at arbejde med!
<div class="columns">
...
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
<div class="column">...</div>
...
</div>
Det eneste negative er blot at den sidste række ser mærkelig ud, når antallet ikke går op. Eksempel på anden sidste og sidste række:
https://imgur.com[...]
--
Sidst redigeret 14-09-2017 12:23
#6 Okay, det er jo næsten bare helt standard flex :)
Din "columns" container skal bare have:
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
Dine "column" div'er skal bare have:
min-width: 150px; // eller hvad du nu føler passer
flex: 1 1 auto; // shorthand for = flex-grow: 1; flex-shrink: 1; flex-basis: auto;
--
Play: 4790K, Impact VII ITX, GTX1070, 16GB@1866, DanCase A4, 500GB SSD, SF600, 34" U3415W
Work: 15.4" MacBook Pro Retina 2017
#7 Ja det er hvad jeg mener med flex-grow... prøv evt. flex: 0 1 auto; på dine div'er i stedet. ? :)
--
Play: 4790K, Impact VII ITX, GTX1070, 16GB@1866, DanCase A4, 500GB SSD, SF600, 34" U3415W
Work: 15.4" MacBook Pro Retina 2017
#9 Det kan sagtens bruges. Ærgeligt når det andet føles mest "naturligt" og "responsive". Men det virker. Alternativt må jeg sætte breakpoints :-)
--