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

A propriedade CSS align-items estabelece o valor align-self em todos filhos diretos como um grupo. A propriedade align-self estabelece o alinhamento de um certo item dentro do bloco que o contém. Em Flexbox ele controla o alinhamento dos itens em Cross Axis, enquanto que no Grid Layout, controla o alinhamento dos itens no Eixo de Bloco dentro de sua  grid area.

O exemplo interativo abaixo demonstra alguns dos valores para align-items usando grid layout.

Sintaxe

/* Palavras-chave básicas */ 
align-items: normal; 
align-items: stretch; 

/* Posicionamento do alinhamento */ 
/* align-items não recebe valores left e right */
align-items: center; /* Itens posicionados ao redor do centro */ 
align-items: start; /* Posiciona itens a partir do início */ 
align-items: end; /* Posiciona itens a partir do fim */ 
align-items: flex-start; /* Posiciona itens-flex a partir do início */ 
align-items: flex-end; /* Posiciona itens-flex a partir do fim */ 
align-items: self-start; 
align-items: self-end; 

/* Alinhamento da baseline */
align-items: baseline; 
align-items: first baseline; 
align-items: last baseline; /* Overflow alinhamento (apenas para alinhamento de posição) */ 
align-items: safe center; 
align-items: unsafe center; 

/* Valores globais */
align-items: inherit; 
align-items: initial; 
align-items: unset;

Valores

normal
O efeito desta palavra-chave depende do modo de layout em que nos encontramos:
  • Em layouts absolutamente posicionados, a palavra-chave se comporta como start em replaced de caixas absolutamente posicionadas, e como stretch em all others de caixas absolutamente posicionadas.
  • Em posição estática de layouts absolutamente posicionados, a palavra-chave se comporta como stretch.
  • Para itens-flex, a palavra chave se comporto como stretch.
  • Para itens-grid, esta palavra-chave leva a um comportamento similiar ao stretch, exceto para caixas com um aspect ratio ou tamanhos intrínsecos, onde se comporta como start.
  • A propriedade não se aplica para caixas block-level, e para células de tabela.
flex-start
As bordas da margem superior dos itens-flex são juntados com a borda superior da linha.
flex-end
As bordas da margem inferior dos itens flex são juntados com a borda inferior da linha.
center
As caixas de margem dos itens flex são centralizados ao longo da linha do eixo. Caso o tamanho de um item seja superior ao container flex, irá transbordar de maneira igual em ambas direções.
start
Os itens são posicionados, para cada um, em direção a borda início do container de alinhamento no eixo apropriado. 
end
Os itens são posicionados, para cada um, em direção a borda fim do container de alinhamento no eixo apropriado.
self-start
Os itens são posicionados para a borda do container de alinhamento do lado inicial do item, no eixo apropriado.
self-end
Os itens são posicionados para a borda do container de alinhamento do lado final do item, no eixo apropriado.
baseline
first baseline
last baseline
Todos itens-flex são alinhados de tal forma que suas  baselines de container flex estejam alinhados. O item com a maior distância entre o eixo de início de sua margem e sua baseline é juntado com eixo de início da linha.
stretch
Itens-flex são esticados de tal maneira que o tamanho da caixa de margem do item seja o mesmo da linha, respeitando as restrições de comprimento e altura.
safe
Usado em conjunto com uma palavra-chave de alinhamento. Se a palavra-chave escolhida signifique que o item transborde o alinhamento do container, causando assim perda de dados, o item é alinhado como estivesse no modo start.
unsafe
Usado em conjunto com uma palavra-chave de alinhamento. Independente dos tamanhos relativos do item, do alinhamento do container e caso overflow possa causar perda de dados, o valor de alinhamento estabelecido é mantido.

Sintaxe formal

normal | stretch | <baseline-position> | [ <overflow-position>? <self-position> ]

where
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end

Exemplo

CSS

#container {
  height:200px;
  width: 240px;
  align-items: center; /* Pode ser mudado na amostra ao vivo */
  background-color: #8c8c8c;
}

