前端知识之flex布局

使用:在父组件定义一个container容器,子容器就是布局的对象

html

<view class="container">
		<view class="t" style="font-size: 200upx;">A</view>
		<view class="t">B</view>
		<view class="t">C</view>
	</view>

css

.container{
    
    
		display: flex;
		/* flex-direction设置内部元素的排列方向 */
		/*
		row
		row-reverse
		column
		column
		column-reverse
		*/
	   flex-direction:row;
	   
	   /* flex-warp 使容器内元素换行 */
	   /*
	   nowarp 默认的
	   warp  换行
	   warp-reserve 翻转换行
	   */
	   flex-wrap: wrap;
	   
	   
	   /* justify-content 设置元素在主轴上的对齐方式 */
	   /* 
		flex-first  默认的
		flex-end   右对齐
		flex-center 居中
		space-between 元素两边均匀填充
		space-around 元素四周均匀填充
		*/
	   justify-content: space-around;
		
		/* align-items 纵轴方向处理空白部分 */
		/* 
		 stretch 默认 当元素高度没有设置,和容器高度一样
		 flex-start  向上对齐
		 flex-end 向下对齐
		 center 居中对齐
		 baseline 按照文字大小,根据文字的最低的位置对齐
		 */
		
		align-items: baseline;
		
		height: 800upx;
		background-color: pink;
	}
	
	.t{
    
    
		width: 100upx;
		/* height: 100upx; */
		background-color: red;
	}