Met het uitlijningsgereedschap 'Vloeiende indeling' kunt u elementen uitlijnen, zodat de uitlijning en verhoudingen automatisch worden aangepast aan verschillende paginaformaten en -standen. Responsieve documenten hebben vooral voordeel van een vloeiende indeling, maar de vloeiende indeling kan ook werken met elementen met een vast formaat.
U kunt verschillende technieken gebruiken in Google Web Designer om een vloeiende indeling te maken:
Flexbox (Fluid Layout) - Google Web Designer
Waarden op basis van een percentage
U kunt formaten en posities instellen in percentages in plaats van pixels, zodat elementen in verhouding tot en relatief ten opzichte van elkaar blijven staan.
Als u percentages in plaats van pixels wilt gebruiken, klikt u in het deelvenster Eigenschappen op px en selecteert u % in het dropdownmenu.
Als u alle waarden voor positie en formaat naar percentages wilt converteren, klikt u op de knop Percentages gebruiken .
U kunt in uw document een combinatie van op percentages gebaseerde en op pixels gebaseerde waarden gebruiken.
Verankering
Met verankering kunt u elementen permanent uitlijnen binnen een container, zelfs als het formaat, de opvulling of de randbreedte van het element of de container verandert. Alle posities of vertaaleigenschappen die u instelt, worden gebruikt voor de verschuiving van het element vanaf het ankerpunt.
U selecteert een horizontale ankermodus en een verticale ankermodus. De standaardwaarde is 'linksboven'.
Horizontale ankermodus
| Modus | Effect |
|---|---|
| left (links) | De linkerrand van het element is uitgelijnd met de linkerrand van de container. |
| center (centreren) | Het horizontale midden van het element is uitgelijnd met het horizontale midden van de container. |
| right (rechts) | De rechterrand van het element is uitgelijnd met de rechterrand van de container. |
Verticale verankeringsmodus
| Modus | Effect |
|---|---|
| top (boven) | De bovenrand van het element is uitgelijnd met de bovenrand van de container. |
| middle (midden) | Het verticale midden van het element is uitgelijnd met het verticale midden van de container. |
| bottom (onder) | De onderrand van het element is uitgelijnd met de onderrand van de container. |
U kunt de verankeringsmodus instellen in het deelvenster Eigenschappen of op de balk met gereedschapsopties als het gereedschap Selectie actief is.
Flexbox
Flexbox (CSS Flexibele Box Layout Module) is een manier om items flexibel in een container te plaatsen binnen rijen of kolommen. Elk artikel kan groeien of krimpen om de containerruimte te optimaliseren, terwijl de opgegeven volgorde en afstand behouden blijft.
U kunt de flexbox-eigenschappen gebruiken en instellen op het tabblad Flexbox van het deelvenster Responsief. Meer informatie over het gebruik van flexbox.