Flexbox não dando largura igual aos elementos

368

Tentativa de uma navegação flexbox com até 5 itens e menos de 3, mas não está dividindo a largura igualmente entre todos os elementos.

Violino

O tutorial que estou modelando é o seguinte: http://www.sitepoint.com/responsive-fluid-width-variable-item-navigation-css/

SASS

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
  flex-grow: 1;
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
  padding: 20px 20px 20px 70px;
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}
<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

itsclarke
fonte
11
dar uma largura mínima à sua mesa e definir estofamento com unidades vw pode ajudar: jsfiddle.net/2nY9N/2 reduza o flex-grow e faça flex: 1; ele usará valores padrão para as outras 2 propriedades
G-Cyrillus

Respostas:

907

Há uma parte importante que não é mencionada no artigo ao qual você vinculou e é isso flex-basis. Por padrão flex-basisé auto.

Das especificações :

Se a base flexível especificada for automática, a base flexível usada será o valor da propriedade de tamanho principal do item flexível. (Ela mesma pode ser a palavra-chave auto, que dimensiona o item flexível com base em seu conteúdo.)

Cada item flexível possui um flex-basistamanho semelhante ao seu tamanho inicial. A partir daí, qualquer espaço livre restante é distribuído proporcionalmente (com base em flex-grow) entre os itens. Com auto, essa base é o tamanho do conteúdo (ou tamanho definido com width, etc.). Como resultado, itens com texto maior estão recebendo mais espaço geral no seu exemplo.

Se você deseja que seus elementos sejam completamente uniformes, é possível definir flex-basis: 0. Isso definirá a base flexível como 0 e, em seguida, qualquer espaço restante (que será todo o espaço, pois todas as bases são 0) será distribuído proporcionalmente com base flex-grow.

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

Este diagrama da especificação faz um bom trabalho em ilustrar o ponto.

E aqui está um exemplo de trabalho com seu violino.

James Montagne
fonte
3
Isso estraga tudo para mim no Safari.
Snowman
77
O mais impressionante dessa resposta é que você explica a base flexível com este exemplo melhor do que em qualquer outro lugar literalmente em toda a Internet. Vou entrar em contato com o MIT para lhe dar um cargo de professor honorário.
Dudewad 21/04
96
Só para mencionar que flex: 1;é uma abreviação para combinação de flex-grow: 1, flex-basis: 0.
Vadim Ovchinnikov
11
Apenas no caso, se alguém quer conhecer em profundidade, me deparei com este excelente artigo na web: css-tricks.com/flex-grow-is-weird
Kuldeep Kumar
Oh cara, sempre me bate na cabeça quando eu pensava que tinha entendido CSS.
ibic 10/07/19
15

Para criar elementos com largura igual usando Flex, você deve definir o filho do seu (elementos flexíveis):

flex-basis: 25%;
flex-grow: 0;

Isso dará a todos os elementos na linha 25% de largura. Eles não vão crescer e seguir um por um.

alexJS
fonte
77
Isso é bastante estranho, pois diminui totalmente os benefícios do flex. Se você deseja codificar os tamanhos das colunas, há maneiras mais fáceis de resolver as coisas.
Kloar
3
isso não está errado .. se você quiser ter caixas com o mesmo comprimento e quebrar quando a linha estiver totalmente ocupada .. você pode facilmente conseguir isso assim. Talvez definir também min-width, se você precisa de uma largura min
Ilario Engler
11
@Kloar Você está dizendo que, como se fosse o único benefício das caixas flexíveis ... Elas certamente ainda podem ser benéficas quando você precisar de larguras iguais, por exemplo, para capacidade de resposta. Além disso, não é como se as caixas flexíveis não fossem fáceis?
user2999349