Posso alterar o valor "justificar conteúdo" dependendo do número de elementos no contêiner flex?
Estou trabalhando em uma galeria de imagens em um site herdado. Não posso usar nada além de HTML / jQuery ou JS / CSS antigo antigo. Eu sei que isso seria muito mais fácil com o Bootstrap ou alguma biblioteca de grade.
Estou construindo com o flexbox. Existem quatro imagens em cada linha, com várias linhas. Parece ótimo quando cada linha tem suas quatro imagens. Quando tem 2 ou 3, porque eu estou usandojustify-content: space-between
, faz com que pareça estranho por causa do grande espaço entre as imagens.
O motivo pelo qual estou usandospace-between
é que eu quero que as imagens se alinhem à esquerda do contêiner pai e também à direita.
Algumas notas:
Cada item flexível tem uma largura máxima de 150pxQuero uma margem entre os itens, mas não me importo se essa margem mudar à medida que a largura da janela de visualização mudaro contêiner flexível possui uma largura máxima que permite apenas quatro itens de 150 px em sequênciaMinha pergunta: se uma linha tiver menos que um número de conjunto de elementos (neste caso, quatro), posso alterar ojustify-content
para ser algo mais apropriado, comoflex-start
?
Idealmente, quero fazer isso sem JavaScript / jQuery, mas se isso for impossível, também estou aberto a essas soluções.
Além disso, sinta-se à vontade para me informar se estou pensando demais nisso e nem preciso usarjustify-content: space-between
. Aqui está um exemplo de trabalho:
/* outer container */
.flex-container {
padding: 24px 0;
background: white;
border: solid 1px rgba(0,0,0,.1);
max-width: 700px; /* or whatever */
/* flex props */
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* contains img block and title */
.thumb-grid {
border: solid 1px rgba(0,0,0,.1);
width: 150px;
margin-bottom: 36px;
}
.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }
.thumb-grid p {
text-align: center;
}
.img-block {
background: black;
height: 150px;
}
.img-block img {
height: 150px;
opacity: 1;
transition: opacity 150ms;
}
.img-block:hover img {
opacity: .9;
}
<div class="flex-container">
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 1</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 2</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 3</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 4</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 5</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 6</p>
</div>
<div class="thumb-grid">
<div class="img-block">
<a href=""><img src="https://www.expedient.com/wp-content/uploads/2017/06/exp-mq-resouce-thumbnail-1-150x150.jpg" alt="example image"></a>
</div>
<p>Image 7</p>
</div>
</div>