# Guía rápida de Flexbox
Flexbox es un sistema de elementos flexibles los cuales se adaptan y colocan automáticamente haciendo más fácil personalizar diseños responsivos. Está pensando para diseños en una sola dirección, ya sea filas y columnas. En Flexbox tenemos los “flex containers”, que es el elemento que contiene los elementos flexibles y los “flex items” que son los elementos dentro del “flex container”.
**Estructura básica para utilizar Flexbox
**
```
*{
box-sizing: border-box;
}
.flex-container{
display: flex;
}
```
**Atributos para indicar si utilizamos renglones o columnas**
```
flex-direction: column;
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column-reverse;
```
**Permitir cambio de linea o no**
```
flex-wrap: wrap;
flex-wrap: nowrap;
```
**Centrar objetos de manera horizontal**
```
.flex-container{
display: flex;
justify-content: center;
}
```
**Alinear objetos a la izquierda**
```
.flex-container{
display: flex;
justify-content: flex-start;
}
```
**Alinear objetos a la derecha**
```
.flex-container{
display: flex;
justify-content: flex-end;
}
```
**Distribuir los objetos de manera uniforme, pero alineados a la izquierda y derecha
**
```
.flex-container{
display: flex;
justify-content: space-between;
}
```
**Distribuir los objetos de manera uniforme, dejando espacio a la izquierda y derecha**
```
.flex-container{
display: flex;
justify-content: space-around;
}
```
**Centrar objetos de manera vertical**
```
.flex-container{
display: flex;
align-items: center;
height: 300px;
}
```
**Alinear hacia arriba los objetos (vertical)**
```
.flex-container{
display: flex;
align-items: flex-start;
height: 300px;
}
```
**Alinear hacia abajo los objetos (vertical)
**
```
.flex-container{
display: flex;
align-items: flex-end;
height: 300px;
}
```
**Elementos ocupan todo el espacio vertical**
```
```
**Definir si un elemento ocupará más espacio que el otro
**
```
```
**Definir el mínimo que debe medir un elemento
**
```
1
```
**Centrado perfecto
**
```
.flex-container{
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
```
**Definir el porcentaje de espacio que ocupará cada elemento
**
```
```