Flexbox
## Objetivos de Aprendizaje
- Entender el modelo de diseño flexbox
- Dominar las propiedades del contenedor flex
- Dominar las propiedades de los elementos flex
- Crear diseños comunes con flexbox
## Visión General de Flexbox
Flexbox es un método de diseño unidimensional para organizar elementos en filas o columnas.
```html
```
```css
.container {
display: flex;
}
```
## Propiedades del Contenedor Flex
### display
```css
.container {
display: flex; /* Crea contenedor flex */
display: inline-flex; /* Contenedor flex en línea */
}
```
### flex-direction
```css
.container {
flex-direction: row; /* Izquierda a derecha (por defecto) */
flex-direction: row-reverse; /* Derecha a izquierda */
flex-direction: column; /* Arriba a abajo */
flex-direction: column-reverse; /* Abajo a arriba */
}
```
### flex-wrap
```css
.container {
flex-wrap: nowrap; /* Sin envoltura (por defecto) */
flex-wrap: wrap; /* Elementos pasan a la siguiente línea */
flex-wrap: wrap-reverse; /* Elementos se envuelven en reversa */
}
```
### justify-content
Alinea elementos en el eje principal (horizontal por defecto):
```css
.container {
justify-content: flex-start; /* Elementos al inicio (por defecto) */
justify-content: flex-end; /* Elementos al final */
justify-content: center; /* Elementos centrados */
justify-content: space-between; /* Primero/último en bordes, espacio distribuido */
justify-content: space-around; /* Espacio igual alrededor de cada elemento */
justify-content: space-evenly; /* Espacio igual entre todos los elementos */
}
```
### align-items
Alinea elementos en el eje transversal (vertical por defecto):
```css
.container {
align-items: stretch; /* Llena altura del contenedor (por defecto) */
align-items: flex-start; /* Elementos arriba */
align-items: flex-end; /* Elementos abajo */
align-items: center; /* Elementos centrados verticalmente */
align-items: baseline; /* Elementos alineados por línea base de texto */
}
```
### align-content
Alinea múltiples filas cuando hay espacio extra en el eje transversal:
```css
.container {
align-content: flex-start; /* Filas arriba */
align-content: flex-end; /* Filas abajo */
align-content: center; /* Filas centradas */
align-content: space-between; /* Primera/última en bordes */
align-content: space-around; /* Espacio igual alrededor de filas */
align-content: stretch; /* Estira filas (por defecto) */
}
```
### gap
```css
.container {
gap: 20px; /* Espacio entre filas y columnas */
gap: 10px 20px; /* Espacio de fila, espacio de columna */
row-gap: 10px;
column-gap: 20px;
}
```
## Propiedades de Elementos Flex
### flex-grow
```css
.item {
flex-grow: 1; /* El elemento crece para llenar el espacio disponible */
}
.item:first-child {
flex-grow: 2; /* Este elemento obtiene el doble de crecimiento */
}
```
### flex-shrink
```css
.item {
flex-shrink: 0; /* El elemento no se encogerá */
flex-shrink: 1; /* El elemento se encoge (por defecto) */
}
```
### flex-basis
```css
.item {
flex-basis: 200px; /* Tamaño inicial antes de crecer/encogerse */
}
```
### flex (Abreviación)
```css
.item {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
flex: 2; /* flex-grow: 2, flex-shrink: 1, flex-basis: 0% */
flex: 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}
```
### align-self
```css
.item {
align-self: auto; /* Hereda del contenedor (por defecto) */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
}
```
### order
```css
.item {
order: 0; /* Orden por defecto */
}
.item:first-child {
order: 1; /* Se mueve al final */
}
.item:last-child {
order: -1; /* Se mueve al inicio */
}
```
## Diseños Comunes
### Barra de Navegación
```css
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background: #333;
color: white;
}
.nav-links {
display: flex;
gap: 20px;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
}
```
### Diseño de Tarjetas
```css
.cards {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 300px; /* Crecer, encoger, min-width 300px */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
```
### Centrar
```css
.center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
```
### Footer Fijo (Sticky)
```css
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1; /* Toma el espacio restante */
}
.footer {
padding: 20px;
background: #333;
color: white;
}
```
### Diseño de Formulario
```css
.form-row {
display: flex;
gap: 20px;
margin-bottom: 15px;
}
.form-row label {
flex: 0 0 100px; /* Ancho fijo de etiqueta */
}
.form-row input {
flex: 1; /* Input toma el espacio restante */
}
```
## Flexbox Responsivo
```css
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 300px; /* Apilar en pantallas pequeñas */
}
@media (min-width: 768px) {
.item {
flex: 0 0 calc(50% - 10px); /* Dos columnas */
}
}
@media (min-width: 1024px) {
.item {
flex: 0 0 calc(33.333% - 14px); /* Tres columnas */
}
}
```
## Soporte de Navegadores
Flexbox es compatible con todos los navegadores modernos.
```css
.container {
display: -webkit-box; /* Safari antiguo */
display: -webkit-flex; /* Chrome, Safari antiguos */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Estándar */
}
```
## Resumen
- Flexbox: diseño unidimensional con `display: flex`
- Propiedades del contenedor: flex-direction, flex-wrap, justify-content, align-items, align-content, gap
- Propiedades de elementos: flex-grow, flex-shrink, flex-basis, flex, align-self, order
- `justify-content`: alineación del eje principal
- `align-items`: alineación del eje transversal
- `flex: 1` hace que el elemento crezca para llenar el espacio
- Casos de uso comunes: navegación, diseños de tarjetas, centrar, footer fijo
1
2
3
Comments
Comments powered by Giscus
To enable comments, add your Giscus embed code here.
Learn more about Giscus →