| Selectores | Ejemplo | Descripción |
|---|---|---|
| * | * | Selecciona todos los elementos. |
| element | h1 | Selecciona todos los elementos <h1>. |
| #id | #box-1 | Selecciona el elemento que tenga como atributo id='box-1'. |
| .class | .bg-red | Selecciona todos los elementos que tengan asignada la clase 'bg-red' (class='bg-red'). |
| selector1, selector2 | h1, h2 | Selecciona todos los elementos <h1> y todos los elementos <h2>. |
| selector1 selector2 | #box-1 h2 | Selecciona todos los elementos <h2> que son descendientes del elemnto con id='box-1'. |
| selector1>selector2 | #box-1>p | Selecciona todos los elementos <p> que son hijos del elemento con id='box-1'. |
| selector1+selector2 | h1 + p | Selecciona todos los elementos <p> que están inmediatamente despues de un elemento <h1>. |
| selector1~selector2 | h1 ~ p | Selecciona cada elemento <p> que está precedido por un elemento <h1>. |
| element.class | div.bg-red | Selecciona todos los elementos <div> que tienen asignada la clase 'bg-red' (class='bg-red'). |
| Selectores | Ejemplo | Descripción |
|---|---|---|
| :hover | #btn-1:hover | Se activa cuando el usuario interactua con un dispositivo señalador sobre el elemento con id=btn-1. |
| :link | a:link | Selecciona todos los links no visitados. |
| :active | a:active | Selecciona el link activo. |
| :visited | a:visited | Selecciona todos los links visitados. |
| :nth-child() | tr:nth-child(3) | Selecciona el tercer elemento <tr> de una tabla. Acepta tambien los parametros 'odd' y 'even' para seleccionar elementos pares e impares. |
| Selectores | Ejemplo | Descripción |
|---|---|---|
| ::after | p::after | Inserta algo después del contenido de cada elemento <p>. |
| ::before | p::before | Inserta algo antes del contenido de cada elemento <p>. |
| ::first-letter | p::first-letter | Selecciona la primer letra de todos los elementos <p>. |
| ::first-line | p::first-line | Selecciona la primer linea de texto de todos los elementos <p>. |
El módulo flexbox permite crear diseños más eficientes de lo que permite "position" y "float".
Flexbox controla la alineación de sus elementos hijos, el ancho y el alto para ocupar el espacio disponible.
El posicionamiento de elementos es unidireccional, es decir que podemos trabajar con una dirección vertical u horizontal, a diferencia de Grid que controla las dos direcciones. Algunos conceptos importantes:
Contenedor: es el elemento padre al cual es asignado un display: flex;
Item flexible: es cada uno de los hijos del contenedor.
Eje principal: es el eje que corresponde a la dirección asignada con flex-direction que puede ser row (predeterminada) o column.
Eje secundario: es el eje perpendicular al eje principal.
| Valor | Descripción |
|---|---|
| flex | Aplican el diseño flexible a sus hijos y se comporta como un elemento en bloque. |
| inline-flex | Aplican el diseño flexible a sus hijos y se comporta como un elemento en línea. |
| Valor | Descripción |
|---|---|
| row | Los hijos se posicionan de forma horizontal. (valor predeterminado) |
| column | Los hijos se posicionan de forma vertical. |
| row-reverse | Los hijos se posicionan de forma horizontal e invierten el orden original. |
| column-reverse | Los hijos se posicionan de forma vertical e invierten el orden original. |
| Valor | Descripción |
|---|---|
| wrap | Los ítems son distribuidos en varias líneas. |
| nowrap | Los ítems son distribuidos en una sola línea. |
| wrap-reverse | Los ítems son distribuidos en varias líneas e invierte el inicio y el fin del eje principal. |
Atajo de flex-direction y flex-wrap por ejemplo: flex-flow: column wrap;
| Valor | Descripción |
|---|---|
| flex-start | Alinea los ítems al inicio. |
| flex-end | Alinea los ítems al final. |
| center | Alinea los ítems al centro. |
| space-between | El primer ítem al inicio, el último al final y el resto distribuidos uniformemente. |
| space-around | Distribuye los ítems uniformemente y todos tienen el mismo espacio a su alrededor. |
| Valor | Descripción |
|---|---|
| flex-start | Los ítems se alinean al inicio en base al eje secundario. |
| flex-end | Los ítems se alinean al final en base al eje secundario. |
| center | Los ítems se alinean en el centro en base al eje secundario. |
| stretch | Los ítems llenarán todo el espacio vertical. |
| baseline | Los ítems están alineados en la línea de base del eje secundario. |
Ajusta las líneas dentro del contenedor cuando hay espacio extra en el eje secundario.
No tiene efecto en contenedores de una sola línea.
| Valor | Descripción |
|---|---|
| flex-start | Alinea los ítems al inicio. |
| flex-end | Alinea los ítems al final. |
| center | Alinea los ítems al centro. |
| space-between | El primer ítem al inicio, el último al final y el resto distribuidos uniformemente. |
| space-around | Distribuye los ítems uniformemente y todos tienen el mismo espacio a su alrededor. |
| stretch | Estira los ítems para que ocupen el eje secundario completo. |
Espaciado entre los ítems en líneas y columnas. Es una alternativa al uso de padding o margin.
Atajo de row-gap y column-gap. Asignando un solo valor corresponde a las dos posibilidades y asignando dos valores el primero es para row-gap y el segundo para column-gap.
Factor de crecimiento en relación a los demás hermanos en el espacio disponible. Valor por defecto: 0
Factor de decrecimiento en relación a los demás hermanos en el espacio disponible. Valor por defecto: 1
Tamaño base de los ítems antes de aplicarle la distribución de espacio. Valor por defecto: auto.
Atajo de flex-grow flex-shrink y flex-basis.
Aplica una alineación individual del ítem en el eje secundario.
Ordena los ítems en base al valor asignado a esta propiedad.