Tornar o preenchimento div restante * horizontal * no flexbox

204

Eu tenho 2 divs lado a lado em um flexbox. A mão direita deve sempre ter a mesma largura, e eu quero que a mão esquerda pegue o espaço restante. Mas não será, a menos que eu defina especificamente sua largura.

Portanto, no momento, ele está definido como 96%, o que parece bom até você realmente apertar a tela - então a div direita fica um pouco faminta do espaço necessário.

Acho que poderia deixar como está, mas parece errado - como se houvesse uma maneira de dizer:

o certo é 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>

Adam Benson
fonte

Respostas:

324

Use a flex-growpropriedade para fazer com que um item flexível consuma espaço livre no eixo principal .

Essa propriedade expandirá o item o máximo possível, ajustando o comprimento a ambientes dinâmicos, como redimensionamento de tela ou adição / remoção de outros itens.

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

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


Você escreveu:

Portanto, no momento, ele está definido como 96%, o que parece bom até você realmente apertar a tela - então a div direita fica um pouco faminta do espaço necessário.

A compressão da div de largura fixa está relacionada a outra propriedade flex: flex-shrink

Por padrão, os itens flexíveis são configurados para flex-shrink: 1permitir a redução, a fim de impedir o estouro do contêiner.

Para desativar esse recurso, use flex-shrink: 0.

Para mais detalhes, consulte Aflex-shrink seção de fatores na resposta aqui:


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

Saiba mais sobre o alinhamento flexível ao longo do eixo transversal aqui:

Michael Benjamin
fonte
1
Eu tive a mesma situação e usar flex-grow: 1não estava tendo os mesmos efeitos que flex: 1. Talvez você saiba por que é diferente? (I fixa o meu problema com o último, thx)
WhGandalf
4
Com flex-grow: 1, a flex-basispropriedade permanece em auto, seu valor padrão. Com flex: 1, a flex-basispropriedade muda para 0. Veja minha resposta aqui para uma revisão em profundidade: stackoverflow.com/q/43520932/3597276 @WhGandalf
Michael Benjamin
flex-psiquiatra foi a chave para mim :)
pixelearth
25

Basicamente, eu estava tentando fazer com que meu código tivesse uma seção do meio em uma 'linha' para se ajustar automaticamente ao conteúdo dos dois lados (no meu caso, um separador de linhas pontilhadas). Como o @Michael_B sugeriu, a chave está usando display:flexno contêiner de linha e, pelo menos, certificando-se de que seu contêiner do meio na linha tenha um flex-growvalor pelo menos 1 maior que os contêineres externos (se contêineres externos não tiverem flex-growpropriedades aplicadas, contêiner intermediário) só precisa de 1 para flex-grow).

Aqui está uma foto do que eu estava tentando fazer e um exemplo de código de como eu o resolvi.

Editar: a borda inferior pontilhada provavelmente parecerá estranha, dependendo de como o navegador a exibir. Eu, pessoalmente, recomendo usar um SVG de círculo preto como uma imagem de fundo repetida, adequadamente dimensionada e posicionada na parte inferior do contêiner do meio. Adicionarei esta solução alternativa quando eu tiver tempo.

insira a descrição da imagem aqui

.row {
  background: lightgray;
  height: 30px;
  width: 100%;
  display: flex;
  align-items:flex-end;
  margin-top:5px;
}
.left {
  background:lightblue;
}
.separator{
  flex-grow:1;
  border-bottom:dotted 2px black;
}
.right {
  background:coral;
}
<div class="row">
  <div class="left">Left</div>
  <div class="separator"></div>
  <div class="right">Right With Text</div>
</div>
<div class="row">
  <div class="left">Left With More Text</div>
  <div class="separator"></div>
  <div class="right">Right</div>
</div>
<div class="row">
  <div class="left">Left With Text</div>
  <div class="separator"></div>
  <div class="right">Right With More Text</div>
</div>

Brett84c
fonte