CSS - flex-direction 属性



描述

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

可能的值

  • row (行)

  • row-reverse (反向行)

  • column (列)

  • column-reverse (反向列)

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

应用于

所有 HTML 元素。

DOM 语法

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

Flex Direction Row (行方向)

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

让我们来看一个例子:

Open Compiler
<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 属性,它将弹性项目水平排列,但顺序相反。

让我们来看一个例子:

Open Compiler
<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 值,可以将弹性项目垂直排列成一列,从上到下。

让我们来看一个例子:

Open Compiler
<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 (反向列方向)

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

Open Compiler
<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>
广告