无涯教程网

关注我们

Flexbox - flex-direction属性

Flexbox - flex-direction属性

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

用法-

链接：https://www.learnfk.comhttps://www.learnfk.com/css/flexbox-flex-direction.html

来源：LearnFk无涯教程网

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

此属性接受四个值-

row - 将集合的元素从左到右水平排列。
row-reverse - 从右到左水平排列集合的元素。
column - 从左到右垂直排列集合的元素。
column-reverse - 从右到左垂直排列集合的元素。

现在，无涯教程将通过一些示例来演示 direction 属性的用法。

Row (从左到右)

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

Row Direction.jpg

下面的示例演示将值 row 传递给 flex-direction 属性的输出。在这里，创建了六个不同颜色的框，它们的 flex-direction 值 row

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </style>
   
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>

它将产生以下输出-

无涯教程网

Row-reverse (从右到左)

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

下面的示例演示将行反向值传递给flex-direction属性的输出。在这里将创建六个具有不同颜色的框，它们的弹性方向值分别为row-reverse。

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </style>
   
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>

它将产生以下输出-

无涯教程网

Column (从上到下)

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

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

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </style>
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>

它将产生以下输出-

无涯教程网

Column-reverse (从下到上)

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

下面的示例演示将值column-reverse 传递给flex-direction属性的输出。在这里创建了六个具有不同颜色的框，其flex-direction值为column-reverse

<!doctype html>
<html lang="en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </style>
   
   <body>
      <div class="container">
         <div class="box box1">One</div>
         <div class="box box2">two</div>
         <div class="box box3">three</div>
         <div class="box box4">four</div>
         <div class="box box5">five</div>
         <div class="box box6">six</div>
      </div>
   </body>
</html>

它将产生以下输出-

无涯教程网

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

编译原理实战课 -〔宫文学〕

深度学习推荐系统实战 -〔王喆〕

手机摄影 -〔@随你们去〕

代码之丑 -〔郑晔〕

深入浅出分布式技术原理 -〔陈现麟〕

商业思维案例笔记 -〔曹雄峰〕

零基础学Python（2023版） -〔尹会生〕

Rust 语言从入门到实战 -〔唐刚〕

AI 应用实战课 -〔黄佳〕

好记忆不如烂笔头。留下您的足迹吧 :)