Faça flex-grow expandir itens com base em seu tamanho original

Eu tenho 3 botões em uma linha que variam em largura. Eu quero que todos eles ganham largura igual para preencher a largura restante da linha, então o mais largo ainda será mais largo que os outros, etc.

Você pode ver abaixo que o que eu tentei fazer com flex resultou em todos os botões sendo da mesma largura. Eu sei que o flex-grow pode ser usado para aumentar proporcionalmente cada item, mas não consigo descobrir como fazer com que todos cresçam em relação ao tamanho original.

Você pode ver na segunda linha que o item azul é maior que os outros dois. Eu só quero que todos os três se expandam do tamanho atual para preencher a linha.

obrigado

 .row-flex { width: 100%; display: flex; flex-direction: row; } .button { flex: 1; display: inline-block; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
  

   

Resposta curta

Tudo o que você precisa fazer é mudar de flex: 1 para flex: auto .


Explicação

Os fatores da propriedade de flex-grow em duas partes principais de dados:

  1. O espaço livre na linha / coluna onde está sendo usado.
  2. O valor da propriedade de flex-basis .

Distribuição de espaço livre

A propriedade flex-grow distribui o espaço livre no contêiner entre itens flexíveis na mesma linha.

Se não houver espaço livre, o flex-grow não terá efeito.

Se houver espaço livre negativo (isto é, o comprimento total dos itens flexíveis for maior que o comprimento do contêiner), o flex-grow não flex-shrink efeito e o flex-shrink entra em ação.


O fator flex-basis

Quando flex-basis é 0 , flex-grow ignora a largura / altura do conteúdo em flex items e trata todo o espaço na linha como espaço livre.

Isso é dimensionamento absoluto . Todo o espaço na linha é distribuído.

Quando flex-basis é auto , flex-grow primeiros fatores no tamanho do conteúdo em flex items. Em seguida, ele distribui o espaço livre entre os itens, resultando em cada item crescendo proporcionalmente com base no tamanho do conteúdo.

Isso é dimensionamento relativo . Apenas espaço extra na linha é distribuído.

Aqui está uma ilustração da especificação :

insira a descrição da imagem aqui


Exemplos:

  • flex: 1 (dimensionamento absoluto)

    Esta regra abreviada se divide em: flex-grow: 1 / flex-shrink: 1 / flex-basis: 0

    Aplicado a todos os itens flexíveis, isso os tornará iguais, independentemente do conteúdo.

  • flex-grow: 1 (tamanho relativo)

    Esta regra por si só irá levar em consideração tanto o tamanho do conteúdo quanto o espaço disponível, porque o valor padrão para o flex-basis é auto .

  • flex: auto (tamanho relativo)

    Essa taquigrafia afeta tanto o tamanho do conteúdo quanto o espaço disponível, porque se divide em:

    • flex-grow: 1
    • flex-shrink: 1
    • flex-basis: auto

Mais variações aqui: 7.1.1. Valores básicos de flex

Não tenho certeza se isso é tudo o que você está procurando, mas se você apenas definir flex-grow:1 vez de flex:1; , Acho que esse é o resultado que você precisa:

 .row-flex { width: 100%; display: inline-flex; flex-direction: row; } .button { flex-grow: 1; padding: 10px; color: #fff; text-align: center; } .button--1 { background: red } .button--2 { background: green; } .button--3 { background: blue; } 
  

Usando a propriedade flex você pode definir proporções:

 .button { display: inline-block; padding: 10px; color: #fff; text-align: center; } .row { display: flex; } .button--1 { background: red; flex: 1 1 auto; } .button--2 { background: green; flex: 2 1 auto; } .button--3 { background: blue; flex: 3 1 auto; }