Exercícios Flexbox

Galeria de fotos

Existem diferentes formas de resolver o exercício, vamos ver duas diferentes formas. A primeira forma consiste na utilização da propriedade flex-wrap.

Você vai criar o seu documento HTML com as 9 imagens e atribuir um container para elas destacado abaixo.

galeria-fotos.html

<div class="galeria">
    <img src="https://picsum.photos/id/237/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/238/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/230/300/200" alt="imagem aleatoria">

    <img src="https://picsum.photos/id/231/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/232/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/233/300/200" alt="imagem aleatoria">

    <img src="https://picsum.photos/id/234/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/235/300/200" alt="imagem aleatoria">
    <img src="https://picsum.photos/id/236/300/200" alt="imagem aleatoria">
</div>

A URL utilizada possui o seguinte formato https://picsum.photos/id/{1}/{2}/{3}, na qual, o valor {1} corresponde a um ID da imagem (com isso você consegue pegar imagens diferentes). Em {2} a largura da imagem e {3} a altura da imagem.

Para posicionar as imagens devemos fazer a utilização do flexbox com a propriedade display: flex no container. Faça essa modificação e você vai perceber que as imagens vão ficar todas um ao lado da outra em uma mesma linha, o que não é suficiente para solucionar o problema. Para resolver precisaremos adicionar mais propriedades, que serão detalhadas logo a seguir.

galeria-fotos.css

.galeria {
    display: flex;
    flex-wrap: wrap;
    gap:30px;
    width: 984px;
}

.galeria img {
    border: solid 4px #000;
}

display: flex: permite a utilização do flexbox;
flex-wrap: faz com que o flexbox permita aos elementos se posicionarem em mais de uma linha ou em outras palavras, permite a geração de quebra de linha, fazendo com que os elementos fiquem em linhas separadas caso não caibam em seu container;
gap: 30px: gera um espaço de 30px entre os elementos, tanto na horizontal como na vertical;
width: 984px: limita o espaço total do container para que a disposição dos elementos possam se dar de 3 em 3.

Veja que cada imagem tem uma largura de 300px com uma borda de 4px de cada lado e os elementos tem um espaçamento de 30px entre eles. Logo a largura total de cada imagem é de 4px (borda esquerda) + 300px + 4px (borda direita) que é 308px, esse valor multiplicado por três imagens da um total de 924px mais o espaçamento entre as imagens que é de 30px multiplicado por 2 vezes que é utilizado da 60px. No total temos os 924px das imagens mais os 60px de espaço, resultado em 984px no total da largura do container.

A segunda forma é separando os elementos cada um em sua linha.

galeria-fotos.html

<div class="galeria">
    <div class="linha">
        <img src="https://picsum.photos/id/237/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/238/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/230/300/200" alt="imagem aleatoria">
    </div>
    <div class="linha">
        <img src="https://picsum.photos/id/231/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/232/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/233/300/200" alt="imagem aleatoria">
    </div>
    <div class="linha">
        <img src="https://picsum.photos/id/234/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/235/300/200" alt="imagem aleatoria">
        <img src="https://picsum.photos/id/236/300/200" alt="imagem aleatoria">
    </div> 
</div>

E no CSS:

galeria-fotos.css

.linha {
    display: flex;
    gap:30px;
    margin-bottom: 30px;
}

.galeria img {
    border: solid 4px #000;
}

Perceba que agora não utilizamos a propriedade flex-wrap, por outro lado como os elementos estão separados cada um em sua linha precisamos de uma margin-bottom pra conseguir espaçar essas linhas entre si.

Cards

O desafio desse exercício encontra-se na construção do elemento que chamamos de cartão card. A organização dos diversos cards é a mesma do exercício da galeria, então vamos nos concentrar em criar o cartão.

card.html

<div class="galeria">
    <div class="card">
        <img src="https://picsum.photos/id/1/200/150" alt="imagem aleatoria">
        <div class="text">
            <h2>Lorem ipsum dolor</h2>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit ipsa debitis natus tenetur quas.</p>
            <a href="#">Veja mais...</a>
        </div>
    </div>
</div>

A parte mais importante é a criação do container para englobar os elementos h2, p, e a que formam a parte inferior do card. Isso é necessário pois precisamos de um espaçamento interno de todos eles para chegar ao efeito desejado. Nesse exemplo foi utilizado o elemento a para representar o botão, mas poderia ser outro elemento como o próprio button.

.card {
    width: 200px;
    height: 400px;
    box-shadow: 2px 2px 8px #9d9d9d;
}

.card .text {
    padding: 15px;
}

.text h2 {
    margin: 0;
}

.text a {
    background-color: #9d9d9d;
    padding: 10px;
    display: block;
    text-decoration: none;
    color: white;
    text-align: center;
}

No CSS temos vários trechos importantes. Começando o elemento card temos a propriedade box-shadow na linha 4 para criar uma sombra na caixa. Ela tem a mesma sintaxe (forma de escrever) da propriedade text-shadow. Ainda no card apenas temos uma largura e altura definidos para cada um deles.

Em seguida, temos na linha 115 um espaçamento interno (padding) no container text. Com ele conseguimos diminuir o espaçamento de todos os elementos dentro dele para conseguir o efeito da imagem ocupar todo o espaço e os demais elementos possuirem esse espaçamento.

Na linha 119 temos a propriedade margin: 0 sendo aplicada ao elemento h2. Isso se faz necessário porque por padrão o navegador vai aplicar algumas propriedades aos elementos comuns, no caso o h2 já possui uma margem, que faz com ele empurre o elemento mais pra baixo do que estamos precisando.

Por fim, na linha 125, temos a propriedade display: block sendo aplicada ao elemento a. Isso é feito porque por padrão o elemento vai ter a propriedade display: inline, isso faz com que o elemento ocupe somente seu espaço necessário na tela enquanto que a propriedade display: block vai fazer com que ele ocupe todo o espaço disponível no container a qual está inserido.