<sectionid="description"> Flexbox CSS tem um recurso para dividir itens flexíveis em várias linhas (ou colunas). Por padrão, um contêiner flexível acomodará todos os itens flexíveis juntos. Por exemplo, uma <code>row</code> (linha) estará toda em uma linha.
No entanto, usando a propriedade <code>flex-wrap</code> , faz com que o CSS agrupe os itens. Isso significa que itens extras são movidos para uma nova linha ou coluna. O ponto onde haverá a quebra depende do tamanho dos itens e do tamanho do contêiner.
CSS também tem opções para a direção do agrupamento: <ul><li><code>nowrap</code> : esta é a configuração padrão e não agrupa os itens. </li><li><code>wrap</code> : agrupa os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna. </li><li><code>wrap-reverse</code> : agrupa os itens de baixo para cima, se estiverem em uma linha, ou da direita para a esquerda, se estiverem em uma coluna. </li></ul></section>
<sectionid="instructions"> O layout atual tem muitas caixas para uma só linha. Adicione a propriedade CSS <code>flex-wrap</code> ao elemento <code>#box-container</code> e atribua a ela um valor de <code>wrap</code>. </section>
- text: 'O elemento <code>#box-container</code> deve ter a propriedade <code>flex-wrap</code> definida como um valor de wrap.'
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'