display:flex挤压

display:flex是CSS的属性，用于设置元素的布局方式为弹性布局。当元素的容器设置了display:flex后，其子元素会按照一定的规则进行排列。

在引用中提到了一个大框，这个大框使用了display:flex属性，并且默认是横向排列。这个大框被分为两个部分，即两个div。按照默认的横向排列方式，这两个div会并排显示。

当发生挤压时，最外部的div没有加上flex属性。这意味着它的宽度不会随着其他元素的缩小而自动缩小。因此，当其他元素被挤压时，最外部的div仍然保持原来的宽度。

在引用中提到了另一个属性my-content，并设置了display:flex，flex-direction:column，和justify-content:space-between。这表示该容器的子元素将垂直排列，并且两端对齐，项目之间的间隔相等。此外，flex:1属性将子元素的宽度或高度设置为相等的比例，以填充可用空间。

如果你想了解更多关于flex属性的详细信息，可以参考引用中提供的博客链接。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [【我与bug那些事】CSS响应式布局--（解决 F12右侧打开控制台，往左挤压，出现的问题）](https://blog.csdn.net/weixin_43352901/article/details/108974533)[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_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]