Conteúdo adaptável com CSS Flex

Neste vídeo apresentamos o desenvolvimento de um conteúdo que tem por finalidade ajustar a altura dos seus elementos automaticamente. Dessa forma, podemos trabalhar com conteúdos dinâmicos sem a preocupação de quebras em nosso layout.

No cabeçalho da página referenciamos a nossa folha de estilos, o arquivo style.css. Definiremos o corpo do documento e todo o conteúdo.

Agora definimos as propriedades que englobam o conteúdo principal, que são as classes .wrapper e .block. Em ambas definimos o display como flexível (flex).

Por fim, definimos todos os media query que são utilizados nesse exemplo, lembrando que estes não influenciarão na propriedade flex, mas utilizamos os mesmos apenas para ajustar a largura do box e a altura das imagens.