De flex-eigenschap in CSS is een afkorting voor flex-groeien, flex-krimpen, en flexbasis. Het werkt alleen op de flex-items, dus als het item van de container geen flex-item is, wordt de buigen eigenschap heeft geen invloed op het overeenkomstige item.
Deze eigenschap wordt gebruikt om de lengte van flexibele artikelen in te stellen. De positionering van onderliggende elementen en de hoofdcontainer is eenvoudig met deze CSS-eigenschap. Het wordt gebruikt om in te stellen hoe een flex-item zal krimpen of groeien om in de ruimte te passen.
De buigen eigenschap kan worden opgegeven met één, twee of drie waarden.
- Wanneer er sprake is van de syntaxis van één waarde, moet de waarde een getal zijn of trefwoorden zoals geen, auto, of voorletter .
- Als er sprake is van een syntaxis met twee waarden, moet de eerste waarde een getal zijn (gebruikt als flex-groei ), kan de tweede waarde een getal zijn (gebruikt voor flex-krimp ) of een geldige breedtewaarde (gebruikt als flex-basis ).
- Als er een syntaxis met drie waarden is, moeten de waarden de volgende volgorde volgen: nummer voor de flex-groeien, A nummer voor de flex-krimpen, en een geldig breedte waarde voor flex-basis .
Syntaxis
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Eigendomswaarden
flex-groei: Het is een positief eenheidloos getal dat de flex-groeifactor bepaalt. Het specificeert hoeveel het item zal groeien in vergelijking met de andere flexibele items. Negatieve waarden zijn niet toegestaan. Als dit wordt weggelaten, wordt de waarde ingesteld 1 .
flex-krimp: Het is het positieve eenheidsloze getal dat de flex-krimpfactor bepaalt. Het specificeert hoeveel het artikel zal krimpen in vergelijking met de andere flexibele artikelen. Negatieve waarden zijn niet toegestaan. Als dit wordt weggelaten, wordt de waarde ingesteld 1 .
flex-basis: Het is de lengte in relatieve of absolute eenheden die de initiële lengte van het flexitem definieert. Het wordt gebruikt om de lengte van het flex-item in te stellen. De waarden ervan kunnen zijn auto, erven, of een getal gevolgd door de lengte-eenheden zoals em, px, enz. Negatieve waarden zijn niet toegestaan. Als dit wordt weggelaten, wordt de waarde ingesteld 0 .
auto: Deze waarde van de flex-eigenschap is gelijk aan 1 1 automatisch .
geen: Deze waarde van de flex-eigenschap is gelijk aan 0 0 automatisch . Het laat de flex-items niet groeien of krimpen.
voorletter: Het stelt de eigenschap in op de standaardwaarde. Het is gelijkwaardig aan 0 0 automatisch .
erven: Het erft de eigenschap van het bovenliggende element.
Voorbeeld
In dit voorbeeld zijn er drie containers met elk drie flex-items. De breedte en hoogte van de containers zijn 300px En 100px .
Wij passen de buigen: 1; naar de flex-items van de eerste container, flex: 0 50px; naar de flex-items van de tweede container, en flex: 2 2; naar de flex-items van de derde container.
CSS flex Property .container { width: 200px; height: 100px; border: 1px solid black; display: flex; margin: 15px; background-color: blue; } .flex-item{ flex: 1; // unitless number: flex-grow } .flex-item1{ flex: 0 50px; // flex-grow, flex-basis } .flex-item2{ flex: 2 2; // flex-grow, flex-shrink } .flex-item, .flex-item1, .flex-item2 { background-color: lightblue; margin: 4px; } <h3> flex: auto; </h3> <h3> flex: 0 1 30px; </h3> Test het nu Uitvoer
