Flex Container

É o elemento que possui a propriedade display: flex/inline-flex; assim tornando todos seus filhos diretos flex items

Display

Define o elemento como um container flex (inline ou block dependendo do valor passado) e estabelece um contexto de formatação flex para todos seus filhos diretos, ou seja, agora todos os filhos serão…

Grid Container

Display

Define o elemento como um contêiner de grid e estabelece um novo contexto de formatação de grid para seu conteúdo.

display: grid;
Gera um grid como elemento de bloco.

display: inline-grid;
Gera um grid como elemento de linha

São aplicadas direta e individualmente aos flex items e controlam suas propriedades flexíveis.

Conceitos básicos:

  • Item Flex
    Elemento filho de um container flex (display: flex)
  • Tamanho do Item Flex
    Valor flexível dado ao item flex dentro do container flex
  • Tamanho do Item (normal)
    Valor definido para o item, usando width ou…

O alinhamento no eixo-cruzado, eixo oposto ao definido em flex-direction, é realizado tanto pelo align-items quanto o align-content, isso pode facilmente gerar confusão. Para isso irei demonstrar na prática a diferença entre eles.

Nosso exemplo estará com flex-direction: row; e flex-wrap: wrap; logo o eixo cruzado será o vertical, também…

Lucas Batista

Front-end developer with knowledge in HTML5 / CSS3, Javascript, React JS, Redux, SEO. Learning new concepts and improving my knowledge is what motivates me.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store