用Flex布局实现图片固定宽120px、文字区域自适应的左右结构，父容器设display: flex，图片加width和flex-shrink: 0，文字容器设flex: 1并可选margin-left。
<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 flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10246" title="HTML Text Extract"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10246" title="HTML Text Extract">HTML Text Extract</a>
<p>从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p>
</div>
<a href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</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>
