css实现盒子内的元素左对齐、居中对齐和右对齐效果

下面以一个简单的表单为例效果图如下分别为左、中和右css实现方式：外层盒子使用 flex 布局里面每一项左对齐 margin-right:auto; 居中对齐 margin-left:auto;margin-right:auto; 右对齐 margin-left:auto下面放一段实例代码仅供参考.formItem {display: flex;flex-direction: column;

繁花&遇见

14846人浏览 · 2021-03-25 17:14:03

繁花&遇见 · 2021-03-25 17:14:03 发布

下面以一个简单的表单为例效果图如下分别为左、中和右
在这里插入图片描述

在这里插入图片描述

css实现方式：

外层盒子使用 flex 布局
里面每一项左对齐 margin-right:auto; 居中对齐 margin-left:auto;margin-right:auto; 右对齐 margin-left:auto
下面放一段实例代码仅供参考

.formItem {
	display: flex;
	flex-direction: column;
	margin-right: 30rpx;

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		// margin-left: auto;
		margin-right: auto;
	}
}