html – 使flex项目在一行上占据整个宽度

概述我试图在同一行保留前两个子元素,而第三个元素在全宽度下面保持自己,同时使用flex. 我特别感兴趣的是在前2个元素上使用flex-grow和flex-shrink属性(这是我不使用百分比的原因之一)但是第三个元素必须是全宽并且低于前两个元素. 当出现错误时,在文本元素之后以编程方式添加label元素,并且我无法更改代码. 如何强制标签元素在使用flex定位的其他两个元素下方100％宽度？ .par 我试图在同一行保留前两个子元素,而第三个元素在全宽度下面保持自己,同时使用flex.

我特别感兴趣的是在前2个元素上使用flex-grow和flex-shrink属性(这是我不使用百分比的原因之一)但是第三个元素必须是全宽并且低于前两个元素.

当出现错误时,在文本元素之后以编程方式添加label元素,并且我无法更改代码.

如何强制标签元素在使用flex定位的其他两个元素下方100％宽度？

.parent {  display: flex;  align-items: center;  wIDth: 100%;  background-color: #ececec;}.parent * {  wIDth: 100%;}.parent #text {  min-wIDth: 75px;  flex-shrink: 2.25;}

<div >  <input type="range" ID="range">  <input type="text" ID="text">  <label >Error message</label></div>

解决方法 只要您希望d性项占据整行,请将其设置为wIDth：100％/ flex-basis：100％,并启用容器上的换行.

该项目现在消耗所有可用空间.兄弟姐妹被迫进入其他行.

.parent {  display: flex;  flex-wrap: wrap;  align-items: center;  background-color: #ececec;}.error {  flex: 0 0 100%; /* fg: 0,fs: 0,fb: 100% */  border: 1px dashed red;}#range,#text {  flex: 1;}

<div >  <input type="range" ID="range">  <input type="text" ID="text">  <label >Error message</label></div>

总结

以上是内存溢出为你收集整理的html – 使flex项目在一行上占据整个宽度全部内容，希望文章能够帮你解决html – 使flex项目在一行上占据整个宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。