原文地址:CSS Flex 弹性布局使用 | Stars-One的杂货小窝

前端钻研不深,本文只是稍微记录一下关于Flex布局的知识,讲得不深,需要深入了解学习的可以参考其他大佬的博客

重点记录

通过display:flex即可将div设置为flex布局

flex-direction是关于布局排列的方向,默认为row,flex-direction: column可以将flex布局纵向排列

flex布局可以通过align-item和justify-content设置元素对齐方式

默认flex布局是横向排列,align-item是对于y轴方向的对齐方式,justify-content是对于x轴的对齐方式

如果flex布局是纵向排列,则align-item是对于x轴方向的对齐方式,justify-content是对于y轴的对齐方式,与上面的相反

justify-content使用space-between即可让元素实现左右对齐的效果,使用space-around可以达到同样的效果,两者的不同为:space-around会在左右对齐后,会将间距进行平分且分给元素

flex:1 1 0% 自动占满

PS: 由于使用的是Uni-app开发,下面中的div是使用view标签

居中

以下都是横向排列的代码,关键属性为align-item和justify-content

水平居中

	内容
	内容1

垂直居中

	内容

水平垂直居中

	内容

左右对齐

	内容
	内容1
	内容
	内容1

上下对齐

	内容
	内容

自己稍微封装一下常用的样式:

.match_parent {
	flex: 1 1 0%;
}

.flex_left_right {
	display: flex;
	justify-content: space-between;
}

.flex {
	display: flex
}

.flex-center{
	display: flex;
	align-items: center;
}