CSS flex-direction 属性-之路教程

←CSS flex-basis 属性

CSS flex-flow 属性→

CSS flex-direction 属性

flex-direction 属性指定弹性容器的主轴并设置弹性项目（item）（item）的顺序。

它是 CSS3 属性之一。

此属性是弹性框布局模块的一部分。

可以显示 Flex 项目（item）（item）：

水平从左到右 (flex-direction:row) 或者从右到左 (flex-direction:row-reverse)
垂直从上到下（flex-direction:column）或者从下到上（flex-direction）

如果没有弹性项目（item）（item），则 flex-direction 属性无效。

初始值	row
应用于	柔性容器。
继承	无效
可动画的	无效
版本	CSS3.
DOM 语法	object.style.flexDirection =“row-reverse”;

语法

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

flex-direction 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

在以下示例中，项目（item）（item）从右到左水平显示为一行。

具有“row-reverse”值的 flex-direction 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row-reverse;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

具有“row”值的 flex-direction 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: row;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction 属性示例</h2>
    <div class="example">
      <div style="background-color: #8ebf42;">A</div>
      <div style="background-color: #1c87c9;">B</div>
      <div style="background-color: #eeeeee;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

具有“列”值的 flex-direction 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 350px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column;
      }
      .example div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction 属性示例</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

具有“column-reverse”值的 flex-direction 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        width: 350px;
        height: 340px;
        border: 1px solid #c3c3c3;
        display: flex;
        flex-direction: column-reverse;
      }
      .example div {
        width: 60px;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <h2>Flex-direction 属性示例</h2>
    <div class="example">
      <div style="background-color: #DC143C;">A</div>
      <div style="background-color: #0000CD;">B</div>
      <div style="background-color: #9ACD32;">C</div>
      <div style="background-color: #666666;">F</div>
    </div>
  </body>
</html>

CSS flex-direction 属性值说明

值	描述
row	项目（item）（item）作为一行水平显示。这是此属性的默认值。
row-reverse	项目（item）（item）以相反的顺序（从右到左）以行显示。
column	项目（item）（item）从上到下垂直显示。
column-reverse	项目（item）（item）从底部到顶部垂直显示。
initial	该属性使用其默认值。
inherit	属性从其父母元素继承值。

日期：2020-06-02 22:14:29 来源：oir作者：oir