图文混排对齐困难怎么办？使用flex控制主轴与交叉轴轻松解决

在前端页面开发中，图文混排是非常常见的布局场景，比如商品卡片、文章列表、用户信息展示等模块都需要同时展示图片和文字内容。很多开发者习惯用浮动或者定位来实现图文排列，但当遇到多行文字和图片顶部对齐、整体垂直居中、均匀分布等需求时，往往需要写很多额外的样式来调整，还容易出现不同屏幕尺寸下对齐错乱的问题。flex布局的出现很好地解决了这类布局难题，只需要理解主轴和交叉轴的特性，就能快速实现各种图文对齐效果。

flex布局核心概念：主轴与交叉轴

flex布局的全称是弹性盒子布局，当给一个容器设置display: flex属性后，这个容器就会变成flex容器，它的所有直接子元素都会变成flex项目。flex布局中有两个核心的轴概念，所有对齐和排列规则都是围绕这两个轴展开的。

主轴

主轴是flex项目排列的主要方向，默认情况下主轴是水平方向，从左到右排列。我们可以通过flex-direction属性来修改主轴的方向，可选值有：

• row：默认值，主轴为水平方向，起点在左端
• row-reverse：主轴为水平方向，起点在右端
• column：主轴为垂直方向，起点在上沿
• column-reverse：主轴为垂直方向，起点在下沿

交叉轴

交叉轴是和主轴垂直的方向，当主轴是水平方向时，交叉轴就是垂直方向；当主轴是垂直方向时，交叉轴就是水平方向。交叉轴的作用是控制flex项目在垂直于排列方向上的对齐方式。

图文混排常见对齐场景实现

下面我们通过几个常见的图文混排场景，来看如何通过控制主轴和交叉轴的相关属性实现对齐效果。

场景一：图片和单行文字水平居中对齐

这是最常见的图文混排场景，比如导航栏的图标加文字、按钮内的图标加文字，需要图片和文字在垂直方向居中对齐。

实现思路：将容器设置为flex容器，主轴默认水平排列，然后通过交叉轴的对齐属性align-items设置为center，就可以让flex项目在交叉轴方向居中对齐，也就是图片和文字垂直居中。

/* 容器样式 */
.img-text-wrap {
    display: flex;
    /* 交叉轴方向居中对齐，实现图片和文字垂直居中 */
    align-items: center;
    /* 可选：设置项目之间的间距 */
    gap: 8px;
    padding: 10px;
    border: 1px solid #eee;
}
/* 图片样式 */
.img-text-wrap img {
    width: 24px;
    height: 24px;
}

<div class="img-text-wrap">
    <img src="https://ipipp.com/icon.png" alt="示例图标">
    <span>首页</span>
</div>

场景二：图片和多行文字顶部对齐

比如文章列表的封面加标题摘要，需要图片和文字块的顶部保持对齐，不管文字有多少行，图片始终在顶部位置。

实现思路：同样设置容器为flex容器，主轴水平排列，将交叉轴的对齐属性align-items设置为flex-start，flex项目就会在交叉轴的起点对齐，也就是顶部对齐。

/* 容器样式 */
.article-item {
    display: flex;
    /* 交叉轴起点对齐，实现图片和文字块顶部对齐 */
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border-bottom: 1px solid #f0f0f0;
}
/* 封面图样式 */
.article-item .cover {
    width: 120px;
    height: 80px;
    border-radius: 4px;
    flex-shrink: 0; /* 防止图片被压缩 */
}
/* 文字区域样式 */
.article-item .text-area {
    flex: 1; /* 文字区域占剩余空间 */
}
.article-item .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 6px;
}
.article-item .summary {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

<div class="article-item">
    <img class="cover" src="https://ipipp.com/cover.jpg" alt="文章封面">
    <div class="text-area">
        <div class="title">flex布局实战教程</div>
        <div class="summary">本文详细介绍flex布局的核心用法，帮助开发者快速掌握弹性布局的各种场景实现。</div>
    </div>
</div>

场景三：多图文等间距均匀分布

比如商品展示区的多列图文卡片，需要每个图文块均匀分布，并且整体在容器中居中。

实现思路：设置容器为flex容器，主轴水平排列，通过justify-content属性控制主轴方向的对齐方式，设置为space-around可以实现每个项目两侧的间隔相等，或者设置为space-between实现两端对齐，中间间隔相等。

/* 容器样式 */
.goods-list {
    display: flex;
    /* 主轴方向两端对齐，项目之间间隔相等 */
    justify-content: space-between;
    /* 换行排列，超出一行自动换行 */
    flex-wrap: wrap;
    padding: 15px;
    gap: 15px;
}
/* 单个商品项样式 */
.goods-item {
    /* 每个商品项占一定比例宽度，实现多列布局 */
    width: calc(25% - 12px);
    text-align: center;
}
.goods-item img {
    width: 100%;
    height: 160px;
    border-radius: 6px;
    margin-bottom: 8px;
}
.goods-item .name {
    font-size: 14px;
    color: #333;
}

<div class="goods-list">
    <div class="goods-item">
        <img src="https://ipipp.com/goods1.jpg" alt="商品1">
        <div class="name">商品名称1</div>
    </div>
    <div class="goods-item">
        <img src="https://ipipp.com/goods2.jpg" alt="商品2">
        <div class="name">商品名称2</div>
    </div>
    <div class="goods-item">
        <img src="https://ipipp.com/goods3.jpg" alt="商品3">
        <div class="name">商品名称3</div>
    </div>
    <div class="goods-item">
        <img src="https://ipipp.com/goods4.jpg" alt="商品4">
        <div class="name">商品名称4</div>
    </div>
</div>

常用flex对齐属性汇总

为了方便大家快速查询，下面整理了flex布局中和主轴、交叉轴对齐相关的常用属性：

注意事项

在使用flex布局做图文混排时，有几个点需要注意：

• 如果图片的宽度不固定，建议给图片设置flex-shrink: 0，防止图片在空间不足时被压缩变形
• 当flex项目需要换行时，要记得给容器设置flex-wrap: wrap，否则所有项目会强制在一行排列
• align-items是针对单行的对齐，当项目换行后，多行的对齐需要用align-content属性控制
• 如果需要兼容旧版本的浏览器，可以添加对应的浏览器前缀，比如-webkit-display: flex

通过上面的示例可以看出，只要掌握了flex布局主轴和交叉轴的基本规则，图文混排的对齐问题就可以非常轻松地解决，不需要再写大量的定位或者浮动相关样式，大大提升了布局开发的效率。

flex布局主轴交叉轴图文混排修改时间：2026-06-22 07:10:08