Utilidades Flex

Uso de las utilidades Flex en Bootstrap

Administra rápidamente el diseño, la alineación y el tamaño de las columnas de la cuadrícula, la navegación, los componentes y más con un conjunto completo de utilidades flex responsive. Para implementaciones más complejas, puede ser necesario CSS personalizado.

Habilitar comportamientos flex

Aplica las utilidades display para crear un contenedor flexbox y transformar elementos secundarios directos en elementos flex. Los contenedores y elementos flex se pueden modificar aún más con propiedades flex adicionales.

HTML
    <div class="d-flex p-2">¡Soy un contenedor flexbox!</div>

HTML
    <div class="d-inline-flex p-2">¡Soy un contenedor flexbox en línea!</div>

También existen variaciones responsive para .d-flex y .d-inline-flex.

.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
.d-xxl-flex
.d-xxl-inline-flex

Dirección

Establece la dirección de los elementos flex en un contenedor flex con utilidades de dirección. En la mayoría de los casos, puedes omitir la clase horizontal aquí ya que el valor predeterminado del navegador es row. Sin embargo, puedes encontrar situaciones en las que necesites establecer explícitamente este valor (como diseños responsive).

Usa .flex-row para establecer una dirección horizontal (la opción predeterminada del navegador), o .flex-row-reverse para que comience la dirección horizontal desde el lado opuesto.

HTML
    <div class="d-flex flex-row mb-3">
        <div class="p-2">Flex item 1</div>
        <div class="p-2">Flex item 2</div>
        <div class="p-2">Flex item 3</div>
    </div>
    <div class="d-flex flex-row-reverse">
        <div class="p-2">Flex item 1</div>
        <div class="p-2">Flex item 2</div>
        <div class="p-2">Flex item 3</div>
    </div>

Usa .flex-column para establecer una dirección vertical, o .flex-column-reverse para iniciar la dirección vertical desde el lado opuesto.

HTML
    <div class="d-flex flex-column mb-3">
        <div class="p-2">Flex item 1</div>
        <div class="p-2">Flex item 2</div>
        <div class="p-2">Flex item 3</div>
    </div>
    <div class="d-flex flex-column-reverse">
        <div class="p-2">Flex item 1</div>
        <div class="p-2">Flex item 2</div>
        <div class="p-2">Flex item 3</div>
    </div>

También existen variaciones responsive para flex-direction.

.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
.flex-xxl-row
.flex-xxl-row-reverse
.flex-xxl-column
.flex-xxl-column-reverse

Justificar contenido

Utiliza las utilidades justify-content en contenedores flexbox para cambiar la alineación de los elementos flexibles en el eje principal (el eje x para comenzar, el eje y si flex-direction: column). Elige entre start (predeterminado del navegador), end, center, between, around, o evenly.

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 justify-content-evenly">...</div>

También existen variaciones responsive para justify-content.

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-evenly
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-sm-evenly
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-md-evenly
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-lg-evenly
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
.justify-content-xl-evenly
.justify-content-xxl-start
.justify-content-xxl-end
.justify-content-xxl-center
.justify-content-xxl-between
.justify-content-xxl-around
.justify-content-xxl-evenly

Alinear elementos

Utiliza las utilidades align-items en contenedores flexbox para cambiar la alineación de los elementos flex en el eje transversal (el eje y para comenzar, el eje x si flex-direction: column). Elige entre start, end, center, baseline o stretch (valor predeterminado del navegador).

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

También existen variaciones responsive para align-items.

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
.align-items-xxl-start
.align-items-xxl-end
.align-items-xxl-center
.align-items-xxl-baseline
.align-items-xxl-stretch

Alineamiento propio

Utiliza las utilidades align-self en elementos de flexbox para cambiar individualmente su alineación en el eje transversal (el eje y para comenzar, el eje x si flex-direction: column). Elige entre las mismas opciones que align-items: start, end, center, baseline, o stretch (predeterminado del navegador).

HTML
    <div class="align-self-start">Aligned flex item</div>
    <div class="align-self-end">Aligned flex item</div>
    <div class="align-self-center">Aligned flex item</div>
    <div class="align-self-baseline">Aligned flex item</div>
    <div class="align-self-stretch">Aligned flex item</div>

También existen variaciones responsive para align-self.

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
.align-self-xxl-start
.align-self-xxl-end
.align-self-xxl-center
.align-self-xxl-baseline
.align-self-xxl-stretch

Rellenar

Usa la clase .flex-fill en una serie de elementos hermanos para forzarlos a tener anchos iguales a su contenido (o anchos iguales si su contenido no sobrepasan sus cuadros de borde) mientras ocupan todo el espacio horizontal disponible.

