Question

我想知道是否有任何方法可以从后面对齐元素。我知道wrap-reverse反转会从后面对齐元素，但它也会反转元素的顺序。是否可以从最后开始包装并保持顺序相同。 Sample Image is posted here!

Answer 1

使用此css代码：

div{flex-direction:row-reverse;}

根据您的布局，弯曲方向可能是反向的

Answer 2

从我看到它，这个问题不应该由CSS来解决，而应该由app逻辑解决，因为它归结为反向查询（元素的顺序）。一旦你以相反的顺序得到它们，你可以简单地去

flex-flow: row-reverse wrap-reverse;

...将它们对齐在右下角。然而，即使有点麻烦，CSS现在可以反转堆栈的顺序，但据我所知，它需要一行/位置。这是一个例子：

＆＃13;

div {
  display: flex;
  flex-flow: row-reverse wrap-reverse;
  justify-content: center;
  min-height: 100vh;
  align-content: flex-start;
}

span {
  text-align: center;
  padding: 1rem;
  margin: 1rem;
  border: 1px solid #aaa;
  max-width: calc(33.3333% - 2rem);
  min-width: calc(33.3333% - 2rem);

}
span:nth-child(1) {order: 5}
span:nth-child(2) {order: 4}
span:nth-child(3) {order: 3}
span:nth-child(4) {order: 2}
span:nth-child(5) {order: 1}

body {margin: 0;}
* {box-sizing: border-box;}

＆＃13;

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
</div>

＆＃13;

但是，使用简单的JavaScript行，您可以在页面加载时反转父级中所有子级的顺序，并且我相信在处理可变内容/堆栈时，它的可伸缩性要高得多。

但是，再一次，我们得到答案的开头：为什么不在服务器端呢？

像金字塔一样的Flex项目

2 个答案: