GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Flexbox (Cajas Flexibles) en CSS

Antes que el módulo de Diseño Flexbox, había cuatro modos de diseño:

 Bloque, por secciones en una página web.

 En línea, para el texto.
 Tabla, para dos dimensiones de datos de tabla.
 Posicionada, para la posición explícita de un elemento.

El cuadro del módulo de diseño flexible, hace que sea más fácil diseñar la estructura de diseño
flexible y sensible sin necesidad de utilizar el flotador (float) o posicionamiento.

Elementos Flexbox
Para empezar a utilizar el modelo Flexbox, es necesario definir primero un recipiente flexible.

El elemento anterior representa un recipiente flex (el área azul) con tres elementos de flexión.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Ver: Código 400.html

Elemento Padre (Contenedor)

El contenedor se vuelve flexible mediante el establecimiento de la propiedad display: flex :

.flex-container {
display: flex;
}

Las propiedades de contenedores flexibles son:

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 Align-content

La Propiedad flex-direction
La propiedad flex-direction define en qué dirección se quiere, que el contenedor apile los
elementos flexibles.
/*Vertical de arriba hacia abajo*/
.flex-container {
display: flex;
flex-direction: column;
}
Ver: Código 401.html

/*Vertical de abajo hacia arriba*/

.flex-container {
display: flex;
flex-direction: column-reverse;
}

Ver: Código 402.html

/*Horizontal de derecha a izquierda*/

.flex-container {
display: flex;
flex-direction: row;
}

Ver: Código 403.html

/*Horizontal de izquierda a derecha*/

.flex-container {
display: flex;
flex-direction: row-reverse;
}

Ver: Código 404.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La Propiedad flex-wrap
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse o no.
Los ejemplos a continuación tienen 12 elementos flexibles, para demostrar mejor la
propiedad flex-wrap.

/*Horizontal de izquierda a derecha*/

.flex-container {
display: flex;
flex-wrap: wrap;
}

Ver: Código 405.html

/*nowrap no ajusta los ítem, propiedad por defecto*/

.flex-container {
display: flex;
flex-wrap: nowrap;
}

Ver: Código 406.html

/*ajuste wrap-reverse ajusta los ítem de manera inversa*/

.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}

Ver: Código 407.html

La Propiedad flex-flow
La propiedad flex-flow es una propiedad abreviada para establecer el valor a las propiedades
flex-direction y flex-wrap.
.flex-container {
display: flex;
flex-wrap: wrap;
}

Ver: Código 408.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Justificar el Contenido
La propiedad justify-content se utiliza para alinear los elementos de la flexión:

/*ajuste al centro del contenedor*/

.flex-container {
display: flex;
justify-content: center;
}

Ver: Código 409.html

/*ajuste al inicio del contenedor*/

.flex-container {
display: flex;
justify-content: flex-starr;
}

Ver: Código 410.html

/*ajuste al final del contenedor*/

.flex-container {
display: flex;
justify-content: flex-end;
}

Ver: Código 411.html

/*space-around distribuye espacio antes entre y después del el elemento

flexible*/
.flex-container {
display: flex;
justify-content: flex-end;
}

Ver: Código 412.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/*space-between distribuye espacio entre elementos flexibles*/

.flex-container {
display: flex;
justify-content: space-between;
}

Ver: Código 413.html

La Propiedad align-item
La propiedad align-items se utiliza para alinear los elementos flexibles de manera vertical.

/*alineación vertical al centro*/

.flex-container {
display: flex;
height: 200px;
align-items: center;
}

Ver: Código 414.html

/*alineación vertical al inicio*/

.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}

Ver: Código 415.html

/*alineación vertical al final*/

.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}

Ver: Código 416.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/*alineación vertical stretch para ajustar al contenedor verticalmente*/

.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}

Ver: Código 417.html

/*alineación vertical en la línea base*/

.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}

Ver: Código 418.html

La propiedad align-content
La propiedad align-content se utiliza para alinear las líneas base de loe elementos flexibles.

/*alineación de contenido distribuyendo el espacio entre los elementos de

manera vertical*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}

Ver: Código 419.html

/*alineación de contenido distribuyendo el espacio antes, entre y después de

los elementos de manera vertical*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}

Ver: Código 420.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

/*alineación de contenido distribuyendo todo el espacio vertical (por

defecto)*/
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}

Ver: Código 421.html

/*alineación de contenido centrado verticalmente*/

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}

Ver: Código 422.html

/*alineación de contenido verticalmente al inicio del contenedor */

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}

Ver: Código 423.html

/*alineación de contenido verticalmente al final del contenedor*/

.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}

Ver: Código 424.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Centrado Perfecto
En el siguiente ejemplo vamos a resolver un problema de estilo muy común: El centrado perfecto.
Ajustamos las propiedades justify-content y align-items a “center” y los elementos
flexibles serán perfectamente centrados:

.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}

Ver: Código 425.html

Elementos Secundarios (Items)

Los elementos secundarios directos de un contenedor se convierte automáticamente en
elementos flexibles (flex).

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

Ver: Código 426.html

Las propiedades de los elementos flexibles son:

 orden
 flex-grow
 flex-shrink
 flex-basis
 flex
 align-self
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La propiedad de orden
La propiedad order especifica el orden de los elementos flexibles.
El primer elemento de flexión en el código necesariamente no tiene que aparecer como el primer
elemento en el diseño.

El valor debe ser un número, el valor por defecto es 0.

<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>

Ver: Código 427.html

La Propiedad flex-grow
La propiedad flex-grow especifica el tamaño que un elemento flexible crecerá en relación con
respecto a los otros elementos flexibles.

El valor debe ser un número, el valor por defecto es 0.

<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>

Ver: Código 428.html

La Propiedad flex-shrink
La propiedad flex-shrink especifica el tamaño que un elemento flexible se encogerá en
relación los otros elementos flexibles.

El valor debe ser un número, el valor predeterminado es 1.

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

<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>

Ver: Código 429.html

La Propiedad flex-basis
La propiedad flex-basis especifica la longitud inicial de un elemento flexible.
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>

Ver: Código 430.html

La Propiedad flex
La propiedad flex es una propiedad abreviada para las propiedades flex-grow, flex-shrink
y flex-basis.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>

Ver: Código 431.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

La Propiedad align-self
La propiedad align-self especifica la alineación para el elemento flexible seleccionado en el
interior del contenedor flexible.

La propiedad align-self anula la alineación por defecto fijada por el contenedor con la
propiedad align-items.

<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>

Ver: Código 432.html

Alinear 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>

Ver: Código 433.html

Galería de Imágenes Responsivas

Utilizando Flexbox
Utilice FlexBox para crear una galería de imágenes de respuesta que oscila entre cuatro, dos o
ancho completo imágenes, dependiendo del tamaño de la pantalla:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

@media (max-width: 800px) {

.column {
flex: 50%;
max-width: 50%;
}

Ver: Código 434.html

Sitio Web Utilizando Flexbox

Utilice FlexBox para crear un sitio web de respuesta, que contiene una barra de navegación
flexible y flexible de contenido:

Ver: Código 435.html