一、简介

direction 是 CSS 中的一个属性，用于设置文本、表格列和水平溢出的方向。它主要控制文本的书写方向以及元素的排列方向。

direction: ltr | rtl | inherit;

• ltr（默认值）：从左到右（Left-to-Right），适用于大多数语言，如英语、中文等。
• rtl：从右到左（Right-to-Left），适用于希伯来语、阿拉伯语等从右向左书写的语言。
• inherit：继承父元素的方向设置。

二、示例

示例

direction 对 flex

<script setup>
import { ref, computed } from "vue";

let value1 = ref("");
let value2 = ref("");

let containerClass = computed(() => {
  return `container ${value1.value} ${value2.value}`;
});
const options1 = [
  { label: "ltr", value: "ltr" },
  { label: "rtl", value: "rtl" },
];
const options2 = [
  { label: "row", value: "row" },
  { label: "row-reverse", value: "row-reverse" },
  { label: "column", value: "column" },
  { label: "column-reverse", value: "column-reverse" },
];
</script>
<template>
  <div class="my-custom-content">
    <el-row>
      <el-col :span="5">flex-direction：</el-col>
      <el-col :span="6">
        <el-select key="2" v-model="value2">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="5">direction：</el-col>
      <el-col :span="6">
        <el-select key="1" v-model="value1">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
  </div>
  <div :class="containerClass">
    <div class="item">元素 1</div>
    <div class="item">元素 2</div>
    <div class="item">元素 3</div>
    <div class="item">元素 4</div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  margin-top: 30px;
  height: 250px;
  background-color: #f0f0f0;
}
.item {
  border: 1px solid #aaa;
  padding: 10px;
}
.lrt {
  direction: ltr;
}
.rtl {
  direction: rtl;
}
.row {
  flex-direction: row;
}
.row-reverse {
  flex-direction: row-reverse;
}
.column {
  flex-direction: column;
}
.column-reverse {
  flex-direction: column-reverse;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24