Flex Bootstrap 5

Cuadro flexible

La principal diferencia entre Bootstrap 3 y Bootstrap 4 & 5 es que Bootstrap 5 ahora utiliza flexbox en lugar de flotación para manejar el diseño.

El módulo de diseño de cuadro flexible, que permite diseñar estructuras de diseño responsivo flexible más fácilmente, sin necesidad de usar flotación o posicionamiento.

Si no está familiarizado con flex, puede aprender en nuestros Tutoriales de CSS Flexbox aprenda.

Notas:Las versiones de IE9 y anteriores no admiten Flexbox.

Notas:Si necesita soporte para IE8-9, utilice Bootstrap 3. Es la versión más estable de Bootstrap, y el equipo sigue apoyándola en correcciones de errores críticos y cambios en la documentación. Sin embargo, no se agregarán nuevas características.

实例

Para crear un contenedor flexbox y convertir directamente a elementos flex, utilice d-flex Clase:

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary">Proyecto elástico 3</div>

亲自试一试

实例

Para crear un contenedor flexbox en línea, utilice d-inline-flex Clase:

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary">Proyecto elástico 3</div>

亲自试一试

Dirección horizontal

Por favor, utilice .flex-row Mostrar horizontalmente los elementos flexibles (alineados en paralelo). Esto es la configuración predeterminada.

Consejo:usar .flex-row-reverse Se puede alinear a la derecha en la dirección horizontal:

实例

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary">Proyecto elástico 3</div>
<div class="d-flex flex-row-reverse bg-secondary"> <div class="p-2 bg-info">Proyecto elástico 1</div> <div class="p-2 bg-warning">Proyecto elástico 2</div> <div class="p-2 bg-primary">Proyecto elástico 3</div>

亲自试一试

Dirección vertical

Por favor, utilice .flex-column Mostrar verticalmente los elementos flex (apilados entre sí), o usar .flex-column-reverse Invertir la dirección vertical:

实例

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary">Proyecto elástico 3</div>
<div class="d-flex flex-column-reverse"> <div class="p-2 bg-info">Proyecto elástico 1</div> <div class="p-2 bg-warning">Proyecto elástico 2</div> <div class="p-2 bg-primary">Proyecto elástico 3</div>

亲自试一试

Alinea contenido

usar .justify-content-* La clase puede cambiar la alineación de los elementos flexibles. Las clases válidas son:

实例

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

亲自试一试

Ancho igual

usar en proyectos flex .flex-fill Se puede forzar que tengan el mismo ancho:

实例

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Elemento flexible 1</div>
  <div class="p-2 bg-warning flex-fill">Elemento flexible 2</div>
  <div class="p-2 bg-primary flex-fill">Elemento flexible 3</div>

亲自试一试

Estirar

usar en proyectos flex .flex-grow-1 Se puede ocupar el espacio adicional. En el siguiente ejemplo, los dos primeros elementos flex ocupan el espacio necesario, mientras que el último elemento ocupa el espacio adicional disponible:

实例

<div class="d-flex">
  <div class="p-2 bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary flex-grow-1">Proyecto elástico 3</div>

亲自试一试

Consejo:usar en proyectos flex .flex-shrink-1 puede reducirse si es necesario.

Orden

usar .order La clase puede cambiar el orden visual de un proyecto flex específico. Las clases válidas van de 0 a 5, donde el número más bajo tiene la mayor prioridad (order-1 se muestra antes que order-2, etc.):

实例

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Proyecto elástico 1</div>
  <div class="p-2 bg-warning order-2">Proyecto elástico 2</div>
  <div class="p-2 bg-primary order-1">Proyecto elástico 3</div>

亲自试一试

margen externo automático

usar .ms-auto(empujando el proyecto a la derecha) o usar .me-auto(empujando el proyecto a la izquierda) Se puede agregar fácilmente un margen automático a los proyectos elásticos:

实例

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Proyecto elástico 1</div>
  <div class="p-2 bg-warning">Proyecto elástico 2</div>
  <div class="p-2 bg-primary">Proyecto elástico 3</div>
<div class="d-flex bg-secondary"> <div class="p-2 bg-info">Proyecto elástico 1</div> <div class="p-2 bg-warning">Proyecto elástico 2</div> <div class="p-2 me-auto bg-primary">Proyecto elástico 3</div>

亲自试一试

Alinear en una nueva línea

mediante .flex-nowrap(por defecto),.flex-wrap o .flex-wrap-reverseque permite controlar cómo los proyectos flex se empacan en el contenedor flex.

实例

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

亲自试一试

Alinea contenido

Por favor, utilice .align-content-* Clase que controla la alineación vertical de los proyectos de elasticidad. Las clases válidas son:

Notas:Estas clases no tienen efecto en los elementos flexibles en una sola línea.

Haga clic en el siguiente botón para ver la diferencia entre las cinco clases al cambiar la forma de alineación vertical de los elementos flexibles en el cuadro de ejemplo:

实例

