Editor X: Over stapelen

Stapelen is een handig hulpmiddel bij responsief ontwerp. Zonder stapeling zouden elementen die boven en onder elkaar zijn geplaatst elkaar kunnen overlappen op kleinere schermen. Wanneer je elementen stapelt, plaatst het ze in een flexibele container met marges die je kunt beheren. 

Responsieve websites bevatten vaak elementen die afhankelijk van de schermgrootte van grootte veranderen en van positie veranderen. Hierdoor kunnen ze elkaar overlappen of kan de afstand ertussen veranderen op kleinere viewports. 

Door ze te stapelen, plaats je elementen in een container die zich automatisch aanpast aan verschillende schermformaten, zodat je een responsieve indeling kunt behouden. 

Dit is een voorbeeld van wat er gebeurt met elementen die NIET gestapeld wanneer het scherm wordt aangepast:

Stapelen creëert een flexibele container rond je elementen, wat ervoor zorgt dat ze altijd in de juiste afstand en volgorde blijven. De container is standaard transparant, maar je kunt het ontwerpen zodat het bij jouw stijl past met de vulkleur, randen, hoeken en schaduw. 

Elementen in een stapel worden gescheiden door verticale marges. Om de stroken te zien die de huidige marges aangeven, wijs je de optie aan of selecteer je Stapelen. Dubbelklik op elementen binnen de stapel en verplaats ze om de afstand ertussen te wijzigen.  

Een andere optie is om alle marges in hoogte gelijk te maken in het Inspector-paneel en een waarde (px of %) in te voeren naast Itemafstand.