3.7 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d78ad367417b2b2512af8	Alinhar elementos usando a propriedade align-items	0	https://scrimba.com/p/pVaDAv/c8aggtk	301101	align-elements-using-the-align-items-property

--description--

A propriedade align-items é similar à justify-content. Lembre que a propriedade justify-content alinhou os flex items ao longo do eixo principal. Para linhas, o eixo principal é uma linha horizontal e para colunas é uma linha vertical.

Flex containers também têm um eixo transversal que é o oposto do eixo principal. Para linhas, o eixo transversal é vertical, e para colunas, o eixo transversal é horizontal.

O CSS oferece a propriedade align-items para alinhar os flex items ao longo do eixo transversal. Para linhas, ela indica ao CSS como empurrar os itens para cima ou para baixo dentro do container. E para uma coluna, como empurrar todos os itens para a esquerda ou direita dentro do container.

Os valores disponíveis para align-items são:

flex-start: alinha os itens no início do container. Para linhas, os flex items são posicionados no topo do container. Para colunas, os flex items são posicionados à esquerda do container.
flex-end: alinha os itens no final do container. Para linhas, todos os flex items são posicionados na parte inferior do container. Para colunas, os flex items são posicionados à direita do container.
center: alinha os itens ao centro. Para linhas, os flex items são posicionados verticalmente (com espaços iguais acima e abaixo dos itens). Para colunas, os flex items são posicionados horizontalmente (com espaços iguais à esquerda e à direita dos itens).
stretch: estica os itens para preencher o container. Por exemplo, itens posicionados em linhas são esticados para preencher o contêiner de cima a baixo. Este é o valor padrão se nenhum valor for especificado para a propriedade align-items.
baseline: o posicionamento é realizado com base no texto dentro de cada flex item. A linha de base (baseline) é um conceito de textos. Pense nela como se fosse a linha em que as letras ficam apoiadas.

--instructions--

Alguns exemplos vão te ajudar a entender os valores dessa propriedade em ação. Adicione a propriedade CSS align-items ao elemento #box-container e dê a ela o valor de center.

Bônus
Use os demais valores da propriedade align-items no editor de código para ver as diferenças. Mas observe que o valor center será o único que vai fazer você passar neste desafio.

--hints--

O elemento de id #box-container deve ter a propriedade align-items definida com o valor de center.

assert($('#box-container').css('align-items') == 'center');

--seed--

--seed-contents--

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

--solutions--

<style>
  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    align-items: center;
  }
  #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>

3.7 KiB Raw Blame History