Flexbox-对齐项目

Flexbox是CSS3的一种新的布局方式。它可以使各种尺寸的元素自适应窗口大小的变化，同时使元素居中、对齐等操作变得更加简便。

在Flexbox中，对齐项目是一个重要的功能，可以实现水平居中、垂直居中、底部对齐、顶部对齐等布局效果，同时也可实现文字和图片在水平和垂直方向上的对齐。

以下是使用Flexbox进行对齐项目的示例：

<div class="container">
  <div class="box">
    文字
  </div>
  <div class="box">
    <img src="image.png" alt="image">
  </div>
</div>

.container {
  display: flex; /* 设置为flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-wrap: wrap; /* 换行 */
}

.box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  text-align: center;
  padding: 20px;
  font-size: 18px;
  margin: 10px;
}

在上述代码中，我们使用了以下Flexbox属性：

• display: flex; 将容器设置为flexbox布局。
• justify-content: center; 可以实现水平居中。
• align-items: center; 可以实现垂直居中。
• flex-wrap: wrap; 配合上面的两个属性可以使元素自适应宽度并换行。

在.box中，我们设置了宽度、高度、边框、文字居中、内边距等样式，以及margin实现元素之间的距离。

以上代码可以实现两个元素的水平和垂直居中对齐，同时也能自适应窗口大小并换行。

总结一下，使用Flexbox布局可以非常方便快捷地实现对齐项目的布局效果，灵活实用。