I'm having trouble making a project using Flexbox .
See HERE My project in progress
These red boxes are distributed using Flexbox , the number of boxes will vary from 1 to 400, ie you need to distribute correctly.
I wish that if they had 400 boxes, they would get smaller, so that everything would fit on the screen. And if they had 3 boxes, they would get bigger, better distributed.
How could you do this?
FIDDLE for code study.
Solution:
In order to create a <div class="main"> that can have between 1 and 400 (or even more) <div></div> within itself, so that they fill in responsively, Div Parent .main the following CSS rules:
.main {
width:100%;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
And within this Div Parent .main the following rules apply so that your descendants behave responsibly online, from left to right ltr .
.main div {
-webkit-flex:1 1 auto;
flex:1 1 auto;
min-width: 100px;
/* A propriedade min-width serve para definir uma largura mínima, evitando que as divs
fiquem muito comprimidas, e assim que as divs da linha tiverem atingido suas larguras
mínimas, a ultima div da linha é passada para linha de baixo afim de liberar espaço
para que as outras da mesma linha sejam comprimidas ainda mais. */
/*
A propriedade FLEX é uma atalho para a mesma coisa escrita abaixo
-webkit-flex-basis:auto;
-webkit-flex-shrink:1;
-webkit-flex-grow:1;
*/
}