Se você é um desenvolvedor das antes, vai se lembrar de como eram os artifícios para montar layouts utilizando tabelas. Depois do surgimento do CSS Flexbox as coisas ficaram mais fáceis, e aquela lembrança de se usar float e position ficou no passado.

Flexbox, mais que uma propriedade

Flexbox é um novo modo de layout em CSS 3, que nos dá acesso a um modelo de layout flexível que permite a organização dos elementos responsivos dentro de um container da forma que você desejar, claro dependendo do espaço.

Dito isto, é importante frisar que Flexbox é muito mais que uma propriedade e sim um conjunto de propriedades que formam um módulo inteiro dentro do CSS.

Propriedades do Flexbox

Para começar precisamos usar o display com o valor flex, para que as outras propriedades tenham o comportamento desejado.

flex-direction

Essa propriedade define o sentido e direção da exibição, em outras palavras, essa propriedade que irá definir se a organização do elemento será em linhas ou colunas.

.container {
	display: flex;
	flex-direction: [column | column-reverse | row | row-reverse]
}

justify-content

O justify-content define o alinhamento dos itens ao longo do eixo principal do container. Neste caso não é necessário informar o atributo flex-direction, pois o seu valor será row por padrão.

.container {
	display: flex;
	justify-content: [flex-start | flex-end | center | space-between | space-around]
}

align-items

Esse atributo define o comportamento padrão de como os itens são posicionados em relação ao eixo principal do container. Por exemplo, caso o eixo principal for horizontal, o comportamento dos itens será em relação ao eixo vertical.

.container {
	display: flex;
	flex-direction: row;
	align-items: [stretch | flex-start | flex-end | center | baseline];
}

align-content

Esse atributo define o alinhamento das linhas do container. Pelo fato de alinhar as linhas, esta propriedade só tem efeito quando existe mais de uma linha no container.

.container {
	display: flex;
	flex-direction: row;
	align-content: [stretch | flex-start | flex-end | center | baseline];
}

Essas são as principais propriedades do flexbox, espero que com elas você consiga criar com uma maior facilidade os seus projetos.

Caso tenha alguma dúvida que não foi abordada neste artigo, você pode consultar estes temas relacionados no link.

• Flexbox no MDN
• Flexbox no W3Schools

Espero que este post tenha sido útil para você e se gostou compartilhe com seus amigos e não deixe de acessar outros conteúdos do blog.