Cobrem o dia a dia de layout com Flexbox: direção, quebra de linha, alinhamento, crescimento/encolhimento de itens e espaçamento (gap). Todas aceitam breakpoint (veja a seção de breakpoints no fim da página).
| Classe |
flex-direction / flex-wrap |
.flex-row |
row |
.flex-column |
column |
.flex-row-reverse |
row-reverse |
.flex-column-reverse |
column-reverse |
.flex-wrap |
flex-wrap: wrap |
.flex-nowrap |
flex-wrap: nowrap |
.flex-wrap-reverse |
flex-wrap: wrap-reverse |
| Classe |
O que faz |
.flex-fill |
flex: 1 1 auto — item cresce/encolhe para preencher o espaço disponível |
.flex-grow-0 |
Impede o item de crescer (flex-grow: 0) |
.flex-grow-1 |
Deixa o item crescer para ocupar o espaço livre (flex-grow: 1) |
.flex-shrink-0 |
Impede o item de encolher abaixo do seu tamanho base (flex-shrink: 0) |
.flex-shrink-1 |
Permite o item encolher quando faltar espaço (flex-shrink: 1) |
| Classe |
Valor |
.justify-content-start |
flex-start |
.justify-content-end |
flex-end |
.justify-content-center |
center |
.justify-content-between |
space-between |
.justify-content-around |
space-around |
| Classe |
Valor |
.align-items-start |
flex-start |
.align-items-end |
flex-end |
.align-items-center |
center |
.align-items-baseline |
baseline |
.align-items-stretch |
stretch |
Só tem efeito com .flex-wrap e mais de uma linha de itens.
| Classe |
Valor |
.align-content-start |
flex-start |
.align-content-end |
flex-end |
.align-content-center |
center |
.align-content-between |
space-between |
.align-content-around |
space-around |
.align-content-stretch |
stretch |
Sobrescreve o align-items do container só para aquele item.
| Classe |
Valor |
.align-self-auto |
auto |
.align-self-start |
flex-start |
.align-self-end |
flex-end |
.align-self-center |
center |
.align-self-baseline |
baseline |
.align-self-stretch |
stretch |
Usam a escala de espaçamento do design system (--mds-spacing-*). Existem em três variantes: .gap--* (ambos os eixos), .row-gap--* (só entre linhas) e .column-gap--* (só entre colunas) — todas com os mesmos tamanhos:
| Classe |
Tamanho |
.gap--xs / .row-gap--xs / .column-gap--xs |
--mds-spacing-xs |
.gap--sm / .row-gap--sm / .column-gap--sm |
--mds-spacing-sm |
.gap--md / .row-gap--md / .column-gap--md |
--mds-spacing-md |
.gap--lg / .row-gap--lg / .column-gap--lg |
--mds-spacing-lg |
.gap--xl / .row-gap--xl / .column-gap--xl |
--mds-spacing-xl |
.gap--xxl / .row-gap--xxl / .column-gap--xxl |
--mds-spacing-xxl |
Com breakpoint, o infixo entra antes do --: .gap-md--lg, .row-gap-xl--sm.
A maioria dos utilitários abaixo aceita um infixo de breakpoint no meio do nome da classe: .{prefixo}-{breakpoint}-{valor} (ex.: .d-md-none, .text-lg-center, .gap-xl--lg). O breakpoint funciona mobile-first: a classe vale a partir da largura mínima indicada até o próximo breakpoint.
| Breakpoint |
Infixo |
Largura mínima |
| Extra small |
(nenhum, classe base) |
0 |
| Small |
sm |
576px |
| Medium |
md |
768px |
| Large |
lg |
992px |
| Extra large |
xl |
1200px |
| Extra extra extra large |
xxxl |
1920px |