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

下面以一个简单的表单为例 效果图如下 分别为左、中和右
《css实现盒子内的元素左对齐、居中对齐和右对齐效果》

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

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;
	}
}
    原文作者:不争亦不屑
    原文地址: https://blog.csdn.net/weixin_40292154/article/details/115213481
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