📜  Flexbox-Flex方向

📅  最后修改于: 2020-10-25 02:30:46             🧑  作者: Mango


flex-direction属性用于指定需要放置flex容器(flex-items)的元素的方向。

用法

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

此属性接受四个值-

  • -排列容器的水平从左到右的元素。

  • row- reverse-从右到左水平排列容器的元素。

  • -从左到右垂直排列容器的元素。

  • column- reverse-从右到左垂直排列容器的元素。

现在,我们将通过一些示例来说明direction属性的用法。

将此值传递给direction属性后,容器的元素从左到右水平排列,如下所示。

行Direction.jpg

下面的示例演示将值传递给flex-direction属性的结果。在这里,我们将使用flex-directionrow创建六个具有不同颜色的框。


   
   
      
One
two
three
four
five
six

它将产生以下结果-

反向行

将此值传递给direction属性后,容器的元素从右到左水平排列,如下所示。

行反向.jpg

下面的示例演示将行反向值传递给flex-direction属性的结果。在这里,我们创建了六个具有不同颜色的框,它们的flex-direction值为row-reverse


   
   
      
One
two
three
four
five
six

它将产生以下结果-

将此值传递给direction属性后,容器的元素从上到下垂直排列,如下所示。

列Direction.jpg

以下示例演示了将value列传递给flex-direction属性的结果。在这里,我们使用flex-direction value创建六个具有不同颜色的框。


   
      
One
two
three
four
five
six

它将产生以下结果-

列反转

将此值传递给direction属性后,容器的元素从下到上垂直排列,如下所示。

方向柱Reverse.jpg

下面的示例演示将值column-reverse传递给flex-direction属性的结果。在这里,我们使用flex-directioncolumn-reverse创建了六个具有不同颜色的框。


   
   
      
One
two
three
four
five
six

它将产生以下结果-