Flex en Bootstrap

Descargar como pdf o txt
Descargar como pdf o txt
Está en la página 1de 10

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:

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

Ver: Código 211.html

Para crear un contenedor en línea FlexBox, utilice la clase d-inline-flex:

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

Ver: Código 212.html


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:

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

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

<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>
Ver: Código 214.html
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:

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

Ver: Código 215.html

Llenar con Anchos Iguales


Utilizar .flex-fill en items flexibles para forzar a tener anchos iguales:

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

Ver: Código 216.html


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:

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

Ver: 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 ..):

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

Ver: 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):
GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

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

Ver: 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”

<div class="d-flex flex-wrap">..</div>


<div class="d-flex flex-wrap-reverse">..</div>
<div class="d-flex flex-nowrap">..</div>

Ver: Código 220.html


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.

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

Ver: 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).

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

Ver: 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).

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

Ver: Código 223.html


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


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


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

También podría gustarte