freeCodeCamp

3.5 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d78ad367417b2b2512af8	Align Elements Using the align-items Property	0		Alinhar elementos usando a propriedade align-items

Description

A propriedade align-items é semelhante a justify-content . Lembre-se de que a propriedade justify-content 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 eixo cruzado que é o oposto do eixo principal. Para linhas, o eixo cruzado é vertical e para colunas, o eixo cruzado é horizontal. O CSS oferece a propriedade align-items 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 align-items incluem:

flex-start : 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.
flex-end : 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.
center : 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).
stretch : 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.
baseline : 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.

Instructions

Um exemplo ajuda a mostrar essa propriedade em ação. Adicione a propriedade CSS align-items ao elemento #box-container e atribua a ele um valor de *center*.
Bônus
Tente as outras opções para a propriedade align-items 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>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.");'

Challenge Seed

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

  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }
</style>

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

Solution

// solution required

3.5 KiB Raw Blame History