Bootstrap 4 Flex
Bootstrap 4 Flex
Use clases flexibles para controlar el diseño de los componentes de Bootstrap 4.
Caja flexible
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 receptiva flexible sin usar flotación o posicionamiento. Si eres nuevo en flex, puedes leer sobre esto en nuestro Tutorial de CSS Flexbox .
Nota: Flexbox no es compatible con IE9 y versiones anteriores.
Si necesita compatibilidad con IE8-9, use Bootstrap 3. Es la versión más estable de Bootstrap y el equipo aún la admite para correcciones de errores críticos y cambios en la documentación. Sin embargo, no se le agregarán nuevas funciones.
Para crear un contenedor de caja flexible y transformar elementos secundarios directos en elementos flexibles, use la d-flexclase:
Ejemplo
Ejemplo
<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, use la d-inline-flexclase:
Ejemplo
Ejemplo
<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
Úselo .flex-rowpara mostrar los elementos flexibles horizontalmente (uno al lado del otro). Esto es predeterminado.
Sugerencia: use .flex-row-reverse
para alinear a la derecha la dirección horizontal:
Ejemplo
Ejemplo
<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
Use .flex-columnpara mostrar los elementos flexibles verticalmente (uno encima del otro) o .flex-column-reverse
para invertir la dirección vertical:
Ejemplo
Ejemplo
<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>
Justificar contenido
Use las .justify-content-*clases para cambiar la alineación de los elementos flexibles. Las clases válidas son start(predeterminadas) , end, o :centerbetweenaround
Ejemplo
Ejemplo
<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
Úselo .flex-fillen elementos flexibles para forzarlos a tener anchos iguales:
Ejemplo
Ejemplo
<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>
Crecer
Úselo .flex-grow-1en un artículo 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:
Ejemplo
Ejemplo
<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: Úselo .flex-shrink-1en un artículo flexible para que se encoja si es necesario.
Pedido
Cambie el orden visual de elementos flexibles específicos con las .orderclases. Las clases válidas son de 0 a 12, donde el número más bajo tiene la prioridad más alta (el pedido 1 se muestra antes que el pedido 2, etc.):
Ejemplo
Ejemplo
<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>
Márgenes automáticos
Agregue fácilmente márgenes automáticos para flexionar elementos con .mr-auto(empujar elementos a la derecha) o usando .ml-auto(empujar elementos a la izquierda):
Ejemplo
Ejemplo
<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>
Envoltura
Controle cómo se envuelven los elementos flexibles en un contenedor flexible con .flex-nowrap(predeterminado) .flex-wrapo .flex-wrap-reverse.
Haga clic en los botones a continuación para ver la diferencia entre las tres clases, cambiando la envoltura de los elementos flexibles en el cuadro de ejemplo:
Ejemplo
Ejemplo
<div class="d-flex flex-wrap">..</div>
<div class="d-flex
flex-wrap-reverse">..</div>
<div class="d-flex
flex-nowrap">..</div>
Alinear contenido
Controle la alineación vertical de los elementos flexibles reunidos.align-content-* con las
clases. Las clases válidas son .align-content-start(predeterminadas) , .align-content-end, .align-content-center, y ..align-content-between.align-content-around.align-content-stretch
Nota: estas clases no tienen efecto en filas individuales de elementos flexibles.
Ejemplo
Ejemplo
<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
Controle la alineación vertical de filas individuales de elementos flexibles con las .align-items-*
clases. Las clases válidas son .align-items-start, .align-items-end, .align-items-center, .align-items-baseliney .align-items-stretch
(predeterminado).
Haga clic en los botones a continuación para ver la diferencia entre las cinco clases:
Ejemplo
Ejemplo
<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>
Alinear uno mismo
Controle la alineación vertical de un elemento flexible específico con las .align-self-*
clases. Las clases válidas son .align-self-start, .align-self-end, .align-self-center, .align-self-baseliney .align-self-stretch
(predeterminado).
Haga clic en los botones a continuación para ver la diferencia entre las cinco clases:
Ejemplo
Ejemplo
<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 flexibles receptivas
All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.
The * symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.
| Class | Description | Example |
|---|---|---|
| Flex Container | ||
.d-*-flex |
Creates a flexbox container for different screens | |
.d-*-inline-flex |
Creates an inline flexbox container for different screens | |
| Direction | ||
.flex-*-row |
Display flex items horizontally on different screens | |
.flex-*-row-reverse |
Display flex items horizontally, and right-aligned, on different screens | |
.flex-*-column |
Display flex items vertically on different screens | |
.flex-*-column-reverse |
Display flex items vertically, with reversed order, on different screens screens | |
| Justified Content | ||
.justify-content-*-start |
Display flex items from the start (left-aligned) on different screens | |
.justify-content-*-end |
Display flex items at the end (right-aligned) on different screens | |
.justify-content-*-center |
Display flex items in the center of a flex container on different screens | |
.justify-content-*-between |
Display flex items in "between" on different screens | |
.justify-content-*-around |
Display flex items "around" on different screens | |
| Fill / Equal Width | ||
.flex-*-fill |
Force flex items into equal widths on different screens | |
| Grow | ||
.flex-*-grow-0 |
Don't make the items grow on different screens | |
.flex-*-grow-1 |
Make items grow on different screens | |
| Shrink | ||
.flex-*-shrink-0 |
Don't make the items shrink on diferent screens | |
.flex-*-shrink-1 |
Make items shrink on different screens | |
| Order | ||
.order-*-0-12 |
Change the order from 0 to 12 on small screens | |
| Wrap | ||
.flex-*-nowrap |
Don't wrap items on different screens | |
.flex-*-wrap |
Wrap items on different screens | |
.flex-*-wrap-reverse |
Reverse the wrapping of items on different screens | |
| Align Content | ||
.align-content-*-start |
Align gathered items from the start on different screens | |
.align-content-*-end |
Align gathered items at the end on different screens | |
.align-content-*-center |
Align gathered items in the center on different screens | |
.align-content-*-around |
Align gathered items "around" on different screens | |
.align-content-*-stretch |
Stretch gathered items on different screens | |
| Align Items | ||
.align-items-*-start |
Align single rows of items from the start on different screens | |
.align-items-*-end |
Align single rows of items at the end on different screens | |
.align-items-*-center |
Align single rows of items in the center on different screens | |
.align-items-*-baseline |
Align single rows of items on the baseline on different screens | |
.align-items-*-stretch |
Stretch single rows of items on different screens | |
| Align Self | ||
.align-self-*-start |
Align a flex item from the start on different screens | |
.align-self-*-end |
Align a flex item at the end on different screens | |
.align-self-*-center |
Align a flex item in the center on different screens | |
.align-self-*-baseline |
Align a flex item on the baseline on different screens | |
.align-self-*-stretch |
Stretch a flex item on different screens |