La propietat flex en CSS és l'abreviatura de flex-creixement, flex-encongiment, i base flexible. Només funciona amb els articles flexibles, de manera que si l'article del contenidor no és un element flexible, el flexionar la propietat no afectarà l'element corresponent.
Aquesta propietat s'utilitza per establir la longitud dels elements flexibles. El posicionament dels elements fills i del contenidor principal és fàcil amb aquesta propietat CSS. S'utilitza per definir com es reduirà o creixerà un element flexible per adaptar-se a l'espai.
El flexionar La propietat es pot especificar amb un, dos o tres valors.
- Quan hi ha la sintaxi d'un valor, el valor ha de ser un número o les paraules clau com ara cap, automàtic, o inicial .
- Quan hi ha la sintaxi de dos valors, el primer valor ha de ser un número (utilitzat com a creixement flexible ), el segon valor pot ser un nombre (utilitzat per flex-retràctil ) o un valor d'amplada vàlid (utilitzat com a base flexible ).
- Quan hi ha una sintaxi de tres valors, els valors han de seguir l'ordre: a nombre per al creixement flexible, a nombre per al flex-retràctil, i un vàlid amplada valor per base flexible .
Sintaxi
flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;
Valors de propietat
creixement flexible: És un nombre positiu sense unitats que determina el factor de creixement flexible. Especifica quant creixerà l'article en comparació amb els altres elements flexibles. No es permeten valors negatius. Si s'omet, s'estableix en el valor 1 .
flex-retràctil: És el nombre positiu sense unitats que determina el factor de contracció de flexió. Especifica quant es reduirà l'element en comparació amb els altres elements flexibles. No es permeten valors negatius. Si s'omet, s'estableix en el valor 1 .
base flexible: És la longitud en unitats relatives o absolutes que defineix la longitud inicial de l'element flexible. S'utilitza per establir la longitud de l'element flexible. Els seus valors poden ser cotxe, heretar, o un nombre seguit de les unitats de longitud com ara em, px, etc. No es permeten valors negatius. Si s'omet, s'estableix en el valor 0 .
automàtic: Aquest valor de la propietat flex és equivalent a 1 1 auto .
cap: Aquest valor de la propietat flex és equivalent a 0 0 automàtic . Ni creix ni redueix els elements flexibles.
inicial: Estableix la propietat al seu valor predeterminat. És equivalent a 0 0 automàtic .
heretar: Hereta la propietat del seu element pare.
Exemple
En aquest exemple, hi ha tres contenidors, cadascun amb tres elements flexibles. El amplada i l'alçada dels contenidors són 300 píxels i 100 píxels .
Estem aplicant el flexió: 1; als elements flexibles del primer contenidor, flexió: 0 50px; als articles flexibles del segon contenidor i flexió: 2 2; als articles flexibles del tercer contenidor.
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> Prova-ho ara Sortida
