flex 布局左图右文

在使用flex布局时，可以通过将左边的图片和右边的文字放在同一个父容器内，并设置父容器的display为flex，然后使用flex属性来控制左右元素的宽度和高度。具体地，可以使用下面的代码来实现左图右文的布局：

.new_item {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.img {
  flex: 0 0 15%; /* 左边图片的宽度占父容器的15% */
  height: 80px;
}

.caption {
  flex: 1; /* 右边文字自适应宽度 */
  padding: 0 30px; /* 设置文字区域的内边距 */
}

在上述代码中，设置了左边图片的宽度为父容器宽度的15%，右边文字区域自适应宽度。通过这种方式，可以实现左图右文的布局。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [flex 布局](https://blog.csdn.net/weixin_28782221/article/details/117976076)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [flex布局实现左边图片与右边文字同等高](https://blog.csdn.net/qq_42551474/article/details/108776407)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [css的左图右文布局且保持图片宽高比例固定放缩](https://blog.csdn.net/Hill_Kinsham/article/details/82082567)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]