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>

列印頁面