El documento explica cómo utilizar las clases flexibles de Bootstrap 4 para controlar la disposición de componentes. Bootstrap 4 ahora utiliza Flexbox en lugar de flotadores para manejar el diseño. Se describen varias clases como .d-flex, .justify-content-center, .flex-grow-1 que permiten controlar la dirección, alineación y tamaño de los elementos flexibles de manera responsiva en diferentes tamaños de pantalla.

1. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Flex en BOOSTRAP
Utilizar las clases flexibles de Bootstrap 4 para controlar la disposición de componentes.
Flexbox
La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que el Bootstrap 4 para manejar el diseño
ahora utiliza FlexBox en lugar de los flotadores. El cuadro de diseño del módulo flexible, hace que
sea más fácil diseñar la estructura de diseño flexible y responsivo sin necesidad de utilizar flotador
o posicionamientos.
Nota: Flexbox no es compatible con IE9 o anteriores.
Para crear un contenedor FlexBox y transformar los hijos directos en elementos flexibles, utilice la
clase d-flex:
Código 211.html
Para crear un contenedor en línea FlexBox, utilice la clase d-inline-flex:
Código 212.html
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>

2. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Dirección horizontal
Utilizar .flex-row para visualizar los elementos de flexión horizontal (lado a lado). Esta es la opción
predeterminada. Utilice .flex-row-reverse para alinear a la derecha la dirección horizontal:
Código 213.html
Dirección vertical
Utilice .flex-column para mostrar los elementos de flexión vertical (en la parte superior de la otra),
o .flex-column-reverse para invertir la dirección vertical:
Código 214.html
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>

3. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Justificar el Contenido
Utilizar las clases .justify-content-* para cambiar la alineación de los elementos flexibles. Las clases
válidas son start (por defecto), end, center, betweeno around:
Código 215.html
Llenar con Anchos Iguales
Utilizar .flex-fill en items flexibles para forzar a tener anchos iguales:
Código 216.html
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

4. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Crecer
Utilizar .flex-grow-1 en un elemento de flexión para asumir el resto del espacio. En el siguiente
ejemplo, los dos primeros puntos de flexión ocupan su espacio necesario, mientras que el último
elemento ocupa el resto del espacio disponible:
Código 217.html
Tip: Utilice .flex-shrink-1en un elemento de flexión para reducir si es necesario.
Orden
Cambiar el orden visual de un elemento de flexión específico (s) con las clases .order. Las clases
válidas son de 0 a 12, donde el número más bajo tiene prioridad más alta (para-1 se muestra antes
de la orden-2, etc ..):
Código 218.html
Los Márgenes Automáticos
Agregue fácilmente los márgenes automáticamente para flexionar elementos con .mr-auto
(empuja los items a la derecha), o mediante el uso de .ml-auto(empuja los items a la izquierda):
<div class="d-flex">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

5. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Código 219.html
Envolver o Ajustar
Para controlar la forma de flexión de los ítems, podemos envolverlos en un contenedor con
flexión .flex-nowrap(por defecto), .flex-wrap o .flex-wrap-reverse.
“Flex-nowrap”
“Flex-wrap”
“Flex-wrap-reverse”
Código 220.html
<div class="d-flex bg-secondary">
<div class="p-2 mr-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 ml-auto bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-wrap">..</div>
<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

6. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Alinear Contenido
Controlar la alineación vertical de los elementos flexibles agrupados con las clases .align-content-
*. Las clases válidas son .align-content-start(por defecto), .align-content-end, .align-content-
center, .align-content-between, .align-content-around y .align-content-stretch.
Nota: Estas clases no tienen ningún efecto en filas sencillas de elementos flexibles.
Código 221.html
Alinear Elementos
Para controlar la alineación vertical de filas individuales de elementos flexibles usamos las
clases .align-items-* . Las clases válidas son .align-items-start, .align-items-end, .align-items-
center, .align-items-baseline, y .align-items-stretch (por defecto).
Código 222.html
Alinear Automáticamente
Para controlar la alineación vertical de un elemento de flexión especificada con las clases .align-
self-*. Las clases válidas son .align-self-start, .align-self-end, .align-self-center, .align-self-baseline,
y .align-self-stretch (por defecto).
Código 223.html
<div class="d-flex flex-wrap align-content-start">..</div>
<div class="d-flex flex-wrap align-content-end">..</div>
<div class="d-flex flex-wrap align-content-center">..</div>
<div class="d-flex flex-wrap align-content-around">..</div>
<div class="d-flex flex-wrap align-content-stretch">..</div>
<div class="d-flex align-items-start">..</div>
<div class="d-flex align-items-end">..</div>
<div class="d-flex align-items-center">..</div>
<div class="d-flex align-items-baseline">..</div>
<div class="d-flex align-items-stretch">..</div>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>

7. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
Las Clases Flex Responsivas
Todas las clases de flexión vienen con clases adicionales de respuesta, lo que hace que sea fácil de
configurar una clase específica de la flexión en un tamaño de pantalla específico.
El *símbolo puede ser sustituido con sm, md, lg o xl, que representa pequeño, mediano, pantallas
grandes o XLarge.
Clase Descripción
Contenedor Flex
.d-*-flex Crea un contenedor flexbox para diferentes pantallas.
.d-*-inline-flex Crea un contenedor flexbox inline para diferentes pantallas.
Dirección
.flex-*-row Muestra los ítems del flex horizontalmente en diferentes pantallas.
.flex-*-row-reverse Muestra los ítems del flex horizontalmente y alineados a la derecha
en diferentes pantallas.
.flex-*-column Muestra los ítems del flex verticalmente en diferentes pantallas.
.flex-*-column-reverse Muestra los ítems del flex verticalmente y alineados a la derecha en
diferentes pantallas.
Justificar Contenido
.justify-content-*-start Muestra los ítems del flex al inicio (alineados a la izquierda) en
diferentes pantallas.
.justify-content-*-end Muestra los ítems del flex al final (alineados a la derecha) en
diferentes pantallas.

8. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
.justify-content-*-center Muestra los ítems del flex en el centro en diferentes pantallas.
.justify-content-*-between Muestra los ítems del flex “entre” elementos en diferentes pantallas.
.justify-content-*-around Muestra los ítems del flex “al rededor” de elementos en diferentes
pantallas.
Llenar / Igual Ancho
.flex-*-fill Fuerza a los ítems del flex a tener igual ancho en diferentes pantallas.
Crecer
.flex-*-grow-0 No permite crecer a los ítems en diferentes pantallas.
.flex-*-grow-1 Permite crecer a los ítems en diferentes pantallas.
Encoger
.flex-*-shrink-0 No permite reducir o encoger a los ítems en diferentes pantallas.
.flex-*-shrink-1 Permite reducir o encoger a los ítems en diferentes pantallas.
Orden
.order-*-0-12 Cambia el orden de 0 a 12 en pantallas pequeñas.
Envolver
.flex-*-nowrap No permite encoger los items en diferentes pantallas.
.flex-*-wrap Permite encoger los items en diferentes pantallas.

9. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
.flex-*-wrap-reverse Permite encoger de manera inversa los items en diferentes pantallas.
Alinear Contenido
.align-content-*-start Alinea los items agrupados al inicio en diferentes pantallas.
.align-content-*-end Alinea los items agrupados al final en diferentes pantallas.
.align-content-*-center Alinea los items agrupados al centro en diferentes pantallas.
.align-content-*-around Alinea los items agrupados al rededor en diferentes pantallas.
.align-content-*-stretch Estira los items agrupados en diferentes pantallas.
Alinear Items
.align-items-*-start Alinea filas simples de items al inicio en diferentes pantallas.
.align-items-*-end Alinea filas simples de items al final en diferentes pantallas.
.align-items-*-center Alinea filas simples de items al centro en diferentes pantallas.
.align-items-*-baseline Alinea filas simples de items en la línea base en diferentes pantallas.
.align-items-*-stretch Estira filas simples de items en diferentes pantallas.
Auto Alineación
.align-self-*-start Alinea un ítem del flex al inicio en diferentes pantallas
.align-self-*-end Alinea un ítem del flex al final en diferentes pantallas

10. GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”
.align-self-*-center Alinea un ítem del flex al centro en diferentes pantallas
.align-self-*-baseline Alinea un ítem del flex en la línea base en diferentes pantallas
.align-self-*-stretch Estira un ítem del flex en diferentes pantallas