HTML
    <div class="d-flex">
        <div class="p-2 flex-fill">Elemento flex con mucho contenido</div>
        <div class="p-2 flex-fill">Flex item</div>
        <div class="p-2 flex-fill">Flex item</div>
    </div>

También existen variaciones responsive para flex-fill.

.flex-fill
.flex-sm-fill
.flex-md-fill
.flex-lg-fill
.flex-xl-fill
.flex-xxl-fill

Crecer y encogerse.

Utiliza las utilidades .flex-grow-* para alternar la capacidad de un elemento flex de crecer para llenar el espacio disponible. En el siguiente ejemplo, los elementos .flex-grow-1 utilizan todo el espacio disponible que pueden, al tiempo que permiten a los dos elementos flex restantes el espacio necesario.

HTML
    <div class="d-flex">
        <div class="p-2 flex-grow-1">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="p-2">Tercer elemento flex</div>
    </div>

Utiliza las utilidades .flex-shrink-* para alternar la capacidad de un elemento flex para reducirse si es necesario. En el siguiente ejemplo, el segundo elemento flex con .flex-shrink-1 se ve obligado a ajustar su contenido a una nueva línea, “reduciéndolo” para permitir más espacio para el elemento flexible anterior con .w-100.

HTML
    <div class="d-flex">
        <div class="p-2 w-100">Flex item</div>
        <div class="p-2 flex-shrink-1">Flex item</div>
    </div>

También existen variaciones responsive para flex-grow y flex-shrink.

.flex-{grow|shrink}-0
.flex-{grow|shrink}-1
.flex-sm-{grow|shrink}-0
.flex-sm-{grow|shrink}-1
.flex-md-{grow|shrink}-0
.flex-md-{grow|shrink}-1
.flex-lg-{grow|shrink}-0
.flex-lg-{grow|shrink}-1
.flex-xl-{grow|shrink}-0
.flex-xl-{grow|shrink}-1
.flex-xxl-{grow|shrink}-0
.flex-xxl-{grow|shrink}-1

Márgenes automáticos

Flexbox puede hacer cosas increíbles cuando combinas alineaciones flex con márgenes automáticos. A continuación se muestran tres ejemplos de control de elementos flex mediante márgenes automáticos: default (sin margen automático), empujando dos elementos hacia la derecha (.me-auto) y empujando dos elementos hacia la izquierda (.ms-auto).

HTML
    <div class="d-flex mb-3">
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
    </div>

    <div class="d-flex mb-3">
        <div class="me-auto p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
    </div>

    <div class="d-flex mb-3">
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="ms-auto p-2">Flex item</div>
    </div>

Con align-items

Mueve verticalmente un elemento flexible a la parte superior o inferior de un contenedor mezclando align-items, flex-direction: column y margin-top: auto o margin-bottom: auto.

HTML
    <div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
        <div class="mb-auto p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
    </div>

    <div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
        <div class="p-2">Flex item</div>
        <div class="p-2">Flex item</div>
        <div class="mt-auto p-2">Flex item</div>
    </div>

Wrap

Cambia cómo se envuelven los elementos flexibles en un contenedor flex. Elige entre no ajustar nada (el valor predeterminado del navegador) con .flex-nowrap, ajusta con .flex-wrap o ajusta al revés con .flex-wrap-reverse.

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

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

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

También existen variaciones responsive para flex-wrap.

.flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
.flex-xxl-nowrap
.flex-xxl-wrap
.flex-xxl-wrap-reverse

Ordenar

Cambia el orden visual de elementos flex específicos con un puñado de utilidades order. Solo ofrecemos opciones para hacer que un elemento sea el primero o el último, así como un reinicio para usar el orden DOM. Como order toma cualquier valor entero de 0 a 5, agrega CSS personalizado para cualquier valor adicional necesario.

HTML
    <div class="d-flex flex-nowrap">
        <div class="order-3 p-2">Primer elemento flex</div>
        <div class="order-2 p-2">Segundo elemento flex</div>
        <div class="order-1 p-2">Tercer elemento flex</div>
    </div>

También existen variaciones responsive para order.

.order-0
.order-1
.order-2
.order-3
.order-4
.order-5
.order-sm-0
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-md-0
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-lg-0
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-xl-0
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xxl-0
.order-xxl-1
.order-xxl-2
.order-xxl-3
.order-xxl-4
.order-xxl-5

Además, también hay clases responsive .order-first y .order-last que cambian el order de un elemento aplicando order: -1 y order: 6, respectivamente.

.order-first
.order-last
.order-sm-first
.order-sm-last
.order-md-first
.order-md-last
.order-lg-first
.order-lg-last
.order-xl-first
.order-xl-last
.order-xxl-first
.order-xxl-last

