Bootstrap 4 Flex

Usa clases flexibles para controlar el diseño de los componentes de Bootstrap 4.

Flexbox

La mayor diferencia entre Bootstrap 3 y Bootstrap 4 es que Bootstrap 4 ahora usa flexbox, en lugar de flotadores, para manejar el diseño.

El módulo de diseño de caja flexible facilita el diseño de una estructura de diseño flexible y receptiva sin utilizar flotador o posicionamiento.

Flex Bootstrap 4

Nota: Flexbox no es compatible con IE9 y versiones anteriores.

Si necesitas soporte para IE8-9, usa Bootstrap 3. Es la versión más estable de Bootstrap, y aún es compatible con el equipo para correcciones de errores críticos y cambios de documentación. Sin embargo, no se agregarán nuevas funciones.

Para crear un contenedor flexbox y transformar hijos directos en elementos flex, usa la clase d-flex.

Ejm

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

Para crear un contenedor flexbox en línea, usa la clase d-inline-flex.

Ejm

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

Dirección horizontal

Usa .flex-row para mostrar los elementos flexibles horizontalmente (uno al lado del otro). Esto es por defecto. Usa .flex-row-reverse para alinear a la derecha la dirección horizontal.

Dirección horizontal Flex Bootstrap 4

Ejm

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

Dirección vertical

Utiliza .flex-column para mostrar los elementos flexibles verticalmente (uno encima del otro), o .flex-column-reverse para invertir la dirección vertical.

Dirección vertical Flex Boostrap 4

Ejm

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

Contenido justificado

Usa las clases .justify-content- * para cambiar la alineación de los elementos flexibles. Las clases válidas son start (default), end, center, between o around.

Contenido justificado Flex Boostrap 4

Ejm

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

Relleno / anchos iguales

Use .flex-fill en elementos flexibles para forzarlos en anchos iguales.

Ejm

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

Grow (Crecer)

Usa .flex-grow-1 en un elemento flexible para ocupar el resto del espacio. En el siguiente ejemplo, los dos primeros elementos flexibles ocupan el espacio necesario, mientras que el último elemento ocupa el resto del espacio disponible.

Grow Flex Bootstrap 4

Ejm

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

Consejo: Use .flex-shrink-1 en un elemento flexible para que se encoja si es necesario.

Orden

Cambia el orden visual de un elemento (s) flexible específico (s) con las clases .order. Las clases válidas son de 0 a 12, donde el número más bajo tiene la prioridad más alta (el orden-1 se muestra antes del orden-2, etc.).

Orden Flex Boostrap 4

Ejm

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

Auto márgenes

Agregue fácilmente márgenes automáticos a elementos flexibles con .mr-auto (elementos de inserción a la derecha), o utilizando .ml-auto (elementos de inserción a la izquierda):Márgenes con Flex Boostrap 4

Ejm

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

Wrap (Envolver)

Controla como los elementos flexibles se envuelven en un contenedor flexible con .flex-nowrap (predeterminado), .flex-wrap o .flex-wrap-reverse.

Ejm

<div class="container mt-3">
  <h2>Wrap</h2>
  <p>Control how flex items wrap in a flex container with .flex-nowrap (default), .flex-wrap or .flex-wrap-reverse.</p>
  <p><code>.flex-wrap:</code></p>
  <div class="d-flex flex-wrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p><code>.flex-wrap-reverse:</code></p>
  <div class="d-flex flex-wrap-reverse bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
  </div>
  <br>
  <p><code>.flex-nowrap:</code></p>
  <div class="d-flex flex-nowrap bg-light">
    <div class="p-2 border">Flex item 1</div>
    <div class="p-2 border">Flex item 2</div>
    <div class="p-2 border">Flex item 3</div>
    <div class="p-2 border">Flex item 4</div>
    <div class="p-2 border">Flex item 5</div>
    <div class="p-2 border">Flex item 6</div>
    <div class="p-2 border">Flex item 7</div>
    <div class="p-2 border">Flex item 8</div>
    <div class="p-2 border">Flex item 9</div>
    <div class="p-2 border">Flex item 10</div>
    <div class="p-2 border">Flex item 11</div>
    <div class="p-2 border">Flex item 12</div>
    <div class="p-2 border">Flex item 13 </div>
    <div class="p-2 border">Flex item 14</div>
    <div class="p-2 border">Flex item 15</div>
    <div class="p-2 border">Flex item 16</div>
    <div class="p-2 border">Flex item 17</div>
    <div class="p-2 border">Flex item 18</div>
    <div class="p-2 border">Flex item 19</div>
    <div class="p-2 border">Flex item 20</div>
    <div class="p-2 border">Flex item 21</div>
    <div class="p-2 border">Flex item 22</div>
    <div class="p-2 border">Flex item 23</div>
    <div class="p-2 border">Flex item 24</div>
    <div class="p-2 border">Flex item 25</div>
    <div class="p-2 border">Flex item 26</div>
    <div class="p-2 border">Flex item 27</div>
    <div class="p-2 border">Flex item 28</div>
    <div class="p-2 border">Flex item 29</div>
    <div class="p-2 border">Flex item 30</div>
    <div class="p-2 border">Flex item 31</div>
    <div class="p-2 border">Flex item 32</div>
    <div class="p-2 border">Flex item 33</div>
    <div class="p-2 border">Flex item 34</div>
    <div class="p-2 border">Flex item 35</div>
  </div>
  <br>
