Um guia completo sobre Flexbox!

O que é o Flexbox?

O Flexbox faz parte da especificação do CSS3 e promete organizar elementos sem a ajuda do float e sanar problemas quando acrescentamos padding, margin e border no elemento.

O problema

Vamos imaginar que você tem uma ul de 100% e você não sabe quantas li’s irá conter em seu html pois ela será dinâmica, podendo haver 5, 10, 15 ou mais li’s. Se você soubesse que haveria 4 li’s por exemplo seria possível fazer cada uma com 25% para ocupar todo os 100%.

Como funciona?

Os filhos de um elemento com flexbox pode se posicionar em qualquer direção e pode ter dimensões flexíveis para se adaptar. É possível ajustar os elementos filhos proporcionalmente de acordo com o elemento pai.

Funciona em qual navegadores?

O Flexbox ainda é uma especificação e ainda deve ser usada com prefixos como -webkit-, -moz-, -ms-, -o-.

A propriedade justify-content

A propriedade justify-content é responsável por alinhar os itens na horizontal

Valores para a propriedade justify-content

• flex-start
• flex-end
• center
• space-between
• space-around

Flex-start

Itens são alinhados a esquerda

• Item 1
• Item 2
• Item 3

ul li {
	justify-content: flex-start;
}

Flex-end

Itens são alinhados a direita

• Item 1
• Item 2
• Item 3

ul li {
	justify-content: flex-end;
}

Center

Itens são alinhados ao centro

• Item 1
• Item 2
• Item 3

ul li {
	justify-content: center;
}

Space-between

Itens são distribuídos uniformemente sendo o primeiro item a esquerda, o último item a direita, e os demais ao centro.

• Item 1
• Item 2
• Item 3

ul li {
	justify-content: space-between;
}

Space-around

Itens são distribuídos uniformemente a partir do centro.

• Item 1
• Item 2
• Item 3

ul li {
	justify-content: space-between;
}

A propriedade align-items

A propriedade align-items é responsável por alinhar os itens na vertical.

Valores para a propriedade align-itens

• flex-start
• flex-end
• center
• stretch

Flex-start

Itens são alinhados no início a partir do topo.

• Item 1
• Item 2
• Item 3
• Item 4

ul li {
	align-items: flex-start;
}

Flex-end

Itens são alinhados no final a partir do topo.

• Item 1
• Item 2
• Item 3
• Item 4

ul li {
	align-items: flex-end;
}

Center

Itens são alinhados ao centro a partir do topo.

• Item 1
• Item 2
• Item 3
• Item 4

ul li {
	align-items: center;
}

Stretch

Itens são estendidos do topo ao rodapé e vice-versa.

• Item 1
• Item 2
• Item 3
• Item 4

ul li {
	align-items: stretch;
}