Série da semana: O JavaScript está dominando o mundo?

Veja mais
Menu de vídeos

3. Organizando os elementos com Flexbox

Você está deslogado

Veremos nesse vídeo como usar o Flexbox para organizar os elementos e torná-los autoajustáveis em relação ao contêiner sem o uso do float e sem a necessidade de um tamanho fixo no contêiner.

11:30 min

Consulta rápida:

.container{
    display: flex;
    flex-flow: row wrap;
}

Definindo que os controles no interior do container serão organizados com display flex na forma de linhas (row) e com quebra de linha (wrap).

.card{
    display: flex;
    flex-flow: column wrap;
    flex-basis: 45%;
}

Definindo que os cards têm display flexível (flex), com seu conteúdo sendo organizado na forma de colunas (column), com quebra de coluna (wrap), e partindo de uma largura base de 45% do container.

.card div{
    flex-grow: 1;
}

Definindo que a div no interior do card deve ocupar todo o espaço disponível.

Baixar vídeo Baixar código fonte Ver Código
Avalie o curso
Suporte ao aluno - Deixe a sua dúvida.