Alignment with Flexbox

Question

I’m having trouble doing a project with using Flexbox.

Behold HERE my ongoing project

These red boxes are distributed using Flexbox, the amount of boxes will vary from 1 to 400, IE, You need to distribute correctly.

I wish that if there were 400 boxes, they would be smaller, so that everything would fit on the screen. And if you had three boxes, they’d be bigger, better distributed.

How could you do that?

Answer 1

FIDDLE to study the code.

Solution:
To create a <div class="main"> which may be between 1 and 400 (or more) <div></div> within themselves, so that they fill themselves responsibly, just apply to the Div Pai .main the following CSS rules:

.main {
width:100%;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}

And inside that Div Pai .main the following rules apply, so that your descendants behave responsibly in line, 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;
*/
}