flex 属性 随记

flex 属性 随记

flex-direction : 设置元素的排列方向

• row : （默认）从左到右

• row-reverse： 从右到左

• column ：从上到下

• column-reverse : 从下到上

• 示例

  <view class="box1 box">
  	<view class="flex-box" v-for="index in 'box1'" :key = "index">
  		{{index}}
  	</view>		
  </view>
  

  

  答案就在下面：不过在看之前，你可以先想一下四个盒子分别使用哪一个flex-direction属性哦~

  .box1{
  	display: flex;
  	/* flex-direction: row; */
  }
  .box2{
  	display: flex;
  	flex-direction: column;
  }
  .box3{
  	display: flex;
  	flex-direction: row;
  }
  .box4{
  	display: flex;
  	flex-direction: column-reverse;
  }
  .flex-box{
  	width: 100upx;
  	height: 100upx;
  	border:1rpx solid #3F536E;
  }
  

---

flex-wrap：使容器内元素换行

• nowrap：不换行

• wrap：正常逻辑换行

• wrap-reverse : 反方向换行（取决于当下是根据哪个轴进行排列的，即flex-direction）

• 示例

• .box1{
  	display: flex;
  	/* flex-wrap: nowrap; */
  	/* flex-direction: row; */
  }
  .flex-box{
  	width: 300upx;
  	height: 300upx;
  	border:1rpx solid #3F536E;
  }
  

  

.box2{
	display: flex;
	/*flex-direction: row; */
	flex-wrap: wrap;
}
.box3{
	display: flex;
	/* flex-direction: row; */
	flex-wrap: wrap-reverse;
}

.box4{
	display: flex;
	flex-direction: row-reverse;	
	flex-wrap: wrap-reverse;
}
.box5{
	display: flex;
	flex-direction: column-reverse;	
	flex-wrap: wrap-reverse;
}

小应用：做古文排序改该怎么设置呢？

---

justify-content:设置元素在主轴上的对齐方式

• flex-start:(默认)：向左／上对齐

• flex-end：向右／下对齐

• 示例

• <view class="colorBox1 columnGroup" v-if="showColumn">
      <view class="green column">
  
      </view>
      <view class="yellow column">
  
      </view>	
      <view class="red column">
  
      </view>	
  </view>
  <view class="colorBox2 columnGroup" v-if="showColumn">
      <view class="green column">
  
      </view>
      <view class="yellow column">
  
      </view>	
      <view class="red column">
  
      </view>	
  </view>
  <view class="colorBox3 columnGroup" v-if="showColumn">
      <view class="green column">
  
      </view>
      <view class="yellow column">
  
      </view>	
      <view class="red column">
  
      </view>	
  </view>
  

  
  

  .colorBox1{
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
  }
  .colorBox2{
  	display: flex;
  	flex-direction: column;
  	/* justify-content: flex-start; */
  }
  .colorBox３{
  	display: flex;
  	flex-direction: column;
  	justify-content: center;
  }
  

  • space-around:各个元素之间间隔相同距离，可以理解为不合并的margin

  • space-between:保持俩边（左右/上下）对齐,每俩个元素之间的距离一致

  • 示例：

  .colorBox1{
  	display: flex;
  	flex-direction: column;
  	justify-content: space-around;
  }
  .colorBox2{
  	display: flex;
  	flex-direction: column;
  	justify-content: space-between;
  }
  

---

align-items : 设置元素在交叉轴上的对齐方式

• flex-start : 向起点对齐

• flex-end：向终点对齐

• center：对齐中间线

• 示例

• 	<view class="border-box box1">
  			<view class="yellow color-column">
  				bo
  			</view>
  			<view class="green color-column">
  				x
  			</view>
  			<view class="red color-column">
  				1
  			</view>
  		</view>
  		<view class="border-box box2">
  			<view class="yellow color-column">
  				bo
  			</view>
  			<view class="green color-column">
  				x
  			</view>
  			<view class="red color-column">
  				2
  			</view>
  		</view>
  		<view class="border-box box3">
  			<view class="yellow color-column">
  				bo
  			</view>
  			<view class="green color-column">
  				x
  			</view>
  			<view class="red color-column">
  				3
  			</view>
  		</view>
  

.box1{
	display: flex;
	align-items: flex-start;
}
.box2{
	display: flex;
	align-items: flex-end;
}
.box3{
	display: flex;
	align-items: center;
}

• stretch:(默认)：在没有设置高度的情况下，元素与父元素一样高

• 示例：没有设置高度时与flex-start的区别
  

• baseline：对齐文字

• 示例：与flex-start的区别

----

ailgn-content : 多轴线的对齐方式

• 与换行有关，当出现换行情况时，元素不只有一条轴线，而是一行一条
• center：居中
• flex-start：向左/上对齐
• flex-end : 向右/向上（注意排序方向还是正常逻辑–从左到右/从上到下，只是轴线在反方向而已）
• streth：当宽度/高度 没有设置的时候，轴线被自动拉伸
• space-between : 俩端对齐，俩行之间的距离相等
• space-around : 可以看做每条轴线设置了左右margin，且不合并

---

---

flex成员项的属性设置（单独设置）

order：flex的排序顺序是根据order从小到大沿着主轴进行排序，默认是 0

• 示例：（在设置情况下）

  

flex-grow：（在未铺满屏幕的情况下）控制元素的放大比例

• 示例：
  

flex-shrink : （在铺满的情况下）控制元素的缩小比例

• 示例：
  

flex-basic：设置元素固定的或自动空间的占比

• 类似于重新设置元素的宽度，当总宽度大于屏幕宽度，会根据每个元素设置的值进行等比例缩小；但是当不足以铺满屏幕时，并不会进行等比例放大

• 示例：

align-self ：重写align-items 属性，单独设置元素在交叉轴上的对齐方式

• 示例
  -

---

总结

• 资料来源：https://www.bilibili.com/video/BV1jy4y1B7pw?p=39

• 在学习uni-app的过程中的一个小知识点，之前一直想找机会学习，刚好就碰上了~

• 属性有点多，然后也没什么实战，其实多多少少有点混吧，目前来说

• 有些语术是自己总结的，可能有点理解错误，欢迎指正！

• 最后，很高兴能和看到这里的你一起加油学习啦！