Flex实战三（容器属性flex-direction）

最新推荐文章于 2023-03-21 21:08:39 发布

king.sheng

最新推荐文章于 2023-03-21 21:08:39 发布

阅读量163

点赞数

分类专栏： Flex

本文链接：https://blog.csdn.net/shengxiaohua1/article/details/104880963

版权

Flex 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

.box{flex-direction: row | row-reverse | column | column-reverse;}

flex-direction属性决定主轴的方向：左中右、上中下
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>flex-direction属性</title>
</head>

<body>
   <style>
     .myflex{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   flex-direction: row;
	 }
	 
	 .myflex2{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   flex-direction: row-reverse
	 }
	 
	 .myflex3{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   flex-direction: column
	 }
	 
	 .myflex4{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   flex-direction: column-reverse
	 }
	 
	 .flex-item{
	   background-color: #F93;
	   width: 100px;
	   height: 100px;
	   margin: 10px;
	 }
   </style>
   <p>flex-direction： row</p>
   <div class="myflex">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>flex-direction： row-reverse</p>
   <div class="myflex2">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <style>
   .myflex11{
	   display: flex;
	   display: -webkit-flex;
	   width: 400px;
	   height: 200px;
	   background: #CCC;
	   /* flex-direction: row-reverse */
	   direction: rtl;
	 }
	</style>
    <p>direction：rtl从右到左排列,和flex-direction: row-reverse同样的功能，唯一区别就是数值在右边</p>
   <div class="myflex11">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>flex-direction：column</p>
   <div class="myflex3">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
   
   <p>flex-direction： column-reverse</p>
   <div class="myflex4">
     <div class="flex-item">01</div>
	 <div class="flex-item">02</div>
	 <div class="flex-item">03</div>
   </div>
</body>
</html>

king.sheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex实战三（容器属性flex-direction）

.box{flex-direction: row | row-reverse | column | column-reverse;}flex-direction属性决定主轴的方向：左中右、上中下row（默认值）：主轴为水平方向，起点在左端row-reverse：主轴为水平方向，起点在右端column：主轴为垂直方向，起点在上沿column-reverse：主轴为垂直方向，起点在下沿...
复制链接

扫一扫