flex 布局中子元素设置宽度无效的解决办法(flex布局子元素height100)

编辑：rootadmin

flex 布局中子元素设置宽度无效的解决办法

推荐整理分享flex 布局中子元素设置宽度无效的解决办法(flex布局子元素height100)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:flex子元素单独设置,flex布局子元素换行,flex布局中子元素的对齐方式只能在父元素中控制,flex布局子元素宽度自适应,flex布局子元素height100,flex布局子项属性,flex布局子元素居中,flex布局中子元素div中的行内元素跑出父盒子,内容如对您有帮助，希望把文章链接给更多的朋友！

因为父元素设置了【display: flex】所以该父元素下所有的子元素都会默认加上【flex: 0 1 auto】。其中 1 就是 flex 中的 flex-shrink 属性，表示开启元素的收缩功能，所以子元素宽度才会失效。

flex 布局中子元素设置宽度无效的解决办法(flex布局子元素height100)

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

默认值：0 1 auto

值描述flex-grow一个数字，规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink一个数字，规定项目将相对于其他灵活的项目进行收缩的量。flex-basis项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。auto与 1 1 auto 相同。none与 0 0 auto 相同。initial设置该属性为它的默认值，即为 0 1 auto。请参阅 initial。inherit从父元素继承该属性。请参阅 inherit。解决方案

方案1

flex: 0 0 auto;width: 200px;

方案2

flex: 0 0 200px;

方案3（推荐）

flex-shrink: 0;width: 200px;

方案4

min-width: 200px;

本文链接地址:https://www.jiuchutong.com/zhishi/287247.html 转载请保留说明！

上一篇：小茴香的养殖种植方法(小茴香的栽培技术)

下一篇：事件循环（Event Loop）