Alinear contenido

Utiliza las utilidades align-content en contenedores flexbox para alinear elementos flex juntos en el eje transversal. Elige entre start (predeterminado del navegador), end, center, between, around o stretch. Para demostrar estas utilidades, hemos aplicado flex-wrap: wrap y hemos aumentado la cantidad de elementos flex.

¡Atención! Esta propiedad no tiene ningún efecto en filas individuales de elementos flex.

HTML
    <div class="d-flex align-content-start flex-wrap">
        ...
    </div>

HTML
    <div class="d-flex align-content-end flex-wrap">...</div>

HTML
    <div class="d-flex align-content-center flex-wrap">...</div>

HTML
    <div class="d-flex align-content-between flex-wrap">...</div>

HTML
    <div class="d-flex align-content-around flex-wrap">...</div>

HTML
    <div class="d-flex align-content-stretch flex-wrap">...</div>

También existen variaciones responsive para align-content.

.align-content-start
.align-content-end
.align-content-center
.align-content-between
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-between
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-between
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-between
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-between
.align-content-xl-around
.align-content-xl-stretch
.align-content-xxl-start
.align-content-xxl-end
.align-content-xxl-center
.align-content-xxl-between
.align-content-xxl-around
.align-content-xxl-stretch

Objeto media

Buscando replicar el componente de objeto media ⬀ de Bootstrap 4? Recrealo en poco tiempo con algunas utilidades flex que permiten aún más flexibilidad y personalización que antes.

HTML
    <div class="d-flex">
        <div class="flex-shrink-0">
            <svg class="bd-placeholder-img" width="100" height="100" role="img"
                aria-label="Marcador de posición: Imagen" focusable="false" preserveAspectRatio="xMidYMid slice"
                xmlns="http://www.w3.org/2000/svg">
                <title>Marcador de posición</title>
                <rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999"
                    dy=".3em">Imagen</text>
            </svg>
        </div>
        <div class="flex-grow-1 ms-3">
            Este es un contenido de un componente media. Puedes reemplazar esto con cualquier contenido y ajustarlo
            según sea necesario.
        </div>
    </div>

Y decir que quieres centrar verticalmente el contenido al lado de la imagen:

HTML
    <div class="d-flex align-items-center">
        <div class="flex-shrink-0">
            <svg class="bd-placeholder-img" width="100" height="100" role="img"
                aria-label="Marcador de posición: Imagen" focusable="false" preserveAspectRatio="xMidYMid slice"
                xmlns="http://www.w3.org/2000/svg">
                <title>Marcador de posición</title>
                <rect width="100%" height="100%" fill="#e5e5e5"></rect><text x="50%" y="50%" fill="#999"
                    dy=".3em">Imagen</text>
            </svg>
        </div>
        <div class="flex-grow-1 ms-3">
            Este es un contenido de un componente media. Puedes reemplazar esto con cualquier contenido y ajustarlo
            según sea necesario.
        </div>
    </div>

Personalización del CSS

API de utilidades de Sass

Las utilidades de Flexbox se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss

scss/_utilities.scss
"flex": (
    responsive: true,
    property: flex,
    values: (fill: 1 1 auto)
),
"flex-direction": (
    responsive: true,
    property: flex-direction,
    class: flex,
    values: row column row-reverse column-reverse
),
"flex-grow": (
    responsive: true,
    property: flex-grow,
    class: flex,
    values: (
    grow-0: 0,
    grow-1: 1,
    )
),
"flex-shrink": (
    responsive: true,
    property: flex-shrink,
    class: flex,
    values: (
    shrink-0: 0,
    shrink-1: 1,
    )
),
"flex-wrap": (
    responsive: true,
    property: flex-wrap,
    class: flex,
    values: wrap nowrap wrap-reverse
),
"justify-content": (
    responsive: true,
    property: justify-content,
    values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    evenly: space-evenly,
    )
),
"align-items": (
    responsive: true,
    property: align-items,
    values: (
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
    )
),
"align-content": (
    responsive: true,
    property: align-content,
    values: (
    start: flex-start,
    end: flex-end,
    center: center,
    between: space-between,
    around: space-around,
    stretch: stretch,
    )
),
"align-self": (
    responsive: true,
    property: align-self,
    values: (
    auto: auto,
    start: flex-start,
    end: flex-end,
    center: center,
    baseline: baseline,
    stretch: stretch,
    )
),
"order": (
    responsive: true,
    property: order,
    values: (
    first: -1,
    0: 0,
    1: 1,
    2: 2,
    3: 3,
    4: 4,
    5: 5,
    last: 6,
    ),
),

Última actualización marzo 30, 2024

Utilidades de colores Utilidades para enlace