freeCodeCamp

2.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ad367417b2b2512afa	Use the flex-wrap Property to Wrap a Row or Column	0		Use a propriedade flex-wrap para agrupar uma linha ou coluna

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 row (linha) estará toda em uma linha. No entanto, usando a propriedade flex-wrap , 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:

nowrap : esta é a configuração padrão e não agrupa os itens.
wrap : agrupa os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna.
wrap-reverse : agrupa os itens de baixo para cima, se estiverem em uma linha, ou da direita para a esquerda, se estiverem em uma coluna.

Instructions

O layout atual tem muitas caixas para uma só linha. Adicione a propriedade CSS flex-wrap ao elemento #box-container e atribua a ela um valor de wrap.

Tests

tests:
  - 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.");'

Challenge Seed

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 100%;

  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 50%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 50%;
  }
  #box-3 {
    background-color: violet;
    width: 25%;
    height: 50%;
  }
  #box-4 {
    background-color: yellow;
    width: 25%;
    height: 50%;
  }
  #box-5 {
    background-color: green;
    width: 25%;
    height: 50%;
  }
  #box-6 {
    background-color: black;
    width: 25%;
    height: 50%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
  <div id="box-3"></div>
  <div id="box-4"></div>
  <div id="box-5"></div>
  <div id="box-6"></div>
</div>

Solution

// solution required

2.7 KiB Raw Blame History