<div class="d-flex flex-wrap alinearse-al-principio">..</div>
<div class="d-flex flex-wrap alinearse-al-final">..</div>
<div class="d-flex flex-wrap alinearse-al-centro">..</div>
<div class="d-flex flex-wrap alinearse-around">..</div>
<div class="d-flex flex-wrap alinearse-a-estirar">..</div>

亲自试一试

Alinea elementos

Por favor, utilice .alinearse-a-* Clase de controlSencilloLa forma de alineación vertical de los elementos flexibles. Las clases válidas son:

Haga clic en el siguiente botón para ver la diferencia entre las cinco clases:

实例

<div class="d-flex alinearse-al-principio">..</div>
<div class="d-flex alinearse-al-final">..</div>
<div class="d-flex alinearse-al-centro">..</div>
<div class="d-flex alinearse-a-la-basura">..</div>
<div class="d-flex alinearse-a-estirar">..</div>

亲自试一试

Auto-alineación

Por favor, utilice .alinearse-a-* Clase de controlEspecificar el elemento flexibleLa forma de alineación vertical. Las clases válidas son:

单击下面的按钮查看五个类之间的区别：

实例


  
Flex item 1

  
Flex item 2

  
Flex item 3

亲自试一试

响应式 Flex 类

所有弹性类都带有额外的响应类，这使得在特定屏幕尺寸上设置特定 flex 类变得容易。

* 符号可以替换为 sm、md、lg、xl 或 xxl，分别代表小、中、大、超大和特大屏幕。

搜索特定的弹性类 ..

类 描述 例子
弹性容器
.d-*-flex 为不同的屏幕创建 flexbox 容器。 Inténtalo
.d-*-inline-flex 为不同的屏幕创建行内的 flexbox 容器。 Inténtalo
方向
.flex-*-row 在不同屏幕上水平显示弹性项目。 Inténtalo
.flex-*-row-reverse 在不同的屏幕上水平和右对齐显示弹性项目。 Inténtalo
.flex-*-column 在不同屏幕上垂直显示弹性项目。 Inténtalo
.flex-*-column-reverse 在不同的屏幕屏幕上以相反的顺序垂直显示弹性项目。 Inténtalo
齐行的内容
.justify-content-*-start 在不同屏幕上从开头（左对齐）显示弹性项目。 Inténtalo
.justify-content-*-end 在不同屏幕的末尾（右对齐）显示弹性项目。 Inténtalo
.justify-content-*-center 在不同屏幕的弹性容器中心显示弹性项目。 Inténtalo
.justify-content-*-between 在不同屏幕上的均等显示弹性项目。 Inténtalo
.justify-content-*-around 在不同屏幕上“围绕”显示弹性项目。 Inténtalo
Fill / 等宽
.flex-*-fill 强制弹性项目在不同屏幕上的宽度相等。 Inténtalo
扩展
.flex-*-grow-0 不要让项目在不同的屏幕上扩展。
.flex-*-grow-1 使项目在不同的屏幕上扩展。
收缩
.flex-*-shrink-0 No permite que los elementos se contraigan en diferentes pantallas.
.flex-*-shrink-1 Hace que los elementos se contraigan en diferentes pantallas.
Orden
.order-*-0-12 Cambia el orden de 0 a 12 en pantallas pequeñas. Inténtalo
Alinear en una nueva línea
.flex-*-nowrap No hace que los elementos se alineen en una nueva línea en diferentes pantallas. Inténtalo
.flex-*-wrap Hace que los elementos se alineen en una nueva línea en diferentes pantallas. Inténtalo
.flex-*-wrap-reverse Invierte el salto de línea de elementos en diferentes pantallas. Inténtalo
Alinea contenido
.align-content-*-start Alinea elementos desde el principio en diferentes pantallas. Inténtalo
.align-content-*-end Alinea elementos en el extremo final de diferentes pantallas. Inténtalo
.align-content-*-center Alinea elementos en el centro de diferentes pantallas. Inténtalo
.align-content-*-around Alinea elementos en diferentes pantallas en su alrededor. Inténtalo
.align-content-*-stretch Estira elementos en diferentes pantallas. Inténtalo
Alinea elementos
.align-items-*-start Alinea elementos en una línea desde el principio en diferentes pantallas. Inténtalo
.align-items-*-end Alinea elementos en una línea en el extremo final de diferentes pantallas. Inténtalo
.align-items-*-center Alinea elementos en una línea en el centro de diferentes pantallas. Inténtalo
.align-items-*-baseline Alinea elementos en una línea en la línea base de diferentes pantallas. Inténtalo
.align-items-*-stretch Estira elementos en una línea en diferentes pantallas. Inténtalo
Alinea a sí mismo
.align-self-*-start Alinea los elementos flexibles desde el principio en diferentes pantallas. Inténtalo
.align-self-*-end Alinea los elementos flexibles en el extremo final de diferentes pantallas. Inténtalo
.align-self-*-center Alinea los elementos flexibles en el centro de diferentes pantallas. Inténtalo
.align-self-*-baseline Alinea los elementos flexibles en la línea base de diferentes pantallas. Inténtalo
.align-self-*-stretch Estira los elementos flexibles en diferentes pantallas. Inténtalo