---
id: 587d78ac367417b2b2512af6
title: Align Elements Using the justify-content Property
challengeType: 0
videoUrl: ''
localeTitle: 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
```yml
tests:
- text: 'O elemento #box-container
deve ter uma propriedade justify-content
definida como um valor de center.'
testString: 'assert($("#box-container").css("justify-content") == "center", "The #box-container
element should have a justify-content
property set to a value of center.");'
```
## Challenge Seed
## Solution
```js
// solution required
```