Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

flex-basis

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Flexbox e atividade Migrando a página de portfolio para usar flexbox

por Victor Augusto de Mathias Sanches
| 46.7k xp | 15 posts

Por que se eu tirar o "flex-basis: 100%" do css ".portfolio li:first-child," quem fica com a largura de 100% é o ultimo trabalho do Terra.com.br? segue abaixo o cod css.

.portfolio li {
    flex: 1 1 45%;
    border: .5em solid black;
    background-color: #FAFFFC;
    width: 45%;
    box-sizing: border-box;
    padding: 1em;
    margin-right: 1em;
    margin-bottom: 1em;

}

.portfolio img {
    width: 100%;
    box-shadow: 0 0 4px #000;
}

.portfolio li:first-child {
    width: 100%;
    flex-basis: 100%;

}

.portfolio {
    display: flex;
    flex-wrap: wrap;
2 respostas
solução!
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Victor,

O que acontece é que se não estilizarmos o :first-child ele vai se comportar como os outros .portfolio li, ou seja, terá um flex-basis de 45%.

Isso significa que sempre que possível, todas as li terão 45 % do tamanho do .portfolio. Juntando 45% com o tamanho das margens, isso faz com que sempre caibam 2 <li> por linha.

Se tivermos um número ímpar de <li>, sempre vai sobrar uma no final, e como cada <li> tem flex-grow: 1 , o elemento que sobrou por último vai se expandir até ocupar a linha toda.

Se tivermos uma quantidade ímpar de <li> e fizermos a primeira <li> ocupar tudo, ficamos com um número par de <li> para dividir nas outras linhas, invertendo a situação original. Agora o último elemento cabe juntamente com o penúltimo elemento na mesma linha, ocupando 45%.

Fiz uns testes aqui:

Aqui o comportamento padrão, sem aumentar o primeiro elemento: https://codepen.io/artdiniz/pen/ERJNyG

Aqui aumento o tamanho do primeiro elemento e faço ele ocupar a linha toda com flex-basis: 100%: https://codepen.io/artdiniz/pen/dKLOzP

por Victor Augusto de Mathias Sanches
| 46.7k xp | 15 posts

Artur, muito obrigado pela explicação! Esclareceu a minha dúvida!