Fazer com que o div preencha o restante * horizontal * espaço na flexbox

Tenho 2 divs lado a lado numa flexbox. A mão direita deve ser sempre a mesma largura, e eu quero que a mão esquerda um para apenas agarrar o espaço restante. Mas não vai, a não ser que eu defina especificamente a sua largura.

Então, de momento, está definido para 96% o que parece OK até que você realmente esmague o ecrã - então o div da mão direita fica um pouco faminto do espaço que ele precisa.

Acho que posso deixá - lo como está, mas parece errado, como se tivesse de haver uma maneira de dizer:

o direito é sempre o mesmo; você à esquerda - você recebe tudo o que resta

.ar-course-nav {
  cursor: pointer;
  padding: 8px 12px 8px 12px;
  border-radius: 8px;
}
.ar-course-nav:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
<br/>
<br/>
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
  <div style="width:96%;">
    <div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
      <strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
                Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
            </strong>
    </div>
    <div style="width:100%; display:flex; justify-content:space-between;">
      <div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
        A really really really really really really really really really really really long department name
      </div>
      <div style="color:#555555; text-align:right; white-space:nowrap;">
        Created: 21 September 2016
      </div>
    </div>
  </div>
  <div style="margin-left:8px;">
    <strong>&gt;</strong>
  </div>
</div>
Author: Michael_B, 2016-06-10
Source

1 answers

Use a propriedade flex-grow para fazer um item flexível consumir espaço livre no eixo principal.

Esta propriedade irá expandir o item tanto quanto possível, ajustando o comprimento para ambientes dinâmicos, tais como o dimensionamento do ecrã ou a adição / remoção de outros itens.

Um exemplo comum é flex-grow: 1 ou, usando a propriedade abreviada, flex: 1.

Por isso, em vez de width: 96% no seu div, use flex: 1.

você escreveu:

Então em no momento, está definido para 96% que parece OK até que você realmente esmagar a tela - em seguida, o div mão direita fica um pouco faminto do espaço que ele precisa.

O esmagamento do div de Largura Fixa está relacionado com outra propriedade flex: flex-shrink

Por padrão, os itens flex são configurados para flex-shrink: 1 o que lhes permite encolher de modo a evitar o excesso de fluxo do recipiente.

Para desactivar esta funcionalidade use flex-shrink: 0.

Para mais detalhes, consulte o factor flex-shrink secção na resposta:

  • Quais são as diferenças entre base flexível e largura?

Saiba mais sobre o alinhamento flex ao longo do eixo principal aqui:

Saiba mais sobre o alinhamento flex ao longo do eixo de Cruz aqui:

 122
Author: Michael_B, 2017-05-23 11:54:37