如何在CSS中使用Flexbox布局制作图文混排并通过对齐属性调整图片文字位置

在网页前端开发中，图文混排是内容展示类页面的核心需求之一，传统的浮动布局实现图文混排需要处理清除浮动等额外逻辑，而Flexbox布局可以让图文混排的实现更简洁，还能灵活调整图片和文字的对齐效果。align-items作为Flexbox的核心对齐属性，能够直接控制交叉轴上子元素的对齐方式，非常适合调整图文混排时图片和文字的垂直对齐效果。

Flexbox图文混排基础实现

要实现图文混排，首先需要给包裹图片和文字的容器设置display: flex，让容器成为Flex容器，内部的图片和文字会自动成为Flex子元素，默认沿主轴水平排列，自然形成图文并排的效果。

基础的HTML结构如下：

<div class="article-card">
  <img src="https://picsum.photos/200/150?random=2" alt="示例图片" class="card-img">
  <div class="card-content">
    <h3>Flexbox图文混排示例标题</h3>
    <p>这是一段和图片搭配展示的文本内容，Flexbox布局可以让图片和文字按照我们设定的规则排列，不需要复杂的浮动计算。</p>
  </div>
</div>

对应的基础CSS代码如下：

.article-card {
  display: flex;
  /* 设置主轴为水平方向，子元素从左到右排列 */
  flex-direction: row;
  /* 子元素之间的间距 */
  gap: 16px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
}

.card-img {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.card-content {
  flex: 1;
}

.card-content h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
}

.card-content p {
  margin: 0;
  line-height: 1.6;
  color: #666;
}

align-items属性对图文对齐的影响

align-items属性用于设置Flex容器中子元素在交叉轴（默认是垂直方向）上的对齐方式，不同的取值会让图片和文字产生不同的垂直对齐效果，常用的取值有以下几个：

• stretch：默认值，子元素会被拉伸到填满交叉轴的空间，如果图片和文字的高度不一致，会被拉伸到相同高度
• flex-start：子元素在交叉轴的起点对齐，也就是顶部对齐
• flex-end：子元素在交叉轴的终点对齐，也就是底部对齐
• center：子元素在交叉轴的中点对齐，也就是垂直居中对齐
• baseline：子元素按照它们的第一行文字的基线对齐

不同取值的效果演示

我们可以在基础容器的CSS中添加align-items属性，观察不同取值的效果：

1. align-items: flex-start（顶部对齐）

.article-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
  /* 设置交叉轴顶部对齐 */
  align-items: flex-start;
}

此时图片和文字容器的顶部会保持对齐，如果文字内容较多，文字会向下延伸，图片顶部和文字标题顶部对齐。

2. align-items: center（垂直居中对齐）

.article-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
  /* 设置交叉轴垂直居中对齐 */
  align-items: center;
}

此时图片的中心会和文字容器的中心在垂直方向对齐，适合图片和文字高度差异不大的场景，视觉上更协调。

3. align-items: flex-end（底部对齐）

.article-card {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  max-width: 800px;
  margin: 20px auto;
  /* 设置交叉轴底部对齐 */
  align-items: flex-end;
}

此时图片的底部会和文字容器的底部对齐，如果文字内容较少，文字会向上排列，和图片底部保持平齐。

响应式适配处理

在移动端场景下，屏幕宽度不足，水平排列的图文混排会影响阅读体验，我们可以通过媒体查询调整布局，在小屏幕下让图文垂直排列：

/* 屏幕宽度小于768px时的适配 */
@media (max-width: 768px) {
  .article-card {
    /* 切换主轴为垂直方向，图文垂直排列 */
    flex-direction: column;
    align-items: flex-start;
  }

  .card-img {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
}

这样在移动端会自动切换为图文上下排列的布局，保证不同设备下的展示效果。

注意事项

• 如果Flex子元素设置了固定高度，align-items的stretch取值会失效，因为子元素已经有固定高度不会被拉伸
• 如果只需要调整单个子元素的对齐方式，可以使用align-self属性单独设置，不需要修改整个容器的align-items
• 图片建议设置object-fit: cover避免图片变形，同时可以根据需求调整图片的固定尺寸

CSSFlexboxalign-items图文混排布局修改时间：2026-06-10 09:18:24