Ejemplo
Que todos los elementos flexibles tener la misma longitud, regardles de su contenido:
#main div {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
} Inténtalo tú mismo " Definición y Uso
La propiedad flex especifica la longitud del artículo, en relación con el resto de los elementos flexibles en el interior del mismo contenedor.
La propiedad de la flexión es una forma abreviada de los flex-crecer, flex-encogimiento, y el flex-básicos propiedades.
Note: Si el elemento no es un elemento de flexibilidad, la propiedad de la flexión no tiene ningún efecto.
| Valor por defecto: | 0 1 auto |
|---|---|
| Heredado: | no |
| animatable: | yes, see individual properties . Read about animatable |
| Versión: | CSS3 |
| la sintaxis de JavaScript: | object .style.flex="1" Try it |
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit-, -MS- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| flex | 29.0 21.0 -webkit- | 11.0 10.0 -MS- | 28.0 18.0 -moz- | 9.0 6.1 -webkit- | 17.0 |
sintaxis CSS
flex:flex-growflex-shrinkflex-basis|auto|initial|inherit;Valores de propiedad
| Valor | Descripción |
|---|---|
| flex-grow | Un número que especifica cuánto el elemento crecerá en relación con el resto de los elementos flexibles |
| flex-shrink | Un número que especifica cuánto el elemento se reducirá en relación con el resto de los elementos flexibles |
| flex-basis | La longitud del artículo. Los valores legales: "auto" , "inherit" , o un número seguido de "%" , "px" , "em" o cualquier otra unidad de longitud |
| auto | Igual que 1 1 auto. |
| initial | Igual que 0 1 auto. Lea acerca inicial |
| none | Lo mismo que 0 0 auto. |
| inherit | Hereda esta propiedad de su elemento padre. Lee sobre heredar |
Páginas relacionadas
CSS Referencia: flex-basis property
CSS Referencia: flex-direction property
CSS Referencia: flex-flow property
CSS Referencia: flex-grow property
CSS Referencia: flex-shrink property
CSS Referencia: flex-wrap property
Referencia HTML DOM: flex property