Elementos flexibles de CSS
Elementos secundarios (artículos)
Los elementos secundarios directos de un contenedor flexible se convierten automáticamente en elementos flexibles (flex).
1
2
3
4
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:
La propiedad de la orden
La orderpropiedad especifica el orden de los elementos flexibles.
1
2
3
4
El primer elemento flexible del código no tiene que aparecer como el primer elemento del diseño.
El valor del pedido 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 de crecimiento flexible
La flex-growpropiedad especifica cuánto crecerá un elemento flexible en relación con el resto de los elementos flexibles.
1
2
3
El valor debe ser un número, el valor predeterminado es 0.
Ejemplo
Haz 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 de contracción por flexión
La flex-shrinkpropiedad especifica cuánto se encogerá un elemento flexible en relación con el resto de los elementos flexibles.
1
2
3
4
5
6
7
8
9
10
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 de base flexible
La flex-basispropiedad especifica la longitud inicial de un elemento flexible.
1
2
3
4
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 flexible
La flexpropiedad es una propiedad abreviada para las propiedades
flex-grow, flex-shrinky flex-basis.
Ejemplo
Haga que el tercer elemento flexible no se pueda crecer (0), no se pueda encoger (0) y con 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 align-selfpropiedad especifica la alineación del elemento seleccionado dentro del contenedor flexible.
La align-self propiedad anula la alineación predeterminada establecida por la align-itemspropiedad del contenedor.
1
2
3
4
En estos ejemplos, usamos un contenedor de 200 píxeles de alto para demostrar mejor la
align-selfpropiedad:
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>
Las propiedades de los elementos de CSS Flexbox
La siguiente tabla enumera todas las propiedades de los elementos CSS Flexbox:
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |