如何实现Div元素水平反向排列？解决现有方案失效问题

问题排查 #

你当前的代码有几个关键问题导致水平反向排列失效：

1. flex-direction: column-reverse是垂直方向反转元素顺序，和你要的水平反向完全无关
2. 当父容器设置为display:flex后，子元素的float属性会被完全忽略，所以之前加的float:right根本不起作用
3. grid-template-columns是Grid布局的属性，放在Flex容器里属于无效代码，不会产生任何效果

解决方案 #

要实现水平方向的反向排列，只需要对Flex容器做以下调整：

• 保留display:flex，把flex-direction改成row-reverse（这是水平反转的正确属性）
• 移除所有无效的float和grid-template-columns属性

修改后的代码 #

app.component.html

<div class="wrapper">
  <div class="top">top</div>
  <div class="bottom">bottom</div>
</div>

app.component.css

.wrapper {
  width: 100%;
  display: flex;
  flex-direction: row-reverse; /* 水平反向排列 */
}

.wrapper div {
  width: 50%;
  border: 2px solid #ccc;
}

这样修改后，原本的top和bottom会在水平方向上反向显示，呈现为bottom在左、top在右的排列效果。

内容的提问来源于stack exchange，提问作者Pakal Nilavu