Reverse Element Order with CSS Flexbox

如今，CSS变得越来越强大，几乎到了从显示的角度来看，HTML元素输出到页面的顺序不再重要的地步——CSS让你可以做很多事情，几乎任何布局，无论大小，都是可能的。撇开语义和可访问性不谈，我最近希望知道是否可以只使用CSS以相反的顺序呈现元素，因为在前几年我们需要改变DOM

让我们假设我们有以下HTML：

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

根据您希望元素是垂直显示还是水平显示，您将更改flex direction的值以颠倒元素的顺序：

/* 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; }

行反向以反向顺序水平显示元素，而列反向以反向顺序垂直显示元素。

我最近使用这种技术来克服AngularJS的一个令人沮丧的问题，即我在对象的键上迭代；没有办法以与模板相反的顺序迭代这些键，所以我用CSS反转了这些元素。虽然不理想，但它在短期内完成了任务。

我记得Flexbox旨在以惊人的方式改变CSS，虽然我不认为Flexbox的使用改变了网络世界，但我确实认为我们确实有这样很棒的技巧。我希望扩大我的Flexbox视野，但在此之前，我将继续分享这样的片段！