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 um item flexível em várias linhas (ou colunas). Por padrão, um contêiner flexível acomodará todos os itens flexíveis juntos. Por exemplo, uma linha estará toda em uma linha. No entanto, usando a propriedade flex-wrap , ele diz ao CSS para agrupar itens. Isso significa que itens extras são movidos para uma nova linha ou coluna. O ponto de quebra de onde o acondicionamento acontece depende do tamanho dos itens e do tamanho do contêiner. CSS também tem opções para a direção do envoltório:

nowrap : esta é a configuração padrão e não envolve itens.
wrap : envolve os itens da esquerda para a direita, se estiverem em uma linha ou de cima para baixo, se estiverem em uma coluna.
wrap-reverse : envolve 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 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