<sectionid="description"> A propriedade <code>align-items</code> é semelhante a <code>justify-content</code> . Lembre-se de que a propriedade <code>justify-content</code> alinha os itens flexíveis ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e, para colunas, é uma linha vertical. Os contêineres flexíveis também possuem um <strong>eixo cruzado</strong> que é o oposto do eixo principal. Para linhas, o eixo cruzado é vertical e para colunas, o eixo cruzado é horizontal. O CSS oferece a propriedade <code>align-items</code> para alinhar itens flexíveis ao longo do eixo cruzado. Para uma linha, ele informa ao CSS como empurrar os itens da linha inteira para cima ou para baixo no contêiner. E para uma coluna, como empurrar todos os itens para a esquerda ou para a direita dentro do contêiner. Os diferentes valores disponíveis para <code>align-items</code> incluem: <ul><li><code>flex-start</code> : alinha os itens ao início do contêiner flexível. Para linhas, isso alinha os itens ao topo do contêiner. Para colunas, isso alinha os itens à esquerda do contêiner. </li><li><code>flex-end</code> : alinha os itens ao final do contêiner flexível. Para linhas, isso alinha os itens à parte inferior do contêiner. Para colunas, isso alinha os itens à direita do contêiner. </li><li><code>center</code> : alinha os itens ao centro. Para linhas, alinha verticalmente os itens (espaço igual acima e abaixo dos itens). Para colunas, isso as alinha horizontalmente (espaço igual à esquerda e à direita dos itens). </li><li><code>stretch</code> : estica os itens para encher o contêiner flexível. Por exemplo, itens de linha são esticados para preencher o contêiner flexível de cima para baixo. </li><li><code>baseline</code> : alinha os itens às suas linhas de base. A linha de base é um conceito de texto, pense nisso como a linha em que as letras ficam em cima. </li></ul></section>
<sectionid="instructions"> Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS <code>align-items</code> ao elemento <code>#box-container</code> e atribua a ele um valor de *center*.
<br><strong>Bônus</strong><br> Tente as outras opções para a propriedade <code>align-items</code> no editor de código para ver suas diferenças. Mas note que um valor de *center* é o único que passará este desafio. </section>
- text: 'O elemento <code>#box-container</code> deve ter uma propriedade <code>align-items</code> definida como um valor de center.'
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'