Posicionar elementos com width 100%

[Caio Cafardo 7]

Oi pessoal, tudo bom?

To fazendo essa tela: http://famigerado.com.br/tela e preciso de uma ajuda.

Vocês podem ver que tudo está com 100% de height e width, então ele vai se adaptar ao monitor e/ou tv (não vai ser usado em celulares ou tablets).

Dentro dessa caixa no centro tem essas caixas vermelhas, só que a quantidade de caixas vai ser variavel, pode ser 2 caixas ou 300, então ela vai diminuir o width de acordo com a quantidade, pra nunca vazar da caixa maior.

A pergunta é, tem como isso ser feito somente com HTML5, ou seja, ele vai se ajustando sozinho.

Ou terei que usar JS?

Valeu!!

[reebr 94]

Flexbox.

 

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://www.w3schools.com/cssref/css3_pr_flex.asp

http://tableless.com.br/flexbox-organizando-seu-layout/

[Caio Cafardo 7]

Obrigado pela ajuda RNXN.

 

Fiquei estudando Flexbox, mas não consegui fazer o tamanho também mudar direito, eles se posiciona bem, mas a largura fica meio bagunçada...

 

To fazendo errado?

 

Da pra ver minha tentativa nesse link: http://www.famigerado.com.br/tela/

 

 

No link que postei tem 120, mas se tiver 300 ele sai pra baixo, o certo era as caixas ficarem menores para caber tudo...