HTMLcssJAVA.com

flex:

De flex CSS-eigenschap geeft een element flexibiliteit om te kunnen schalen, met inbegrip van de breedte en de hoogte, om elementen naar één of meer rijen of kolommen te verplaatsen. De waarde voor flex kan worden ingesteld op none, initial, auto, grow, shrink of basis.

Voorbeelden:

• flex: none;
• flex: initial;
• flex: auto;
• flex: grow;
• flex: shrink;
• flex: basis;

Toepassing:

<DIV style="flex: basis;"> Voorbeeldtekst </DIV>

flex-basis:

Flex-basis definieert de basisgrootte van een flex-item. De flex-basis is het startpunt van de flex-groei en het flex-samentrekken. Als de flex-basis een positief getal is, betekent dit dat de flex-item een vaste waarde heeft, die als basis wordt gebruikt voor het berekenen van de grootte van de flex-item. Als de flex-basis een negatief getal is, betekent dit dat de flex-item een percentage is van de geschatte grootte van de flex-container.

Voorbeelden:

• flex-basis: 10px;
• flex-basis: 20%;
• flex-basis: auto;

Toepassing:

<DIV style="flex-basis: auto;"> Voorbeeldtekst </DIV>

flex-direction:

Flex-direction geeft de layoutrichting (horizontaal of verticaal) aan. De flex-items worden geplaatst in de richting die door de flex-direction wordt gespecificeerd. De flex-direction heeft 4 waarden: row, row-reverse, column en column-reverse. De standaardwaarde is row.

Voorbeelden:

• flex-direction: row;
• flex-direction: row-reverse;
• flex-direction: column;
• flex-direction: column-reverse;

Toepassing:

<DIV style="flex-direction: column-reverse;"> Voorbeeldtekst </DIV>

flex-flow:

Flex-flow is een shorthand voor flex-direction en flex-wrap. Dit betekent dat in plaats van twee regels code, slechts één regel code nodig is om de flex-direction en flex-wrap te specificeren. De syntax voor flex-flow is flex-flow: .

Voorbeelden:

• flex-flow: row wrap;
• flex-flow: row-reverse wrap-reverse;
• flex-flow: column nowrap;
• flex-flow: column-reverse wrap;

Toepassing:

<DIV style="flex-flow: column-reverse wrap;"> Voorbeeldtekst </DIV>

flex-grow:

Flex-grow is een CSS-eigenschap die wordt gebruikt om flexibele elementen in een flex-container te laten groeien en krimpen in verhouding tot elkaar. Het controleert hoeveel ruimte het flexibele element binnen de flex-container inneemt. Het maakt gebruik van een numerieke waarde die aangeeft hoeveel het element zal groeien ten opzichte van de andere flex-elementen in de flex-container;

Voorbeelden:

Toepassing:

<DIV style="flex-grow: column-reverse wrap;"> Voorbeeldtekst </DIV>

flex-shrink:

Flex-shrink is een CSS-eigenschap die wordt gebruikt om flexibele elementen in een flex-container te laten krimpen in verhouding tot elkaar. Het controleert hoeveel ruimte het flexibele element binnen de flex-container inneemt. Het maakt gebruik van een numerieke waarde die aangeeft hoeveel het element zal krimpen ten opzichte van de andere flex-elementen in de flex-container;

Voorbeelden:

Toepassing:

<DIV style="flex-shrink: column-reverse wrap;"> Voorbeeldtekst </DIV>

flex-wrap:

Flex-wrap is een CSS-eigenschap die wordt gebruikt om flex-elementen op meerdere regels te laten staan in plaats van op een enkele regel. Het maakt gebruik van een woordwaarde om te bepalen hoe de flex-elementen worden geplaatst;

Voorbeelden:

• flex-wrap: nowrap;
• flex-wrap: wrap;
• flex-wrap: wrap-reverse;

Toepassing:

<DIV style="flex-wrap: wrap-reverse;"> Voorbeeldtekst </DIV>

align-content:

align-content is een css property die wordt gebruikt om de manier waarop meerdere rijen flex items worden uitgelijnd binnen een flex container te regelen. Het bepaalt de manier waarop flex items worden verdeeld over de flex rijen en de ruimte tussen de flex rijen.

Voorbeelden:

• align-content: stretch;
• align-content: center;
• align-content: flex-start;
• align-content: flex-end;
• align-content: space-between;
• align-content: space-around;

Toepassing:

<DIV style="align-content: space-around;"> Voorbeeldtekst </DIV>

align-items:

De CSS align-items eigenschap stelt de uitlijning van items langs de kruislings as in een flex container. Dit bepaalt hoe de elementen in een flex container worden uitgelijnd langs de kruislings as. Als een element in een flex container hoogte heeft, zal het middelpunt langs de kruislings as gebruikt worden als uitlijningpunt.

Voorbeelden:

• align-items: flex-start;
• align-items: flex-end;
• align-items: center;
• align-items: baseline;
• align-items: stretch;

Toepassing:

<DIV style="align-items: stretch;"> Voorbeeldtekst </DIV>

align-self:

align-self is een CSS property die gebruikt kan worden om de uitlijning van een enkel element te veranderen. Het bepaalt hoe een element zich gedraagt binnen het flex-item waar het in staat, en kan worden gebruikt om een element uit te lijnen met andere elementen, ongeacht welke volgorde ze in de bron-code staan. align-self wordt vaak gebruikt in combinatie met display: flex; en de flex-direction, flex-wrap en justify-content eigenschappen.

Voorbeelden:

• align-self: auto;
• align-self: start;
• align-self: end;
• align-self: center;
• align-self: stretch;
• align-self: baseline;

Toepassing:

<DIV style="align-self: baseline;"> Voorbeeldtekst </DIV>

justify-content:

Justify-content is een CSS-eigenschap die bepaalt hoe flex-items geregeld worden op de hoofdas van een flex-container. Deze eigenschap bepaalt ook hoe de flex-items verdeeld worden over de resterende ruimte.

Voorbeelden:

• justify-content: flex-start;
• justify-content: flex-end;
• justify-content: center;
• justify-content: space-between;
• justify-content: space-around;
• justify-content: space-evenly;
• justify-content: start;
• justify-content: end;
• justify-content: left;
• justify-content: right;

Toepassing:

<DIV style="justify-content: right;"> Voorbeeldtekst </DIV>

order:

Order property is een flex-box layout property. De order property bepaalt de volgorde waarin elementen binnen een flex-box worden geplaatst. De waarden van order zijn positieve integers, waarbij hogere waarden zich verder naar rechts of onderaan bevinden.

Voorbeelden:

Toepassing:

<DIV style="order: right;"> Voorbeeldtekst </DIV>