CSS - flex-direction 属性

描述

flex-direction 属性决定了弹性项目在弹性容器中排列的方向。弹性项目可以水平排列成一行，也可以垂直排列成一列。

可能的值

row (行)
row-reverse (反向行)
column (列)
column-reverse (反向列)

应用于

所有 HTML 元素。

DOM 语法

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

Flex Direction Row (行方向)

如果 flex-direction 属性设置为 row 值，则弹性项目将水平排列，从左到右。

让我们来看一个例子：

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

Flex Direction Row Reverse (反向行方向)

Flexbox 提供了 flex-direction: row-reverse 属性，它将弹性项目水平排列，但顺序相反。

让我们来看一个例子：

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

Flex Direction Column (列方向)

通过将 flex-direction 属性设置为 column 值，可以将弹性项目垂直排列成一列，从上到下。

让我们来看一个例子：

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

Flex Direction Column Reverse (反向列方向)

弹性项目垂直排列成一列，但顺序相反，从下到上，如下例所示。

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

打印页面