Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Qual usar? flex-direction ou flex-wrap? são a mesma coisa?

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox

por mirella de deus almeida
| 9.1k xp | 1 posts

Estava testando algumas coisas no Flexbox e acabei colocando a opção flex-wrap: wrap no meu codigo ao invés da flex-direction: column, gerando um resultado muito parecido, ambos podem ser usados para o mesmo objetivo? Como eu sei quando usar um ou outro? E porque o flex-wrap tira o espaço entre os elementos?

.apresentacao__conteudo{
    display: flex;
    width: 615px;
    flex-direction: column;
    gap: 40px;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade 

.apresentacao__conteudo{
    display: flex;
    width: 615px;
    flex-wrap: wrap;
    gap: 40px;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
por Vitória Pacheco
| 30.3k xp | 70 posts

Oi Mirela,

flex-direction: column organiza os itens em uma coluna, empilhando-os verticalmente.

flex-wrap: wrap permite que os itens que não cabem em uma linha “quebrem” para a próxima linha, criando várias linhas ou colunas, dependendo da direção principal.

Eles podem parecer gerar resultados parecidos, mas não são para o mesmo propósito. Use flex-direction: column quando quiser os itens sempre em coluna. Use flex-wrap: wrap quando quiser que os itens quebrem para uma nova linha ou coluna ao não caberem no espaço disponível.

Sobre o gap: quando usar flex-wrap, o espaçamento entre linhas pode parecer diferente ou menor porque o gap controla o espaço entre itens na mesma linha e entre linhas, mas o layout quebrado pode afetar essa percepção.