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

打印页面