justify-content-Web响应式布局入门到实战

当前位置:　首页>> 技术小册>> Web响应式布局入门到实战

justify-content作用： 用于设置子元素在主轴的对齐方式

作用： 设置每个flex元素在交叉轴上的默认对齐方式

**什么是主轴？**
如果是子元素水平排列，则x轴为主轴
如果子元素竖向排列，则y轴为主轴

**总结：**
判断主轴和交叉轴的依据是看子元素是水平排列还是竖向排列。
判断的顺序为：子元素的排列方向 -- 主轴 -- 交叉轴

flex-end示例：

![](/uploads/images/20230421/a3cd71731874e9fddbfcb94d8f333291.png)

效果：

![](/uploads/images/20230421/0952d650197ae6ef6475a28e6dcd7ee9.png)

center示例：

```
<style>
	#div0{
		width:380px;
		background-color: violet;
		display:flex;
		flex-flow: row wrap;
		justify-content: center;
	}
	#div0 div{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
```

效果：

![](/uploads/images/20230421/8d76e07656fda295422b86f644e1c19e.png)

space-between示例：

```
<style>
	#div0{
		width:380px;
		background-color: violet;
		display:flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	#div0 div{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
```
	
![](/uploads/images/20230421/329d6d7ab838a67e0c872884a5ec0ce6.png)

space-around示例：

![](/uploads/images/20230421/d1bc828602e0eb1b50fa0b4c33f21595.png)

该分类下的相关小册推荐：

vue高级应用开发与构建

WebGL开发指南

web前端面试完全指南

uniapp快速入门与实战