display: flex宽度
时间: 2023-09-03 17:11:47 浏览: 46
当父元素设置display:flex之后,子元素的宽度会挤压。这是因为默认情况下,子元素会自动启用收缩功能(flex-shrink: 1),导致左边的子元素会挤掉右边子元素的一部分。为了解决这个问题,可以给子元素添加flex-shrink: 0;的样式,这样子元素的宽度就不会被挤压了。另外,还可以将子元素的flex属性设置为flex: 0 0 auto;,然后再设置子元素的具体宽度,这样也可以解决子元素宽度问题。总结起来,解决display: flex宽度问题的方法有四种。 [1 [2 [3<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [在父元素设置了display:flex之后子元素宽度失常问题](https://blog.csdn.net/qq_43358160/article/details/115897685)[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* *3* [css display:flex 弹性布局 子标签设置宽度无效的问题](https://blog.csdn.net/qq_35181466/article/details/122923411)[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 ]