Elementos secundarios (elementos)
Los elementos secundarios directos de un contenedor flexible se convierten automáticamente en elementos flexibles (flex).
El elemento de arriba representa cuatro elementos flexibles azules dentro de un contenedor flexible gris.
Ejemplo:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Las propiedades del elemento flexible son:
orderflex-growflex-shrinkflex-basisflexalign-self
La propiedad order
La propiedad order especifica el orden de los elementos flexibles.
El primer elemento flexible del código no tiene por qué aparecer como el primer elemento del diseño.
El valor de order debe ser un número, el valor predeterminado es 0.
Ejemplo:
La propiedad order puede cambiar el orden de los elementos flexibles:
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
La propiedad flex-grow
La propiedad flex-grow especifica cuánto crecerá un elemento flexible en relación con el resto de los elementos flexibles.
El valor debe ser un número, el valor predeterminado es 0.
Ejemplo:
Haga que el tercer elemento flexible crezca ocho veces más rápido que los otros elementos flexibles:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
La propiedad flex-shrink
La propiedad flex-shrink especifica cuánto se reducirá un elemento flexible en relación con el resto de los elementos flexibles.
El valor debe ser un número, el valor predeterminado es 1.
Ejemplo:
No permita que el tercer elemento flexible se encoja tanto como los otros elementos flexibles:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
La propiedad flex-basis
La propiedad flex-basis especifica la longitud inicial de un elemento flexible.
Ejemplo:
Establezca la longitud inicial del tercer elemento flexible en 200 píxeles:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
La propiedad flex
La propiedad flex es una propiedad abreviada de las propiedades flex-grow, flex-shrink y flex-basis.
Ejemplo:
Haga que el tercer elemento flexible no se pueda ampliar (0), no se pueda reducir (0) y tenga una longitud inicial de 200 píxeles:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
La propiedad align-self
La propiedad align-self especifica la alineación del elemento seleccionado dentro del contenedor flexible.
La propiedad align-self anula la alineación predeterminada establecida por la propiedad align-items del contenedor.
En estos ejemplos utilizamos un contenedor de 200 píxeles de alto para demostrar mejor la propiedad align-self:
Ejemplo:
Alinee el tercer elemento flexible en el medio del contenedor:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
Ejemplo:
Alinee el segundo elemento flexible en la parte superior del contenedor y el tercer elemento flexible en la parte inferior del contenedor:
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
Propiedades de los elementos CSS Flexbox
La siguiente tabla enumera todas las propiedades de los elementos CSS Flexbox:
| Propiedad | Descripción |
align-self | Especifica la alineación de un elemento flexible (anula la propiedad align-items del contenedor flexible). |
flex | Una propiedad abreviada para las propiedades flex-grow, flex-shrink y flex-basis. |
flex-basis | Especifica la longitud inicial de un elemento flexible. |
flex-grow | Especifica cuánto crecerá un elemento flexible en relación con el resto de elementos flexibles dentro del mismo contenedor. |
flex-shrink | Especifica cuánto se reducirá un elemento flexible en relación con el resto de elementos flexibles dentro del mismo contenedor. |
order | Especifica el orden de los elementos flexibles dentro del mismo contenedor. |
Traducido con 💚 desde W3Schools.com