.flex {
  display: flex;
  flex-wrap: wrap;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 50px);
}

div > div {
  box-sizing: border-box;
  border: 2px solid #8c8c8c;
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#item1 {
  background-color: #8cffa0;
  min-height: 30px;
}

#item2 {
  background-color: #a0c8ff;
  min-height: 50px;
}

#item3 {
  background-color: #ffa08c;
  min-height: 40px;
}

#item4 {
  background-color: #ffff8c;
  min-height: 60px;
}

#item5 {
  background-color: #ff8cff;
  min-height: 70px;
}

#item6 {
  background-color: #8cffff;
  min-height: 50px;
  font-size: 30px;
}

select {
  font-size: 16px;
}

.row {
  margin-top: 10px;
}

HTML

<div id="container" class="flex">
  <div id="item1">1</div>
  <div id="item2">2</div>
  <div id="item3">3</div>
  <div id="item4">4</div>
  <div id="item5">5</div>
  <div id="item6">6</div>
</div>

<div class="row">
  <label for="display">display: </label>
  <select id="display">
    <option value="flex">flex</option>
    <option value="grid">grid</option>
  </select>
</div>

<div class="row">
  <label for="values">align-items: </label>
  <select id="values">
    <option value="normal">normal</option>
    <option value="flex-start">flex-start</option>
    <option value="flex-end">flex-end</option>
    <option value="center" selected>center</option>
    <option value="baseline">baseline</option>
    <option value="stretch">stretch</option>

    <option value="start">start</option>
    <option value="end">end</option>
    <option value="self-start">self-start</option>
    <option value="self-end">self-end</option>
    <option value="left">left</option>
    <option value="right">right</option>

    <option value="first baseline">first baseline</option>
    <option value="last baseline">last baseline</option>

    <option value="safe center">safe center</option>
    <option value="unsafe center">unsafe center</option>
    <option value="safe right">safe right</option>
    <option value="unsafe right">unsafe right</option>
    <option value="safe end">safe end</option>
    <option value="unsafe end">unsafe end</option>
    <option value="safe self-end">safe self-end</option>
    <option value="unsafe self-end">unsafe self-end</option>
    <option value="safe flex-end">safe flex-end</option>
    <option value="unsafe flex-end">unsafe flex-end</option>
  </select>
</div>

Resultado

Especificações

Especificação Status Comentário
CSS Box Alignment Module Level 3
The definition of 'align-items' in that specification.
Rascunho atual Atualização para últimas definições de sintaxe.
CSS Flexible Box Layout Module
The definition of 'align-items' in that specification.
Candidata a Recomendação Definição inicial

Initial valuenormal
Aplica-se aall elements
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Compatibilidade de Navegador

Support in Flex layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 52
Full support 52
Partial support 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support 21
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Full support 20
Notes
Full support 20
Notes
Notes Multi-line flexbox has been supported since Firefox 28.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 11
Notes
Full support 11
Notes
Notes In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.
Opera Full support 12.1Safari Full support 7
Prefixed
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 52
Full support 52
Partial support 4.4
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 52
Full support 52
Partial support 29
Notes
Notes Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Mobile Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 20
Notes
Full support 20
Notes
Notes Multi-line flexbox has been supported since Firefox 28.
Full support 49
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
No support 18 — ?
Disabled
Disabled From version 18: this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 48
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -webkit-
Disabled From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 7
Prefixed
Full support 7
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android ?
first baseline and last baselineChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
start and endChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge ? Firefox Full support 45IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 45Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome No support NoEdge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari ? WebView Android ? Chrome Android ? Edge Mobile No support NoFirefox Android Full support 63Opera Android ? Safari iOS ? Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Support in Grid layout

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 57Edge Full support 16Firefox Full support 52IE ? Opera Full support 44Safari Full support 10.1WebView Android Full support 57Chrome Android Full support 52Edge Mobile Full support YesFirefox Android Full support 52Opera Android Full support 44Safari iOS Full support 10.3Samsung Internet Android Full support 6.2

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: rbuzatto
Última atualização por: rbuzatto,