uni-APP flex 整理布局属性

清疚 2022-10-05 04:52 328阅读 0赞

<template>
    	<view>
    		<view  class="contanis">
    			 <view  class="green">
    				 <text>A</text>
    			 </view>
    			 <view  class="red">
    			 	 <text>B</text>			 
    			 </view>
    			 <view  class="wirte">
    			 		 <text>C</text>		 
    			 </view>
    			 <view  class="blue">
    			 		 <text>D</text>		 
    			 </view>
    			 <view  class="black">
    			 		 <text>E</text>		 
    			 </view>
    			 <view  class="gray">
    			 		 <text>F</text>		 
    			 </view>
    			 <view  class="orange">
    			 		 <text>G</text>		 
    			 </view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				
    			}
    		},
    		methods: { 
    			
    		}
    	}
    </script>
    
    <style lang="scss" scoped>
       
       .contanis{ 
    	  // 定义flex容器
       	display: flex;
    	////设置元素的排列方向
    	// row  从左到右
    	//row-server  从右到左
    	//column  从上到下
    	//column-server  从下到上
    	// flex-direction: column;
    	
    	//是容器里的元素换行
    	//wrap  换行
    	//nowrap  不换行
    	flex-wrap: wrap;
    	
    	//justify-content: ;设置元素在主轴上的对齐方式
    	//flex-start  (默认)左对齐
    	//flex-end  右对齐
    	//center  居中对齐
    	//space-around 元素两边平均等分空白间隙部分，最左或最右和元素之间的距离是1:2
    	//space-between  两端对齐 ，元素之间平均等分空白间隙部分。
    	//space-evenly  
    	justify-content:  center;
    	//align-items 设置容器中元素在交叉轴上的对齐方式
    	//stretch  (默认) 当元素的高度没有设置，则元素的高度会拉伸至元素的高度一致
    	//flex-start  在交叉轴上向起点位置(向上/向右)对齐，
    	//flex-end 在交叉轴上向结束位置(向上/向右)对齐
    	//center  居中对齐
    	//baseline  保证元素的文字在同一文字上
    	align-items: center;
    	
    	//当轴线超过一条时，flex容器可以把多条轴线视为元素对待，可以进行对齐。
    	// center ：居中
    	//flex-start  向左对齐
    	//flex-end   向右对齐
    	//stretch  当width没有设置时，轴线被拉伸
    	//space-between: 两端对齐，元素之间的空白被等比切分
    	// space-around: 轴线两边的空白被对比切分
    	align-content: stretch;
    	
    	// order  用于设置flex容器内部的容器的每个元素的排列方式，
    	// 默认是0,排序规则,由小变大
    	//flex-grow  用于设置元素的放大比例，默认为0
    	             // 如果为0,不放大
       //flex-shrink  用于定义属性的缩放比例，默认为1
         //设置0 的时候，不进行缩放
       //flex-basis   用于设置元素固定或自动空间的占比 （如：flex-basis:100upx）
      
      
       //align-self： 重写容器中元素在交叉轴上的对齐方式
    	//stretch  (默认) 当元素的高度没有设置，则元素的高度会拉伸至元素的高度一致
    	//flex-start  在交叉轴上向起点位置(向上/向右)对齐，
    	//flex-end 在交叉轴上向结束位置(向上/向右)对齐
    	//center  居中对齐
    	//baseline  保证元素的文字在同一文字上
       
    	 
    	 height: 900upx;
    	 background-color: #007AFF;
    	 text-align: center; 
    	 
    	  .green{ 
    		   width: 70px;
    		   height: 70px;
    		  background-color: green;
    		 //margin: 10px;
    		   line-height:70px ;
    		   color: #FFFFFF;
    		   // order:2;
    		   // flex-grow: 1;
    		   flex-shrink: 1;
    		   flex-basis: 200px;
    		   
    	  }
    	 .red{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: red;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #FFFFFF;
    			    // order:1;
    				 // flex-grow: 0;
    				  flex-shrink: 0;
    				  align-self:flex-start;
    	 }
    	 .wirte{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: #FFFFFF;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #000;
    			   // order:4;
    			   // flex-grow: 3;
    			   		   flex-shrink: 1;
    	 }
    	 .blue{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: #4CD964;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #FFFFFF;
    			   // order: 5;
    			    flex-shrink: 2;
    	 }
    	 .black{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: black;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #FFFFFF;
    			    flex-shrink: 0;
    				  align-self:flex-end;
    	 }
    	 .gray{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: gray;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #FFFFFF;
    	 }
    	 .orange{ 
    	 		   width: 70px;
    	 		   height: 70px;
    	 		  background-color: #FF6600;
    	 		 //margin: 10px;
    	 		   line-height:70px ;
    	 		   color: #FFFFFF;
    			   align-self:center;
    			   flex-shrink: 0;
    	 }
    	  
    	
       }
       
     
    </style>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221005/3367c2f6172644d387915624449ac9f0.png