我试图将前两个子元素保留在同一行,而第三个元素则在下面以全宽保留在自己的位置,所有这些都是在使用flex的情况下进行的.

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

当出现错误并且我不能更改代码时,label元素以编程方式添加到text元素之后.

如何强制标签元素在使用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 class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message</label>
</div>

推荐答案

如果希望flex项占据整行,请将其设置为width: 100%flex-basis: 100%,并在容器上启用wrap.

该项目现在将占用所有可用空间.sibling 姐妹被强制移到其他行.

.parent {
  display: flex;
  flex-wrap: wrap;
}

#range, #text {
  flex: 1;
}

.error {
  flex: 0 0 100%; /* flex-grow, flex-shrink, flex-basis */
  border: 1px dashed black;
}
<div class="parent">
  <input type="range" id="range">
  <input type="text" id="text">
  <label class="error">Error message (takes full width)</label>
</div>

More info: flex-wrap属性的初始值是nowrap,这意味着所有项都将排成一行.MDN

Html相关问答推荐

未显示新组件的视图

如何设置弹性盒子容器的具体大小?

在css中,如何在英雄版块的标题后面做一个粘性的导航栏?

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

柔性盒内的物品;t覆盖整个宽度,即使设置为100%

如何将tmap按钮和图例更改为位于页脚后面?

如何将图像放在其内部按钮下方

MUI 日期 Select 器要包含的日期

如何为Vuetify输入控件减小标签和字段之间的间距?

需要帮助个性化我的 CSS 导航栏:如何在鼠标悬停时突出显示
  • 元素?
  • 把标题、段落和图片放在一起

    我用 ejs 修复了一个奇怪的语法错误,我想知道问题出在哪里

    有没有办法让 textarea 在调整大小时不显示 CSS 转换?

    使用 Selenium for Python 在网站上查找类名称中包含换行符的元素

    html元素可以被css跳过吗?

    Bootstrap Grid System col 无法正常工作

    我可以将两个元素之间的所有空间都放在弹性框或网格中吗?

    无法在 css 的 body 标签中正确呈现(内联显示)

    将GET方法返回的数据存储到变量中

    CSS过渡在开始时有黑色背景,为什么?