css三行元素对齐教程

CSS三行元素对齐是一种常见的布局方式，在许多网页设计中都会用到。下面我们来详细介绍一下这种对齐方式。

.parent {
  display: flex;
  justify-content: space-between;
  align-items: center;
} 

第一行代码中，我们给父元素添加了display: flex;的属性，这样一来父元素就变成了一个弹性盒子，可以对子元素进行灵活的布局。第二行代码中，我们使用justify-content: space-between;的属性，让子元素之间的距离尽量大，并且让第一个子元素靠左，让最后一个子元素靠右。第三行代码中，我们使用align-items: center;的属性，让子元素在垂直方向上居中对齐。

这样一来，就可以快速地实现三个元素的对齐布局了。需要注意的是，这种对齐方式需要在父元素上添加CSS代码，而不是在每个子元素上添加代码。