Solucionado
Olá. Gostaria de entender por qual motivo não foi necessário aplicar no media para mobile o flex-direction: column para fazer os elementos que estavam em wrap ficar um na sequência do outro? Apenas aplicou o width: 100% no .sobre-nos__beneficios--card e eles respeitaram o alinhamento.
Aproveite o aniversário da Alura
e comece sua jornada tech
Por tempo limitado
Oi, Marconi! Como vai?
Agradeço por compartilhar sua dúvida com a comunidade Alura.
Sobre sua pergunta: por que não foi necessário usar flex-direction: column na media query para alinhar os cards um embaixo do outro?A resposta está no comportamento natural do flex-wrap: wrap e na mudança do width para 100%.
Quando um container flex tem flex-wrap: wrap, seus filhos podem "quebrar" para a linha de baixo se não houver espaço horizontal suficiente. Ao definirmos:
.sobre-nos__beneficios--card {
width: 100%;
}
...dizemos que cada card deve ocupar toda a largura do container, então o flex automaticamente empilha os itens um abaixo do outro, sem precisar mudar o flex-direction. Já o uso de flex-direction: column seria necessário caso quiséssemos forçar essa organização mesmo com larguras menores, mas como os cards têm width: 100%, eles naturalmente se organizam na vertical.
Espero ter ajudado.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!