Clase 08 · Flexbox parte 2
Segunda parte de Flexbox en Edición Web I: repasamos la estructura padre-hijos y vemos flex-direction, el eje principal y el secundario, align-items, align-content, el tamaño flexible y dos ejemplos completos de tarjetas (en fila y en columna). El código de cada ejemplo es el mismo que se mostró en clase.
Repasando Flex: estructura
Las propiedades flex se ponen en el padre; los hijos son sus elementos directos.
<div>
<div>hijo 1</div>
<div>hijo 2</div>
</div>display: flex + justify-content
<div class="padre">
<div>hijo 1</div>
<div>hijo 2</div>
</div>.padre{
display:flex;
justify-content:flex-start;
padding:16px;
border:1px solid black;
height:750px;
}Prueba las diferentes opciones de justify-content
Cambia el valor de justify-content en el .padre y observa cómo se colocan los dos hijos:
En la diapositiva aparece escrito between-space, pero el valor correcto en CSS es space-between.
Flex-direction
Especificamos si queremos que los elementos se distribuyan en horizontal o en vertical.
display:flex;
flex-direction:row;display:flex;
flex-direction:column;El valor por defecto, si no ponemos ningún flex-direction, es row.
Flex-direction: invertir el orden
Podemos invertir el orden de filas y columnas.
display:flex;
flex-direction: row-reverse;display:flex;
flex-direction: column-reverse;Flex-direction: esquema
flex-direction: row;
Valor por defecto si no ponemos nada
flex-direction: column;
Definir el eje principal y el eje secundario
Nuestro eje principal podrá ser row o column como nosotros queramos, por lo que el eje secundario pasará a ser el contrario. El eje principal va a marcar la dirección en que distribuimos nuestros elementos.
- Eje principal column: vemos que los elementos están distribuidos de forma vertical.
- Eje secundario row: horizontalmente están alineados al centro.
Alinear el eje principal y el eje secundario
| Qué alineamos | Propiedad | Valores |
|---|---|---|
| Eje principal (independientemente si es row o column) | justify-content | flex-start | center | flex-end | space-between | space-evenly | space-around |
| Eje secundario (independientemente si es row o column) | align-items | flex-start | center | flex-end |
| Eje secundario, cuando haya más de una línea | align-content | flex-start | center | flex-end |
Ejemplos eje principal y eje secundario
justify-content: center;
align-items: flex-start;
justify-content: center;
align-items: center;
justify-content: center;
align-items: center;
justify-content: space-between;
align-items: center;
justify-content: flex-end;
align-items: flex-end;
Tabla resumen
| Concepto | Código | Notas |
|---|---|---|
| 1. Display | display: flex; | |
| 2. Dirección | flex-direction: row;flex-direction: column;flex-direction: row-reverse;flex-direction: column-reverse; | Si no definimos dirección, por defecto se aplica row (fila). Los -reverse invierten el orden de los elementos de dentro del contenedor. |
| 3. Alinear eje principal | justify-content: flex-start / flex-end / center / space-between… | El eje principal es el que definimos en el parámetro flex-direction. |
| 4. Alinear eje secundario | align-items: flex-start / flex-end / centeralign-content: flex-start / flex-end / center | Si el principal es row, el secundario será column y a la inversa. align-items se usa cuando solo hay una línea de elementos que alinear; align-content cuando hay varias líneas. |
| 5. Flujo (wrap) | flex-wrap: wrap / no-wrap;flex-wrap: wrap-reverse; | Los elementos de dentro del contenedor fluyen en varias filas o columnas o se concentran en una sola. wrap-reverse invierte el orden. |
| 6. Espacio entre elementos | gap: 8px;column-gap: 8px;row-gap: 8px; | Espaciado independiente de filas y columnas. |
| 7. Tamaño (elemento hijo) | flex-grow: 2;flex: 2; | Tamaño flexible. Se aplica a los elementos hijo. |
Ejemplo Tamaño flexible
Con flex en los hijos repartimos el ancho de forma proporcional: tres hijos con flex: 1 ocupan lo mismo; con flex: 1 y flex: 4, el segundo es cuatro veces más ancho.
.padre{
display:flex;
}
.hijo{
flex:1;
}
.hijo-grande{
flex:4;
}Ejemplo Card row
Una tarjeta en fila: el padre es un contenedor flex con dos hijos, el avatar (hijo 1) y el texto con los botones (hijo 2).
.card { /* Padre */
display:flex;
flex-direction:row;
gap:8px;
}Persona curiosa
Una persona curiosa suele caracterizarse por ese deseo constante de aprender, explorar y comprender el mundo que la rodea. Hace preguntas con frecuencia, busca respuestas, muestra interés por lo conocido pero también le fascina aquello que no conoce.
Button 01 Button 02
En la diapositiva la propiedad aparece escrita dispaly; la correcta es display.
Ejemplo Card column
Tres tarjetas en fila dentro de un padre, y cada tarjeta a su vez es un contenedor flex en columna con cuatro hijos: imagen, título, texto y botón.
.contenedor { /* Padre */
display:flex;
flex-direction:row;
justify-content:center;
gap:8px;
}.card { /* Padre de los 4 hijos */
display:flex;
flex-direction:column;
justify-content:space-around;
align-items: center;
}Persona Curiosa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Persona Curiosa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
Persona Curiosa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.
