2

Meu objetivo é o seguinte:

O site possui uma área de compra que exibe 3 diferentes planos. Quando esta área de planos é acessada em uma tela maior do que 800px de largura, ela é exibida da seguinte forma:

inserir a descrição da imagem aqui

Os planos ficam dispostos um ao lado do outro.

Porém, quando a tela for menor do que a largura anteriormente dita (800px), eu preciso que a ordem dos planos seja alterada: o plano OURO precisa aparecer em primeiro, o PRATA em segundo e o COBRE em terceiro.

O problema: (recomendo que pulem direto para a parte do @media que é onde se encontra a propriedade order e também é onde o problema está)

.preco {
    background-color: #f7f7f7;
    padding: 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    max-width: 400px;
    margin: 0 auto;
}

.preco-item {
    flex: 1 1 260px;
    border: 4px solid white;
    padding: 20px;
    margin: 10px;
}

.preco-item h2 {
    font-size: 3em;
    color: #a4a4a4;
    text-align: center;
    margin-top: 20px;
}

.preco-item span {
    max-width: 300px;
    margin: 20px auto;
    display: block;
    font-size: 3em;
    text-align: center;
    font-weight: bold;
    padding: 10px 0 5px 0;
    border-top: 4px solid white;
    border-bottom: 4px solid white;
}

.preco-item sup {
    font-size: 1.5rem;
}

.preco-item ul {
    max-width: 300px;
    margin: 20px auto;
    font-size: 1.25em;
    line-height: 1;
    font-style: italic;
    color: #7c7c7c;
}

.preco-item li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.preco-item li::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #2c70ff;
    border-radius: 50%;
}

.preco a {
    max-width: 300px;
    display: block;
    margin: 20px auto;
    border: 4px solid;
    color: #222222;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 2.25em;
    padding: 15px 0;
    text-align: center;
}

@media (max-width: 800px) {
    .preco {
        padding-left: 10px;
        padding-right: 10px;
    }

    .preco .preco-item:nth-child(3) {
        order: 0;
    }

    .preco .preco-item:nth-child(2) {
        order: 1;
    }
}
<section class="preco" id="preco">

        <div class="preco-item">

            <h2>Cobre</h2>

            <span><sup>R$</sup>19</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

        <div class="preco-item">

            <h2>Prata</h2>

            <span><sup>R$</sup>39</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
                <li>Compra Exclusiva</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

        <div class="preco-item">

            <h2>Ouro</h2>

            <span><sup>R$</sup>79</span>

            <ul>

                <li>Planos Ilimitados</li>
                <li>Acesso Restrito</li>
                <li>Conteúdo Secreto</li>
                <li>Suporte 24h</li>
                <li>Compra Exclusiva</li>
                <li>Download dos Items</li>
    
            </ul>

            <a href="#">Comprar</a>

        </div>

    </section>

No meu entendimento:

  • Se o terceiro filho recebe order: 0;, ele passa a ficar em primeiro lugar.
  • Se o segundo filho recebe order: 1;, este passa a ficar em segundo lugar.
  • E o último, que não foi declarado, ficaria, logicamente, na terceira posição. Mas não é o que acontece.

Eu sei que se eu declarar, especificamente, um terceiro :nth-child() e colocar order: 2; o layout passa a responder da forma que eu quero. Apenas quero entender melhor a lógica do por quê ele não assumir automaticamente o valor do próximo elemento.

1 Resposta 1

5

A grosso modo todos os elementos dentro e um container Flex são order: 0 . Então mesmo para o elemento que você não declarou explicitamente order: 0, ele é order: 0 por padrão.

Um detalhe é que você pode usar valores negativos para o order, então se você quer o Ouro em primeiro, pode por exemplo colocar order: -1 nele, então ele pula para a primeira posição, pois é menor que 0 :D. E no Cobre vc coloca order: 1; e ele vai para o final da lista, pois o Prata já é order: 0 por padrão como falei.


Agora uma dica sagaz!

Não precisa de order nos filhos para fazer isso, basta mudar o flex-direction do pai para row-reverse que a ordem dos filhos será invertida!

.pai {
  display: flex;
  justify-content: center;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
  
<p>Pai flex com row-reverse<p>
<div class="pai" style="flex-direction: row-reverse;" >
  <div class="box">1 - OURO</div>
  <div class="box">2 - PRATA</div>
  <div class="box">3 - COBRE</div>
</div >

<p>Pai flex com SEM row-reverse<p>
<div class="pai" >
  <div class="box">1 - OURO</div>
  <div class="box">2 - PRATA</div>
  <div class="box">3 - COBRE</div>
</div >

2
  • 1
    Resposta simplesmente perfeita! Tanto a explicação quanto a dica. Não tinha nem passado pela minha cabeça alterar a ordem dos flex items usando o flex-direction. Muito obrigado <3 20/08/2020 às 10:32
  • 1
    @RicardoPassos que bom que deu certo ai, fico feliz em ter ajudado, tmj
    – hugocsl
    20/08/2020 às 11:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .