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

用Flex布局实现图片固定宽120px、文字区域自适应的左右结构，父容器设display: flex，图片加width和flex-shrink: 0，文字容器设flex: 1并可选margin-left。

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

基础 HTML 结构
保持语义清晰，用 article 或 div 包裹图文：

zuojiankuohaophpcndiv class="media-item"youjiankuohaophpcn

  zuojiankuohaophpcnimg src="avatar.jpg" alt="头像" class="media-img"youjiankuohaophpcn

  zuojiankuohaophpcndiv class="media-body"youjiankuohaophpcn

    zuojiankuohaophpcnh3youjiankuohaophpcn标题内容zuojiankuohaophpcn/h3youjiankuohaophpcn

    zuojiankuohaophpcnpyoujiankuohaophpcn这里是描述文字，会自动撑开并填满右侧空间。zuojiankuohaophpcn/pyoujiankuohaophpcn

  zuojiankuohaophpcn/divyoujiankuohaophpcn

zuojiankuohaophpcn/divyoujiankuohaophpcn


CSS 关键样式
只需几行 CSS 就能完成布局，无需计算或媒体查询：

							

								
								

									Build AI
									
为您的业务构建自己的AI应用程序。不需要任何技术技能。
								
								下载 
							
						

.media-item {

  display: flex;

  align-items: flex-start; /* 避免文字基线对齐导致错位 */

}

.media-img {

  width: 120px;

  height: 120px;

  flex-shrink: 0; /* 关键：防止图片被压缩（尤其在窄屏时） */

}

.media-body {

  flex: 1; /* 等价于 flex: 1 1 0% —— 自适应填充剩余空间 */

  margin-left: 12px; /* 可选：图文间距 */

}


常见问题与优化点

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


为什么不用 float 或 grid？
Flex 更轻量、兼容性好（IE10+）、逻辑直白；Grid 在此场景略显冗余，而 float 已过时且需清除浮动，易出错。
立即学习“前端免费学习笔记（深入）”；