De Layout-sectie bepaalt hoe de elementen worden weergegeven. Er zijn drie basistypes lay-outs:
- Blok
- Flex
- Inline-blok
- Geen
Bloklayout
Bij bloklayout neemt het element de volledige breedte van het scherm in beslag, maar je kunt nog steeds de grootte van het element bepalen in het Ruimte-veld.
Flex-layout
Flex-layout is de meest complexe van de drie lay-outkeuzes en wordt voornamelijk gebruikt voor lay-outelementen zoals het Div-blokelement. Wanneer je de Flexbox-layout selecteert, worden verschillende andere opties beschikbaar:
- Richting: Flex-layout-elementen bevatten over het algemeen andere elementen. Stel een richting in om te bepalen of deze binnenste of onderliggende elementen op één lijn staan:
Horizontaal van boven naar beneden.
Horizontaal van beneden naar boven.
Verticaal van links naar rechts.
Verticaal van rechts naar links.
- Inhoud uitlijnen: Lijn de inhoud binnen het element uit:
- of Start: Items worden uitgelijnd aan het begin van de container.
of
Midden: Items worden uitgelijnd in het midden van de container.
of
Eind: Items worden uitgelijnd aan het einde van de container.
of
Ruimte tussen: Items worden gelijkmatig verspreid over het element. Het eerste item lijnt uit met het begin en het laatste item met het einde.
of
Ruimte rondom: Items hebben een gelijke ruimte tussen elkaar. Er is een gelijke hoeveelheid ruimte tussen de items en er is gelijke ruimte tussen het eerste en laatste item en de randen van de container.
of
Gelijke ruimte: Items hebben gelijke ruimte tussen elkaar en de randen van de container.
- Items uitlijnen: Bepaal hoe de ingesloten items worden uitgelijnd op hun middenas, afhankelijk van de richting gekozen in het Richting-veld:
- Start: Items worden uitgelijnd aan het begin van het element.
- Midden: Items worden uitgelijnd in het midden van het element.
- Eind: Items worden uitgelijnd aan het einde van het element.
- Uitrekken: Items worden uitgerekt over de hoogte of breedte van het element.
- Tussenruimtes: Voer een getal in het nummerveld in om ruimte te creëren tussen onderliggende elementen in dit element.
- Inpakken: Als de onderliggende elementen niet binnen het bovenliggende element passen, kunnen bezoekers ofwel scrollen om alle elementen te zien of de elementen kunnen omslaan naar de volgende rij of kolom, afhankelijk van de richting gekozen in het Richting-veld:
- Niet inpakken: De extra elementen worden afgesneden.
- Inpakken: De elementen slaan om naar de volgende rij of kolom, afhankelijk van de gekozen richting. Hieronder is een voorbeeld van elementomslag:
- Omgekeerd inpakken: Werkt zoals inpakken maar het eerste element wordt het laatste. Hieronder is een voorbeeld van omgekeerd inpakken:
Inline-bloklayout
De Inline-bloklayout stelt je in staat om inhoud toe te voegen zonder een nieuw blok te creëren, terwijl het element zijn eigen hoogte en breedte kan hebben. Dit kan helpen het aantal div’s dat op je pagina wordt gebruikt te verminderen, wat de prestaties verbetert.
Geen
Deze instelling wordt voornamelijk gebruikt voor responsieve bewerking. Wanneer je Geen selecteert, wordt het element verborgen wanneer de geselecteerde schermgrootte wordt gebruikt. Als er bijvoorbeeld een kop is die je wilt weergeven op desktops en tablets maar niet op mobiele apparaten, maak dan de kop aan, schakel over naar mobiele bewerking en selecteer Geen. De kop wordt niet weergegeven op mobiele apparaten. Voor meer details over responsieve bewerking, zie Responsieve bewerking.
