display flex 宽度
时间: 2023-08-25 10:15:50 浏览: 46
在使用display:flex布局时,默认情况下子元素会根据父元素的宽度自动撑满。也就是说,子元素的宽度会自动适应父元素的宽度。但是,如果父元素的宽度不足以容纳所有子元素,子元素可能会被压缩或挤出父元素的范围。这是因为子元素默认具有flex-shrink属性,表示开启了元素的收缩功能,导致左边的子元素会挤掉右边的子元素的一部分。如果我们想要关闭子元素的自动收缩功能,可以使用flex:0 0 auto;来设置子元素的flex属性,然后再设置子元素的宽度即可。通过这种方式,我们可以手动控制子元素的宽度,而不受到父元素的影响。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [display flex设置宽度无效](https://blog.csdn.net/qq_28500793/article/details/88351951)[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]
- *2* [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^v92^chatsearchT0_1"}} ] [.reference_item]
- *3* [基础巩固 - flex宽度为内容宽度](https://blog.csdn.net/hhzzcc_/article/details/118466322)[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]
[ .reference_list ]