Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

Uma das razões pelas quais o flexbox atraiu rapidamente o interesse dos programadores da Web é que este trouxe os melhores recursos de alinhamento para a Web, pela primeira vez. Este permitiu o alinhamento vertical adequado, e assim nós podemos finalmente, centrar uma caixa facilmente. Neste guia, Nós iremos analisar detalhadamente como as propriedades de alinhamento e justificação funcionam no Flexbox.

Para centrar a nossa caixa, nós utilizamos a propriedade align-items para alinhar o nosso item no eixo transversal, que neste caso é o eixo do bloco na vertical. Nós utilizamos o justify-content para alinhar o item no eixo principal, que neste caso é o eixo horizontal.

A containing element with another box centered inside it.

 

Podem ver o código do exemplo abaixo. Muda o tamanho do container ou do elemento aninhado e o elemento aninhado permanecerá centrado.

Propriedades que controlam o alinhamento

As propriedades que nós iremos ver neste guia são as seguintes:

  • justify-content — controla o alinhamento de todos os itens no eixo principal.
  • align-items — controla o alinhamento de todos os itens no eixo transversal.
  • align-self — controla o alinhamento de um item flex individual no eixo transversal.
  • align-content — descrito na especificação como para “empacotar linhas do flex”; controla o espaço entre as linhas do flex no eixo das coordenadas.

Vamos também descobrir como as margens automáticas podem ser utilizadas para alinhamento em flexbox.

Nota: As propriedades de alinhamento em Flexbox foram colocadas na sua própria especificação — CSS Box Alignment Level 3. É expectável que esta especificação irá enfim substituir as propriedades definidas em Flexbox Level One.

O Eixo Transversal

As propriedades align-itemsalign-self controlam o alinhamento dos nossos itens da flex no eixo transversal, pelas colunas se a flex-direction for row e ao longo da linha se a flex-direction for column.

Estamos a dar uso do alinhamento no eixo transversalno exemplo mais fácil do flex. Se adicionarmos display: flex a um container, os sub-elementos tornarão-se todos itens da flex numa linha. Irão esticar-se para serem tão altos quanto o item mais alto, já que esse item está a definir a altura dos itens do eixo transversal. Se o teu flex container tiver uma altura definida, então os itens irão esticar até essa altura, independentemente de quanto conteúdo estiver no item.

Three items, one with additional text causing it to be taller than the others.

Three items stretched to 200 pixels tall

A razão pela qual os items ficam da mesma altura é porque o valor inicial do align-items, a propriedade que controla o alinhamento no eixo transversal, está definida para stretch.

Podemos utilizar outros valores para controlar de que forma os itens se alinham:

  • align-items: flex-start
  • align-items: flex-end
  • align-items: center
  • align-items: stretch
  • align-items: baseline

No exemplo de baixo, o valor do align-items é stretch. Experimenta os outros valores e observa como todos os itens se alinham em relação aos outros no flex container.

 

Alinhar um item com align-self

A propriedade align-items define a propriedade align-self em todos os itens da flex como um grupo. Isto significa que tu podes explicitamente declarar a propriedade align-self para visar um único item. A propriedade align-self aceita todos os valores da align-items , mais o valor  auto, que irá dar reset ao valor definido na flex container.

Neste próximo exemplo, o flex container tem align-items: flex-start, o que significa que os itens estão todos alinhados com o início do eixo transversal. Eu visei o primeiro item utilizado um first-child e defini esse item para align-items: stretch; outro item foi selecionado utilizando a sua classe de selected e foi-lhe dado align-items: center. Podes alterar o valor do align-items ou os valores do align-self em itens individuais para veres como funciona.

 

Alteração do eixo principal

Até agora observámos o comportamento quando o nosso flex-direction é row, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

Se nós mudarmos o nosso flex-direction para column, o align-items e o align-self irão alinhar os itens para a esquerda e para a direita.

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

Podes testar isto no exemplo abaixo, que tem um flex container com flex-direction: column mas de resto, é exatamente igual ao exemplo anterior.

 

Alinhar conteúdo no eixo transversal — a propriedade align-content

Até agora temos estado a alinhar os itens, ou um item individual, dentro da área definida pelo flex-container. Se tu tiveres um wrapped multiple-line flex container então também poderás querer utilizar a propriedade align-content para controlar a distribuição do espaço entrelinhas. Na especificação isto é descrito como empacotar as linhas do flex.

Para o align-content funcionar, precisarás de mais altura no teu flex container do que é necessário para mostrar os itens. Irá então afetar todos os itens como um conjunto, e ditará o que irá acontecer com esse espaço livre, e o alinhamento do conjunto inteiro de itens dentro dele.

A propriedade align-content aceita os seguintes valores:

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (não definido na especificação da Flexbox)

No exemplo abaixo, o flex container tem uma altura de 400 pixels, o que é mais do que necessário para mostrar os nossos itens. O valor do align-content é space-between, o que significa que o espaço disponível é partilhado entre as linhas da flex, que está posicionada nívelado com o início e o fim do container no eixo transversal.

Experimenta os outros valores para veres como a propriedade align-content funciona.

 

Mais uma vez podemos alterar o nosso flex-direction para column de forma a observar como esta propriedade se comporta quando estamos a trabalhar por coluna. Tal como anteriormente, precisamos de espaço suficiente no eixo transversal para ter algum espaço livre depois de mostrar todos os itens.

 

Nota: o valor space-evenly não está definido na especificação da flexbox e será uma adição posterior à especificação do Alinhamento da Caixa. O suporte dos navegadores para este valor não é tão bom quanto o suporte para os valore definidos na especificação da flexbox.

Lê a documentação para o justify-content no MDN para mais detalhes sobre todos estes valores, e o seu suporte em navegadores.

Alinhar conteúdo no eixo principal

Agora que já vimos como o alinhamento funciona no eixo transversal, podemos dar uma olhada no eixo principal. Aqui temos apenas uma propriedade disponível — justify-content. Isto é porque apenas estaremos a lidar como itens como se fossem um grupo no eixo principal. Com o justify-content we control what happens with available space, should there be more space than is needed to display the items.

In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

The justify-content property accepts the same values as align-content.

  • align-content: flex-start
  • align-content: flex-end
  • align-content: center
  • align-content: space-between
  • align-content: space-around
  • align-content: stretch
  • align-content: space-evenly (not defined in the Flexbox specification)

In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

 

If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

 

Modos de Alinhamento e Gravação

Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

Three items lined up on the left

However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

Three items lined up from the right

The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

 

Alinhamento e flex-direction

The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

 

While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. flex-start will be where the start of a sentence of text would begin.

Diagram showing start on the left and end on the right.

You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

Diagram showing start and the top and end at the bottom.

If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

Diagram showing start on the right and end on the left.

Diagram showing end at the top and start at the bottom

Utilização de margen automáticas para o alinhamento do eixo principal

We don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

Five items, in two groups. Three on the left and two on the right.

Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how entering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

 

Funcionalidades de alinhamento futuras para o Flexbox

At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the space-evenly value for align-content and justify-content properties.

The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too. This will mean you won’t need to use margins to space out flex items.

My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

Etiquetas do documento e contribuidores

Contribuidores para esta página: BIGBenfica9, mdnwebdocs-bot, mansil
Última atualização por: BIGBenfica9,