</div>

Alineando contenido

Controla la alineación vertical de los elementos flexibles reunidos con las clases .align-content- *. Las clases válidas son:

  • .align-content-start (predeterminado)
  • .align-content-end
  • .align-content-center
  • .align-content-between
  • .align-content-around
  • .align-content-stretch.

Nota: Estas clases no tienen efecto en filas individuales de elementos flexibles.

Ejm

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

Alinear elementos

Controla la alineación vertical de filas individuales de elementos flexibles con las clases .align-items- *. Las clases válidas son:

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch (predeterminado).

Ejm

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

Alinearse

Controla la alineación vertical de un elemento flexible especificado con las clases .align-self- *. Las clases válidas son:

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch (valor predeterminado).

Ejm

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

Clases Flex Responsive

Todas las clases flexibles vienen con clases responsive adicionales, lo que facilita la configuración de una clase flexible específica en un tamaño de pantalla específico.

El símbolo * se puede reemplazar con sm, md, lg o xl, que representa pantallas pequeñas, medianas, grandes o grandes.

Clases Descripción
Flex Container
.d-*-flex Crea un contenedor flexbox para diferentes pantallas
.d-*-inline-flex Crea un contenedor flexbox en línea para diferentes pantallas
Direction
.flex-*-row Mostrar elementos flexibles horizontalmente en diferentes pantallas
.flex-*-row-reverse Muestra elementos flexibles horizontalmente y alineados a la derecha, en diferentes pantallas
.flex-*-column Mostrar elementos flexibles verticalmente en diferentes pantallas
.flex-*-column-reverse Visualizar elementos flexibles verticalmente, con orden inverso, en pantallas de pantallas diferentes
Justified Content
.justify-content-*-start Mostrar elementos flexibles desde el principio (alineados a la izquierda) en diferentes pantallas
.justify-content-*-end Mostrar elementos flexibles al final (alineados a la derecha) en diferentes pantallas
.justify-content-*-center Mostrar elementos flexibles en el centro de un contenedor flexible en diferentes pantallas
.justify-content-*-between Mostrar elementos flexibles en “entre” en diferentes pantallas
.justify-content-*-around Mostrar elementos flexibles “alrededor” en diferentes pantallas
Fill / Equal Width
.flex-*-fill Forzar elementos flexibles en anchos iguales en diferentes pantallas
Grow
.flex-*-grow-0 No hace crecer los artículos en diferentes pantallas
.flex-*-grow-1 Haz que los artículos crezcan en diferentes pantallas
Shrink
.flex-*-shrink-0 No hace que los artículos se encojan en diferentes pantallas
.flex-*-shrink-1 Hacer que los artículos se reduzcan en diferentes pantallas
Order
.order-*-0-12 Cambiar el orden de 0 a 12 en pantallas pequeñas
Wrap
.flex-*-nowrap No envuelve artículos en diferentes pantallas
.flex-*-wrap Wrap items on different screens
.flex-*-wrap-reverse Invierta la envoltura de elementos en diferentes pantallas
Align Content
.align-content-*-start Alinea los elementos reunidos desde el principio en diferentes pantallas
.align-content-*-end Alinea los elementos reunidos al final en diferentes pantallas
.align-content-*-center Alinea los elementos reunidos en el centro en diferentes pantallas
.align-content-*-around Alinea los elementos reunidos “alrededor” en diferentes pantallas
.align-content-*-stretch Estirar elementos reunidos en diferentes pantallas
Align Items
.align-items-*-start Alinea filas individuales de elementos desde el principio en diferentes pantallas
.align-items-*-end Alinea filas individuales de elementos al final en diferentes pantallas
.align-items-*-center Alinea filas individuales de elementos en el centro en diferentes pantallas
.align-items-*-baseline Alinea filas individuales de elementos en la línea base en diferentes pantallas
.align-items-*-stretch Estira filas individuales de elementos en diferentes pantallas
Align Self
.align-self-*-start Alinea un elemento flexible desde el principio en diferentes pantallas
.align-self-*-end Alinea un elemento flexible al final en diferentes pantallas
.align-self-*-center Alinea un elemento flexible en el centro en diferentes pantallas
.align-self-*-baseline Alinea un elemento flexible en la línea de base de diferentes pantallas
.align-self-*-stretch Estira un elemento flexible en diferentes pantallas