Início / coding / Perguntas / 78948277
Accepted
rschristian
Asked: 2024-09-04 19:01:46 +0800 CST

Reduza os espaços em branco finais com flex-wrap e filhos de largura dinâmica

  • 772

No meu site, tenho uma lista de tags que gostaria de exibir em um layout de estilo masonry, com linhas claramente definidas, mas sem colunas definidas. Isso pode ser facilmente alcançado por: flex-wrap: wrapsozinho, como mostrado aqui:

 body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .25rem;
  width: 12rem;
  background-color: lime;
}
.wrapper > div {
  color: white;
  background-color: black;
  padding: .25rem;
  border-radius: .25rem;
}
<div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

O problema que estou enfrentando é que tende a haver uma calha na margem direita, de onde a linha não preencheu. Isso seria bom para uma ou duas linhas, mas tende a ser bem consistente, com 1 linha em uma dúzia sendo "cheia". Desculpe o desenho horrível, mas aqui está minha rápida tentativa de ilustrar isso:

Representação da imagem do código acima, mostrando o efeito "gutter" que eu gostaria de evitar

Como você pode imaginar, se você duplicar esta imagem algumas vezes verticalmente, há uma sarjeta bem óbvia no lado direito, o que cria um desequilíbrio com o conteúdo que se estende até a margem esquerda, em contraste.

Se entendi corretamente, esse é um problema conhecido, e algo que a especificação CSS Masonry , se progredir, tentará abordar, mas há alguma solução no momento? Justificar por linha de alguma forma, ou uma margem automática? Não tenho certeza, estou um pouco me agarrando a palhas. Fico feliz em mudar para outros métodos se houver uma maneira melhor do que flex-wrappara conseguir isso, mas tudo que vi gridparece ser sobre colunas e linhas bem definidas, que é precisamente o que eu não quero.

css

1 respostas

  1. Best Answer

    A maneira mais rápida de obter algo que se assemelhe a um layout de alvenaria usando um layout flexbox é permitir que seus itens diminuam e cresçam de acordo com o espaço restante, onde o próximo item não pode ser acomodado.

    https://developer.mozilla.org/en-US/docs/Web/CSS/flex

    Aqui a principal alteração que fiz no seu snippet foi usar:

    flex: 1 1 auto;

    O efeito colateral é não ter controle sobre o tamanho do item com antecedência porque ele fica dinâmico com base em quanto espaço é ocupado por sua largura mínima. Qualquer outra solução exigiria embaralhar a ordem dos itens para encontrar a maneira mais otimizada de organizá-los para preencher o espaço.

    Para compensar esse recurso, estilizei os itens flexíveis para que seu conteúdo ficasse alinhado ao centro.

    body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.25rem;
  width: 12rem;
  background-color: lime;
  
  /*here you set the fixed padding*/
  padding: 1em 1em;
}

.wrapper > div {
  color: white;
  background-color: black;
  padding: 0.25rem;
  border-radius: 0.25rem;
 
  /*here you allow flex items to shrink and grow*/
  /*shorthand for flex-grow flex-shrink flex-basis*/
  flex: 1 1 auto;  
  
  text-align: center;
}
    <div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

    Se, em vez disso, você desejar manter a largura dos itens flexíveis inalterada, poderá instruir o layout a usar uma lacuna dinâmica para preencher o espaço restante em cada linha, mantendo o primeiro e o último, respectivamente, no início e no final da linha comjustify-content

    justify-content: space-between;


    body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.25rem;
  width: 12rem;
  background-color: lime;
  
  /*here you set the fixed padding*/
  padding: 1em 1em;
  
  justify-content: space-between;
}

.wrapper > div {
  color: white;
  background-color: black;
  padding: 0.25rem;
  border-radius: 0.25rem;      
}
    <div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

    • 1

relate perguntas