Flex布局中元素主轴上平均分布 多余的向左对齐

content:父元素
content-item: 子元素

主轴上子元素平均分布
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	  }
}

效果:

给父元素添加伪元素
.content:after {
	content: "";
	flex: auto;
}
.content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.service-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 80px;
		height: 80px;
	}
}

效果:

相关推荐

  1. flex主轴元素控制优先级

    2024-07-23 06:36:05       23 阅读
  2. flex布局flex:1相关知识

    2024-07-23 06:36:05       57 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-23 06:36:05       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-23 06:36:05       106 阅读
  3. 在Django里面运行非项目文件

    2024-07-23 06:36:05       87 阅读
  4. Python语言-面向对象

    2024-07-23 06:36:05       97 阅读

热门阅读

  1. 寻访安康茶韵,共筑乡村振兴

    2024-07-23 06:36:05       22 阅读
  2. 什么是服务器带宽

    2024-07-23 06:36:05       21 阅读
  3. 在VS IDE中搜索所有带有中文的字符串

    2024-07-23 06:36:05       27 阅读
  4. Python面试整理-字符串处理

    2024-07-23 06:36:05       18 阅读
  5. SQL中的函数

    2024-07-23 06:36:05       23 阅读
  6. Logback 配置文件加载步骤

    2024-07-23 06:36:05       22 阅读
  7. Ubuntu 20.04搭建OpenCV 4.5.0 & C++环境

    2024-07-23 06:36:05       19 阅读
  8. 定制Mojo模型的魔法:特征转换的艺术

    2024-07-23 06:36:05       27 阅读
  9. 自定义预测逻辑:Mojo模型的高级应用

    2024-07-23 06:36:05       25 阅读
  10. Mojo模型动态批处理:智能预测的终极武器

    2024-07-23 06:36:05       23 阅读