flex布局---容器内部，align-self属性

<template>
	<view class="father">
		<view class="son one">1</view>
		<view class="dauther two">2</view>
		<view class="son three">3</view>
		<view class="dauther four">4</view>
	</view>
</template>

<script></script>

<style>
	.father{
		display: flex;
		justify-content: space-between;
		
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		height: 50px;
		background-color: #5500ff;
		border-radius: 5px;
	}
	.one{
		
	}
	.two{
		
	}
	.three{
		
	}
	.four{
		
	}
	
</style>

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self:
 auto | flex-start | flex-end | center | baseline | stretch;

  .father{
		display: flex;
		justify-content: space-between;
		/* 容器东西底对齐 */
		align-items: flex-end;
	}
	.two{
		/* 第二个顶对齐 */
		align-self: flex-start;
	}

  .father{
		display: flex;
		justify-content: space-between;
		/* 容器东西顶对齐 */
		align-items: flex-start;
	}
	.two{
		/* 第二个底对齐 */
		align-self: flex-end;
	}

  .father{
		display: flex;
		justify-content: space-between;
		/* 容器东西顶对齐 */
		align-items: flex-start;
	}
	.two{
		/* 第二个居中对齐 */
		align-self: center;
	}

 .father{
		display: flex;
		justify-content: space-between;
		/* 容器东西顶对齐 */
		align-items: flex-start;
	}
	.two{
		/* 第二个居中对齐 */
		align-self: center;
	}

<style>
	.father{
		display: flex;
		justify-content: space-between;
		/* 容器东西顶对齐 */
		align-items: flex-start;
	}
	.son{
		width: 100px;
		height: 100px;
		background-color: #ff5500;
		border-radius: 5px;
	}
	.dauther{
		width: 50px;
		/* height: 50px; */
		background-color: #5500ff;
		border-radius: 5px;
	}
	.one{
		
	}
	.two{
		/* 第二个居中对齐 */
		align-self: stretch;
	}
	.three{
		
	}
	.four{
		
	}
</style>