CSS - flex-direction 屬性

CSS flex-direction 屬性決定了彈性專案在彈性容器中排列的方向。彈性專案可以水平排列成一行，也可以垂直排列成一列。為了使該屬性生效，專案必須是靈活的。

語法

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

屬性值

值	描述
row	彈性專案以水平方向顯示。
row-reverse	彈性專案以水平方向顯示，但方向相反。
column	彈性專案以垂直方向顯示。
column-reverse	彈性專案以垂直方向顯示，但方向相反。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS Flex Direction 屬性示例

以下示例說明了flex-direction 屬性的不同值。

帶有 Row 值的 Flex Direction 屬性

要在容器中將彈性專案水平排列（從左到右），我們使用row值。這將從容器的左側開始堆疊專案，並向右移動。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: row
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

帶有 Row Reverse 值的 Flex Direction 屬性

要在容器中將彈性專案水平排列（從右到左），我們使用row-reverse值。這將從容器的右側開始堆疊專案，並向左移動。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: row-reverse;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: row-reverse
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

帶有 Column 值的 Flex Direction 屬性

要在容器中將彈性專案垂直排列（從上到下），我們使用column值。這將從容器的頂部開始堆疊專案，並向下移動。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: column;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: column
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

帶有 Column Reverse 值的 Flex Direction 屬性

要在容器中將彈性專案垂直排列（從下到上），我們使用column-reverse值。這將從容器的底部開始堆疊專案，並向上移動。以下示例顯示了這一點。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .flex-container {
         display: flex;
         flex-direction: column-reverse;
         background-color: lightgray;
         padding: 5px;
      }

      .flex-container div {
         text-align: center;
         color: white;
         padding: 35px;
         margin: 6px;

      }
      #item-1{
         background-color: #4CAF50;
      }
      #item-2{
         background-color: #9966ff;
      }
      #item-3{
         background-color: #ff3300;
      }
   </style>
</head>

<body>
   <h2>
      CSS flex-direction property
   </h2>
   <h4>
      flex-direction: column-reverse
   </h4>
   <div class="flex-container">
      <div id="item-1">
         Flex item 1
      </div>
      <div id="item-2">
         Flex item 2
      </div>
      <div id="item-3">
         Flex item 3
      </div>
   </div>
</body>

</html>

支援的瀏覽器

屬性
flex-direction	29.0	11.0	28.0	9.0	17.0

css_properties_reference.htm

列印頁面