cssflex布局实现图文左右布局怎么写_图片固定宽度文字flex自适应

<p>用 Flex 布局实现“图片固定宽度 + 文字区域自适应”左右结构，核心是给图片设固定宽（如 <strong>120px</strong>），文字容器设 <strong>flex: 1</strong> 占满剩余空间，父容器启用 <strong>display: flex</strong>。</p>

<H3>基础 HTML 结构</H3>
<p>保持语义清晰，用 <strong>article</strong> 或 <strong>div</strong> 包裹图文：</p>
<font color="#666">
<div class="media-item"><br>
  <img src="avatar.jpg" alt="头像" class="media-img"><br>
  <div class="media-body"><br>
    <h3>标题内容</h3><br>
    <p>这里是描述文字，会自动撑开并填满右侧空间。</p><br>
  </div><br>
</div>
</font>

<H3>CSS 关键样式</H3>
<p>只需几行 CSS 就能完成布局，无需计算或媒体查询：</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2376">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/176248569259204.png" alt="移乐AI">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2376">移乐AI</a>
                            <p>AI一键生成、处理各种图片</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="移乐AI">
                                <span>211</span>
                            </div>
                        </div>
                        <a href="/ai/2376" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="移乐AI">
                        </a>
                    </div>
                
<font color="#666">
.media-item {<br>
  display: flex;<br>
  align-items: flex-start; /* 避免文字基线对齐导致错位 */<br>
}<br>
.media-img {<br>
  width: 120px;<br>
  height: 120px;<br>
  flex-shrink: 0; /* 关键：防止图片被压缩（尤其在窄屏时） */<br>
}<br>
.media-body {<br>
  flex: 1; /* 等价于 flex: 1 1 0% —— 自适应填充剩余空间 */<br>
  margin-left: 12px; /* 可选：图文间距 */<br>
}
</font>

<H3>常见问题与优化点</H3>
<ul>
  <li><strong>图片变形？</strong> 加 <code>object-fit: cover</code> 或 <code>contain</code> 控制裁剪/缩放方式</li>
  <li><strong>小屏幕文字换行异常？</strong> 给 <code>.media-body</code> 加 <code>min-width: 0</code>，防止 flex 容器内长单词/URL 撑破布局</li>
  <li><strong>想让文字垂直居中？</strong> 把 <code>.media-item</code> 的 <code>align-items</code> 改成 <code>center</code>，但注意 <code>h3</code> 和 <code>p</code> 行高可能影响视觉效果</li>
  <li><strong>需要响应式调整图片宽度？</strong> 可用 <code>@media</code> 修改 <code>.media-img</code> 的 width，比如移动端设为 <code>80px</code></li>
</ul>

<H3>为什么不用 float 或 grid？</H3>
<p>Flex 更轻量、兼容性好（IE10+）、逻辑直白；Grid 在此场景略显冗余，而 float 已过时且需清除浮动，易出错。</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>