flex布局盒子左右一边一个

要实现flex布局盒子左右一边一个，可以使用以下方法：

1. 给左边的盒子设置`flex: 1;`或者`width: 0;`来占据剩余空间并自动调整宽度。可以通过设置`overflow: hidden;`来隐藏溢出的内容。

2. 如果左边盒子的内容超过了剩余空间并被压缩，可以给内容设置`flex-shrink: 0;`来禁止被压缩。这样可以确保左边的内容不会被挤压。

这种布局适用于需要将左右两个盒子放在一行并且自适应宽度的情况，可以使用以上方法来实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [flex 布局 左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧](https://blog.csdn.net/Amnesiac666/article/details/123628056)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [详解flex实现左右布局中按钮溢出隐藏效果](https://download.csdn.net/download/weixin_38730129/12879538)[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^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]