CSS 属性

CSS flex-direction 属性确定 Flex 项目在 Flex 容器中的放置方向。 Flex 项目可以排列在水平行或垂直列中。

属性值

  • row: 的主轴Flex 容器遵循文本的方向。 main-start 和 main-end 点与内容的方向对齐。

  • row-reverse: 与行值相同，但 main-start 和 main-end 点与内容方向相比，沿着主轴的方向是相反的。

  • column: Flex 容器的主轴与块轴相同。 main-start 和 main-end 点对应于书写模式下的前后点。

  • column-reverse: 与 column 相同，但有 main-start 和 main-end点位于内容流的相反方向。

适用范围

Flex 容器

语法

flex-direction: row|row-reverse|column|column-reverse;

CSS flex-direction: row 

以下示例演示了 flex-direction: row 属性从左到右水平排列 Flex 项目。

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-direction: row;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS flex-direction: row-reverse 

以下示例演示了 flex-direction: row-reverse 属性以水平方向排列 Flex 项目，但顺序相反，从右到左 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-direction: row-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS flex-direction: column 

以下示例演示了 flex-direction:column 属性从上到下在垂直方向上排列 Flex 项目 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-direction: column;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>

CSS flex-Direction: column-reverse 

以下示例演示了 flex-direction: column-reverse 属性以垂直方向排列 Flex 项目，但顺序相反，从下到上 -

<html>
<head>
<style>
   .flex-container {
      display: flex;
      flex-direction: column-reverse;
      background-color: green;
   }
   .flex-container div {
      background-color: yellow;
      padding: 10px;
      margin: 5px;
      width: 75px;
      height: 50px;
   }
</style>
</head>
<body>
   <div class="flex-container">
      <div>Flex item 1</div>
      <div>Flex item 2</div>
      <div>Flex item 3</div>
   </div>
</body>
</html>