Propiedad flexible de CSS
Ejemplo
Deje que todos los elementos flexibles tengan la misma longitud, independientemente de su contenido:
#main div {
-ms-flex: 1; /* IE 10 */
flex: 1;
}
Sugerencia: más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La flex
propiedad es una propiedad abreviada para:
La flex
propiedad establece la longitud flexible en elementos flexibles.
Nota: Si el elemento no es un artículo flexible, la flex
propiedad no tiene efecto.
Valor por defecto: | 0 1 automático |
---|---|
Heredado: | No |
Animable: | si, ver propiedades individuales . Leer sobre animable |
Versión: | CSS3 |
Sintaxis de JavaScript: | objeto .estilo.flex="1" |
Compatibilidad con 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 de -webkit-, -ms- o -moz- especifican la primera versión que funcionó con un prefijo.
Property | |||||
---|---|---|---|---|---|
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-grow flex-shrink flex-basis|auto|initial|inherit;
Valores de propiedad
Value | Description |
---|---|
flex-grow | A number specifying how much the item will grow relative to the rest of the flexible items |
flex-shrink | A number specifying how much the item will shrink relative to the rest of the flexible items |
flex-basis | The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" or any other length unit |
auto | Same as 1 1 auto. |
initial | Same as 0 1 auto. Read about initial |
none | Same as 0 0 auto. |
inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Usar flex
junto con consultas de medios para crear un diseño diferente para diferentes tamaños de pantalla/dispositivos:
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item-left {
flex: 50%;
}
.flex-item-right {
flex: 50%;
}
/* Responsive layout - makes a one column layout (100%) instead of a two-column
layout (50%) */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}
páginas relacionadas
Tutorial de CSS: caja flexible de CSS
Referencia de CSS: propiedad de base flexible
Referencia CSS: propiedad de dirección flexible
Referencia CSS: propiedad de flujo flexible
Referencia de CSS: propiedad de crecimiento flexible
Referencia CSS: propiedad flex-shrink
Referencia de CSS: propiedad de envoltura flexible
Referencia HTML DOM: propiedad flexible