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

最新推荐文章于 2023-02-26 12:28:01 发布

是西北呀

最新推荐文章于 2023-02-26 12:28:01 发布

阅读量1k

点赞数

分类专栏：前端布局文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45128912/article/details/125839552

版权

前端布局专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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>