Align items

Nesta aula veremos outras duas importantes propriedades do flex: JustifyContent e AlignItems

Justificando o conteúdo

Essa propriedade diz respeito a como os elementos serão distribuídos dentro da direção principal. Existem algumas formas de distribuição, são elas:

• flex-start (versão padrão): aAlinha os elementos do container a partir do início do eixo principal do container.
• flex-end: alinha os elemento do container a partir do final do eixo principal do container.
• center: alinha os elementos do container no centro do eixo principal do container.
• space-between: distribui de maneira que o primeiro elemento fica na borda inicial do eixo principal, o último elemento fica na borda final e o restante dos itens são distribuídos de maneira uniforme no eixo principal.
• space-around: semelhante ao space-between, porém, vai existir uma margem no início e no final do eixo principal, sendo o restante dos elementos distribuídos de maneira uniforme. Essas margens no início e no fim do eixo têm metade do tamanho do espaço entre dois elementos do container.
• space-evenly: distribui os elementos de maneira uniforme no eixo principal, sendo exatamente iguais tanto os espaços entre os itens, quanto os espaços nas margens do início e fim do eixo principal do container.

Alinhamento dos itens

O AlignItems é semelhante ao JustifyContent, a diferença é que ao invés de aplicar-se ao eixo principal, se aplica ao eixo secundário.

As formas de alinhamento estão descritas abaixo:

• flex-start: alinha os elementos a partir do início do eixo secundário do container.
• flex-end: alinha os elementos a partir do final do eixo secundário do container.
• center: alinha os elementos no centro do eixo secundário do container.

Acompanhando a aula, teste essas funcionalidades modificando o objeto de estilização abaixo:

const styles = StyleSheet.create({

  container: {
    flex: 1,
    flexDirection: 'column',
    direction: 'ltr',
    justifyContent: 'center',
    alignItems: 'center'
  },
  box: {
    width: 100,
    height: 100
  },
  cor1: {
    backgroundColor: '#00F'
  },
  cor2: {
    backgroundColor: '#05F'
  },
  cor3: {
    backgroundColor: '#0AF'
  },

})