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/2318">                             <img src="https://img.php.cn/upload/ai_manual/001/246/273/175851125796130.png" alt=" 星绘 ">                         </a>                         <div class="aritcle_card_info">                             <a href="/ai/2318"> 星绘 </a>                             <p> 豆包旗下 AI 写真、P 图、换装和视频生成 </p>                             <div class="">                                 <img src="/static/images/card_xiazai.png" alt=" 星绘 ">                                 <span>404</span>                             </div>                         </div>                         <a href="/ai/2318" class="aritcle_card_btn">                             <span> 查看详情 </span>                             <img src="/static/images/cardxiayige-3.png" alt=" 星绘 ">                         </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>