[Dúvida] DISPLAY : FLEX; NA LISTA E NO ITEM DE LISTA.

Boa tarde, tudo jóia?

.destaques__categorias___lista {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: space-between;
}

.destaques__categorias___item {
    align-items: center;
    background: #fdfdfd;
    border-left: 5px solid transparent;
    color: #333333;
    display: flex;
    padding: 1rem;
    width: 50%;
}

Então de acordo com o desenvolvimento da aplicação percebi que foi aplicado o display : flex; tanto na lista (ul) quanto no item de lista (li).

Não conseguir entender o motivo, pois quando você define uma caixa/container com display: flex; os elementos/filhos que estão dentro desse container serão considerados (Flex Itens), então na minha visão seria desnecessário o uso novamente do display : flex; no Flex Item, ou não?

Ficaria grato, caso pudesse sanar minha dúvida, Agradeço, desde já, a atenção dispensada ;).

Boa noite, James. Sem ter acesso ao HTML não posso te afirmar com 100% de certeza porque, no caso do display: flex um contexto específico pode ditar esse tipo de uso.

De qualquer forma, pelo próprio CSS que você mandou acredito que a questão esteja no justify-content: space-between; usado no elemento pai, que aqui funciona como um flex container, com seus filhos funcionando como flex items, usando o align-items: center;. Nesse sentido, optou-se aqui por duas utilizações diferentes para pai e filhos dentro do contexto do flexbox: tanto o justify-content (que, por sinal, só pode ser usado em flex containers) quanto o align-items: center.

Espero ter ajudado. Abração.

Mergulhe em programação