Evitando que itens flexíveis se estiquem

Ao usar o layout Flexbox, é possível que itens flexíveis se estiquem e preencham o espaço disponível em seu contêiner . No entanto, há situações em que você pode querer evitar que isso aconteça.

Por que os itens flexíveis podem ser alongados?

Por padrão, os itens flexíveis serão alongados ao longo do eixo primário de seu contêiner, que normalmente é horizontal (linha) ou vertical (coluna). Isso ocorre porque a propriedade flex é definida como 1 por padrão, o que indica que o item deve ser flexível e expandir para preencher qualquer espaço disponível.

Preventing Flex Item Stretching

Para evitar que um item flexível se estique, você pode substituir o valor flexível padrão definindo-o como 0. Isso fará com que o item encolha para caber em seu conteúdo, evitando que ocupe mais espaço do que o necessário.

Exemplo

Considere o seguinte exemplo:

div {
  display: flex;
  height: 200px;
  background: tan;
}
span {
  background: red;
}

  This is some text.

Neste exemplo, o item flexível (span) se estende para preencher toda a altura de seu contêiner. Para evitar isso, adicione o seguinte estilo ao elemento div:

align-items: flex-start;

Isso alinha os itens flexíveis ao longo do início de seu contêiner, evitando que eles se estendam para preencha toda a altura.