align-items-Web响应式布局入门到实战

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

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

**什么是交叉轴？**
如果主轴为x轴，则交叉轴为y轴
如果主轴为y轴，则交叉轴为x轴

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

center示例:

```
<style>
	#div0{
    	width:400px;
        background-color: violet;
        display:flex;
        height:400px;
        align-items: center; /* 交叉轴对齐方式为居中 */
    }
	#div0 div{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
```

效果：

![](/uploads/images/20230421/044f675b8584999169e839bfee9946c1.png)

flex-end效果：

![](/uploads/images/20230421/011455ad22ee6b834115a8f4bdaadf97.png)

改变主轴为y轴，则x轴为交叉轴
示例：

```
<style>
	#div0{
		width:400px;
		background-color: violet;
		display:flex;
		height:400px;
		flex-direction: column; /* 子元素竖向排列，则x轴为交叉轴 */
		align-items: flex-end; /* 交叉轴对齐方式x轴居右显示 */
	}
	#div0 div{
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
</head>
<body>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
```

效果：

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

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

vue高级应用开发与构建

web前端面试完全指南

WebGL开发指南

uniapp快速入门与实战