freeCodeCamp

4.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ac367417b2b2512af6	Align Elements Using the justify-content Property	0		Alinhar elementos usando a propriedade justify-content

Description

Às vezes, os itens flexíveis dentro de um contêiner flexível não preenchem todo o espaço no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os itens flexíveis de uma determinada maneira. Felizmente, a propriedade justify-content possui várias opções para fazer isso. Mas primeiro, há alguma terminologia importante para entender antes de rever essas opções. Aqui está uma imagem útil mostrando uma linha para ilustrar os conceitos abaixo. Lembre-se de que definir um contêiner flexível como uma linha coloca os itens flexíveis lado a lado da esquerda para a direita. Um contêiner flexível definido como uma coluna coloca os itens flexíveis em uma pilha vertical de cima para baixo. Para cada um, a direção em que os itens flexíveis são organizados é chamada de eixo principal . Para uma linha, esta é uma linha horizontal que corta cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através dos itens. Existem várias opções de como espaçar os itens flexíveis ao longo da linha que é o eixo principal. Um dos mais usados é a justify-content: center; , que alinha todos os itens flexíveis ao centro dentro do contêiner flexível. Outras opções incluem:

flex-start : alinha os itens ao início do contêiner flexível. Para uma linha, isso empurra os itens para a esquerda do contêiner. Para uma coluna, isso empurra os itens para o topo do contêiner.
flex-end : alinha os itens ao final do contêiner flexível. Para uma linha, isso empurra os itens para a direita do contêiner. Para uma coluna, isso empurra os itens para o fundo do contêiner.
space-between : alinha itens ao centro do eixo principal, com espaço extra colocado entre os itens. O primeiro e o último item são empurrados para a borda do contêiner flexível. Por exemplo, em uma linha, o primeiro item está contra o lado esquerdo do contêiner, o último item está contra o lado direito do contêiner e, em seguida, os outros itens entre eles são espaçados uniformemente.
space-around : semelhante ao space-between mas o primeiro e último itens não estão encostados às bordas do contêiner, o espaço é distribuído em torno de todos os itens

Instructions

Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS justify-content ao elemento #box-container e atribua a ela um valor de *center*. Bônus
Experimente as outras opções na propriedade justify-content no editor de código para ver suas diferenças. Mas note que um valor de *center* é o único que passará este desafio.

Tests

tests:
  - text: 'O elemento <code>#box-container</code> deve ter uma propriedade <code>justify-content</code> definida como um valor de center.'
    testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'

Challenge Seed

<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>

Solution

// solution required

4.0 KiB Raw Blame History