Flexbox - Parte 2

navigate_before 1

3 navigate_next

Agora, criaremos algumas colunas de texto para demonstrar o uso da flexbox na prática.

Criaremos um container com um texto dentro. Usaremos width:100%; para que ela ocupe toda a divisão na qual ela está inserida (tirando os espaços do padding.) e height:auto; para que ela se ajuste de acordo com o tamanho do texto. E por fim, um padding:25px; para que tenha um espaço de 25px entre as bordas do container.

tips_and_updates

Se preferir, poderá definir um tamanho específico substituindo o auto por outro valor.

CSS:

HTML:

Resultado:

Agora, criaremos outra div para abrigar os textos.

CSS:

HTML:

Resultado:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

Agora vamos definir as configurações do texto. Crie uma outra div com o mesmo nome, porém agora adicionando a tag de texto p ao lado. Definimos a cor preta, o tamanho de 18px e a fonte "Arial".

Repare que a tag p está posicionada à frente da div .containertexto, portanto, esta configuração de texto será válida somente dentro da div .containertexto.

Veja como ficará o código:

tips_and_updates

A real fonte deste exemplo é "Quicksand", porém, para exemplificar de maneira mais simples, está listada como "Arial". Veja Google Fonts para ver como escolher fontes diferentes para o seu site.

Agora vamos duplicar este texto para criar outra coluna, copiando a div containertexto, ainda dentro da div container. Em seguida, vamos adicionar um gap:15px; para separá-los.

CSS:

HTML:

Resultado:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

Por padrão, os itens da flexbox se ajustam automaticamente para caber dentro do seu container.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

É possível alterar este comportamento com o comando flex-wrap:wrap;. (O padrão é flex-wrap:nowrap;).

Assim, os itens irão preservar o seu tamanho e pular para a linha seguinte.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

Agora que temos o texto, vamos adicionar duas imagens uma do lado da outra. Primeiro, vamos criar um container para a imagem, e em seguida inserir as imagens.

CSS:

HTML:

Para ajustar o tamanho da imagem, criaremos a div .containerimagem img e definir o tamanho de, por exemplo, 200x100

tips_and_updates

Se a imagem for muito grande, ela pode passar dos limites do container.

CSS:

Resultado:

O .containerimagem está com uma cor diferente para melhor visualização, porém, a deixaremos com a mesma cor do .container posteriormente. Usamos width:100%; para que ela ocupe todo os espaço da div .container.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

Aqui usamos flex-direction:row; para que as imagens fiquem uma do lado da outra, e justify-content:space-around; para adicionar um espaço entre as imagens. Adicione um padding: com um valor de sua preferência para que a imagem não fique colada nas bordas.

Resultado final:

CSS:

HTML:

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem fugiat officiis nesciunt temporibus voluptatem, autem aperiam doloremque.

Na próxima página, veremos como foi feito este elemento da página principal deste site:

navigate_before 1

3 navigate_next