Flexbox 布局中 align-items 属性的用途及示例-JavaScript中文网-JavaScript教程资源分享门户

Flexbox布局是当前前端界最热门的布局方式之一，可以方便地构建出各种复杂页面。而在Flexbox布局中，align-items属性扮演着十分重要的角色。

align-items是什么？

align-items属性用于设置flex容器中的项目沿着交叉轴（与主轴垂直的轴线）的对齐方式。可以理解成是决定项目在交叉轴上位置的属性。

align-items有五个可选值：

flex-start：项目向交叉轴开始位置对齐。
flex-end：项目向交叉轴结束位置对齐。
center：项目在交叉轴居中对齐。
baseline：项目的基线对齐。
stretch：默认值，如果项目未设置高度或设为auto，则将占满整个容器的高度。

align-items的应用场景

align-items常常用于控制flex容器中的项目沿着交叉轴的对齐方式，因此在很多情况下，它可以用来解决一些常见的页面布局问题。

垂直居中元素

在传统布局中，垂直居中元素需要使用表格布局或是根据父元素高度手动计算margin来实现。但是，在Flexbox布局中，只需要设置父元素的 align-items属性为center，即可实现垂直居中元素的效果。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: center;
  height: 200px;
}

.item {
  width: 50px;
  height: 50px;
  background-color: #f5576c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

等高布局

在传统布局中，等高布局需要使用复杂的计算来实现。但是，在Flexbox布局中，只需要设置父元素的align-items属性为stretch，即可让子元素沿着交叉轴高度平分。

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: stretch;
  height: 200px;
}

.item {
  width: 100px;
  background-color: #f5576c;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

总结

align-items属性是Flexbox布局中一个非常有用的属性，可以实现交叉轴方向上的控制，常常用于实现常见页面布局问题，如垂直居中、等高布局等。对于想要深入学习Flexbox布局的前端开发者来说，align-items属性是一个不可缺少的知识点。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535d3097d4982a6ebd7337a