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…


Gulp symbol

Gulp is a toolkit to automate and enhance your workflow. This means you can automate your process to spend less time doing repetitive stuff.

In this scenario I will use Gulp to compile Sass files into CSS (also creating source maps), copy JS into the build folder and reload or…

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