4.0 KiB
4.0 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
587d78ac367417b2b2512af6 | Align Elements Using the justify-content Property | 0 | Alinhar elementos usando a propriedade justify-content |
Description
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 conjunto de contêiner flexível 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 . Por uma linha, esta é uma linha horizontal que corta cada item. E para uma coluna, o eixo principal é uma linha vertical 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 é o 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 aospace-between
mas o primeiro e último itens não estão bloqueados para as bordas do contêiner, o espaço é distribuído em torno de todos os itens
Instructions
justify-content
ao elemento #box-container
e atribua a ela um valor de center. Bônus Tente as outras opções para a propriedade
justify-content
no editor de código para ver suas diferenças. Mas note que um valor de centro é 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