flex-row-reverse
时间: 2024-01-05 10:04:02 浏览: 33
flex-row-reverse是CSS中的一个属性,用于指定flex容器中子元素的排列方向为从右到左。具体示例如下:
```html
<style>
.flex-container {
display: flex;
flex-direction: row-reverse;
}
.flex-item {
width: 100px;
height: 100px;
background-color: red; margin: 10px;
}
</style>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
```
上述代码中,我们创建了一个flex容器,并将其flex-direction属性设置为row-reverse,这样子元素会从右到左排列。每个子元素都具有相同的宽度和高度,并且它们之间有一定的间距。