freeCodeCamp/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ac367417b2b2512af6	Alinhar elementos usando a propriedade justify-content	0	https://scrimba.com/p/pVaDAv/c43gnHm	301102	align-elements-using-the-justify-content-property

--description--

Às vezes, os flex items dentro de um flex container não preenchem todo o espaço no disponível no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os flex items de uma certa maneira. Felizmente, a propriedade justify-content tem várias opções para fazer isso. Antes, no entanto, há uma terminologia importante para entender antes de aprender essas opções.

Aqui temos uma imagem útil do W3C, que ilustra os conceitos abaixo para um contêiner flex do tipo 'row' (linha).

Lembre-se de que definir um flex container como uma linha coloca os flex items lado a lado da esquerda para a direita. Já um flex container como uma coluna coloca os flex items em uma pilha vertical de cima para baixo. Seja qual for a direção do flex container, a direção em que os flex items são posicionados é chamada de eixo principal. Para uma linha, o eixo principal é uma linha horizontal que passa através de cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através de cada item.

Existem várias opções para espaçar os flex items ao longo da linha que for o eixo principal. Uma dos mais usadas é justify-content: center;, que alinha todos os flex items ao centro dentro do flex container. As demais opções são:

• flex-start: alinha os itens no início do contêiner. Para linhas, os flex items são empurrados para a esquerda do flex container. Para colunas, os flex items são empurrados para o topo do flex container. Este é o alinhamento padrão se nenhum valor for especificado para justify-content.
• flex-end: alinha itens no final do contêiner. Para linhas, os flex items são empurrados para a direita do flex container. Para colunas, os flex items são empurrados para a parte inferior do flex container.
• space-between: alinha os itens ao centro do eixo principal, com um espaçamento entre os itens. O primeiro item e o último são empurrados até a borda do flex container. Por exemplo, quando a direção do flex container for em linha, o primeiro item fica do lado esquerdo do contêiner e o último item fica no lado direito do contêiner. Então, o espaço restante é distribuído igualmente para os demais itens.
• space-around: similar ao space-between mas os primeiros e últimos itens não ficam grudados nas bordas do flex container, o espaço é distribuído em torno de todos os itens com metade do espaço em cada extremidade do flex container.
• space-evenly: distribui o espaço igualmente entre os flex items com um espaço completo em cada extremidade do flex container.

--instructions--

Alguns exemplos vão ajudar você a entender os valores dessa propriedade em ação. Adicione a propriedade CSS justify-content ao elemento #box-container e dê a ela o valor de center.

Bônus
Use os demais valores da propriedade justify-content no editor de código para ver as diferenças. Mas observe que o valor center será o único que vai fazer você passar neste desafio.

--hints--

O elemento #box-container deve ter a propriedade justify-content com o valor de center.

assert($('#box-container').css('justify-content') == 'center');

--seed--

--seed-contents--

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;

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

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

--solutions--

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    justify-content: center;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
  }

  #box-2 {
    background-color: orangered;
    width: 25%;
    height: 100%;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>