Ordem reversa de elementos com CSS Flexbox

O CSS está se tornando cada vez mais poderoso nos dias de hoje, quase a ponto de a ordem dos elementos HTML que são exibidos na página não ter mais importância do ponto de vista da exibição – o CSS permite que o senhor faça tantas coisas que praticamente qualquer layout, grande ou pequeno, é possível. Deixando a semântica e a acessibilidade de lado, recentemente eu queria saber se era possível renderizar elementos em ordem inversa usando apenas CSS, já que nos anos anteriores precisávamos mudar o DOM de lugar

Vamos supor que temos o seguinte HTML:

<ul">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
    <li>Seven</li>
    <li>Eight</li>
    <li>Nine</li>
    <li>Ten</li>
</ul>

Dependendo se o senhor deseja que os elementos sejam exibidos vertical ou horizontalmente, altere o valor de flex-direction para inverter a ordem dos elementos:

/* show reverse by horizontal row */
.row-reverse { display: flex; flex-direction: row-reverse; }

/* show reverse by vertical column */
.column-reverse { display: flex; flex-direction: column-reverse; }

row-reverse exibe os elementos em ordem inversa na horizontal, enquanto o column-reverse exibe os elementos em ordem inversa na vertical.

Recentemente, usei essa técnica para superar um problema frustrante com o AngularJS, no qual eu estava iterando sobre as chaves de um objeto; não havia como iterar sobre essas chaves na ordem inversa do modelo, então inverti os elementos com CSS. Não é o ideal, mas funcionou a curto prazo.

Lembro-me de quando o Flexbox foi criado para mudar o CSS de maneiras incríveis e, embora não ache que o uso do Flexbox tenha mudado o mundo da Web, acho que temos truques incríveis como esse. Espero expandir meus horizontes do Flexbox, mas, até lá, continuarei compartilhando trechos como esse!