Propiedad flex
La propiedad flex es una abreviatura para flex-basis,
flex-shrink
y flex-grow.
Se aplica a: un elemento flex específico.
El orden de los valores no es importante. El segundo y tercer
parámetros (flex-shrink, flex-basis)
son opcionales.
Valores
Consulte las propiedades correspondientes.
Valor por defecto: 0 1 auto.
Ejemplo
Supongamos que tenemos 3 elementos. El ancho de cada uno de ellos
es de 200px y en total equivalen a 600px,
lo cual es mayor que el ancho del contenedor principal, que
es de 300px. Asignemos al primer elemento un ancho de
200px, al segundo elemento - 300px, y al
tercer elemento - 100px. Para todos los elementos,
establezcamos el valor de flex-basis en 1,
y flex-shrink en 1, 2, 3 respectivamente
según el número de orden del elemento:
<div class="parent">
<div class="child elem1">1</div>
<div class="child elem2">2</div>
<div class="child elem2">3</div>
</div>
.parent {
display: flex;
width: 350px;
height: 200px;
border: 1px solid red;
}
.child {
width: 200px;
height: 50px;
border: 1px solid green;
}
.elem1 {
flex: 200px 1 1;
}
.elem2 {
flex: 300px 1 2;
}
.elem3 {
flex: 100px 1 3;
}
:
Véase también
-
la propiedad
flex-direction,
que establece la dirección de los ejes de los elementos flex -
la propiedad
justify-content,
que establece la alineación a lo largo del eje principal -
la propiedad
align-items,
que establece la alineación a lo largo del eje transversal -
la propiedad
flex-wrap,
que establece la multilínea de los elementos flex -
la propiedad
flex-flow,
abreviatura para flex-direction y flex-wrap -
la propiedad
order,
que establece el orden de los elementos flex -
la propiedad
align-self,
que establece la alineación de un elemento individual -
la propiedad
flex-basis,
que establece el tamaño de un elemento flex específico -
la propiedad
flex-grow,
que establece la capacidad de expansión de los elementos flex -
la propiedad
flex-shrink,
que establece la capacidad de contracción de los elementos flex
